WB-1588: Allow custom ActionItem elements #2135

jandrade · 2023-12-05T17:50:28Z

Summary:

Allow custom ActionItem components by using Cell internally.

Removed ClickableBehavior from ActionItem and replaced it with
CompactCell (which internally uses Clickable).
Removed skipClientNav from ActionItem as it is no longer used/needed.
Added stories and better documentation for ActionMenu and ActionItem.

Modified Cell to support two new props required for the ActionItem changes:

role is used to set the role attribute on the cell's root element.
rootStyle is used to override the style attribute on the cell's root
element.

Issue: WB-1588

Test plan:

ActionMenu:

Navigate to http://localhost:6061/?path=/story/dropdown-actionmenu--custom-action-items
Verify that the custom action items are rendered as expected.
Verify that the custom action items are clickable and that the click handler
is called as expected.

Screen.Recording.2023-12-05.at.12.51.05.PM.mov

ActionItem docs:

Navigate to http://localhost:6061/?path=/docs/dropdown-actionitem--docs
Verify that the documentation for ActionItem is correct and up to date.

changeset-bot · 2023-12-05T17:50:32Z

🦋 Changeset detected

Latest commit: 4533719

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@khanacademy/wonder-blocks-dropdown	Major
@khanacademy/wonder-blocks-cell	Minor
@khanacademy/wonder-blocks-birthday-picker	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

khan-actions-bot · 2023-12-05T17:50:44Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .changeset/empty-kids-breathe.md, .changeset/new-lamps-doubt.md, __docs__/wonder-blocks-cell/compact-cell.argtypes.tsx, __docs__/wonder-blocks-dropdown/action-item.argtypes.tsx, __docs__/wonder-blocks-dropdown/action-item.stories.tsx, __docs__/wonder-blocks-dropdown/action-menu.stories.tsx, __docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts, consistency-tests/__tests__/clickables.test.tsx, packages/wonder-blocks-dropdown/package.json, packages/wonder-blocks-dropdown/tsconfig-build.json, packages/wonder-blocks-cell/src/util/types.ts, packages/wonder-blocks-dropdown/src/components/action-item.tsx, packages/wonder-blocks-cell/src/components/internal/cell-core.tsx, packages/wonder-blocks-dropdown/src/components/__tests__/action-item.test.tsx, packages/wonder-blocks-cell/src/components/internal/__tests__/cell-core.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2023-12-05T17:52:27Z

Size Change: -40 B (0%)

Total Size: 90.9 kB

Filename	Size	Change
`packages/wonder-blocks-cell/dist/es/index.js`	2.22 kB	+25 B (+1%)
`packages/wonder-blocks-dropdown/dist/es/index.js`	11.9 kB	-65 B (-1%)

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.69 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.53 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.72 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	1.13 kB
`packages/wonder-blocks-button/dist/es/index.js`	4.27 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.24 kB
`packages/wonder-blocks-color/dist/es/index.js`	1.15 kB
`packages/wonder-blocks-core/dist/es/index.js`	3.67 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.33 kB
`packages/wonder-blocks-form/dist/es/index.js`	5.34 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-i18n/dist/es/index.js`	4.54 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	3.21 kB
`packages/wonder-blocks-icon/dist/es/index.js`	1.06 kB
`packages/wonder-blocks-labeled-field/dist/es/index.js`	72 B
`packages/wonder-blocks-layout/dist/es/index.js`	1.88 kB
`packages/wonder-blocks-link/dist/es/index.js`	2.54 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.04 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.03 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.33 kB
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.51 kB
`packages/wonder-blocks-search-field/dist/es/index.js`	1.55 kB
`packages/wonder-blocks-spacing/dist/es/index.js`	158 B
`packages/wonder-blocks-switch/dist/es/index.js`	2.06 kB
`packages/wonder-blocks-testing/dist/es/index.js`	3.94 kB
`packages/wonder-blocks-theming/dist/es/index.js`	1.21 kB
`packages/wonder-blocks-timing/dist/es/index.js`	1.78 kB
`packages/wonder-blocks-toolbar/dist/es/index.js`	862 B
`packages/wonder-blocks-tooltip/dist/es/index.js`	5.05 kB
`packages/wonder-blocks-typography/dist/es/index.js`	1.49 kB

_{compressed-size-action}

github-actions · 2023-12-05T17:52:58Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (002aeb6) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2135"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2135

codecov · 2023-12-05T17:53:48Z

Codecov Report

Merging #2135 (4533719) into main (9092363) will decrease coverage by 0.01%.
The diff coverage is 100.00%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2135      +/-   ##
==========================================
- Coverage   97.05%   97.05%   -0.01%     
==========================================
  Files         241      241              
  Lines       28038    28006      -32     
  Branches     2464     2405      -59     
==========================================
- Hits        27212    27180      -32     
  Misses        826      826

Files	Coverage Δ
...-blocks-cell/src/components/internal/cell-core.tsx	`100.00% <100.00%> (ø)`
...der-blocks-dropdown/src/components/action-item.tsx	`100.00% <100.00%> (ø)`

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9092363...4533719. Read the comment docs.

github-actions · 2023-12-05T17:56:01Z

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-rypjmjkakz.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	4
Tests with visual changes	7
Total stories	394
Inherited (not captured) snapshots [TurboSnap]	317
Tests on the build	321

jeresig

This looks really sharp - thank you for working on this!

jeresig · 2023-12-05T17:55:49Z

packages/wonder-blocks-dropdown/src/components/action-item.tsx

+    wrapper: {
+        // This removes the 300ms click delay on mobile browsers by indicating
+        // that "double-tap to zoom" shouldn't be used on this element.
+        touchAction: "manipulation",


Ooh - neat!

jandrade · 2023-12-05T17:53:37Z

__docs__/wonder-blocks-dropdown/action-item.stories.tsx

note: Added separate docs for ActionItem to help understanding better how this component works.

jandrade · 2023-12-05T17:54:11Z

__docs__/wonder-blocks-dropdown/action-menu.stories.tsx

@@ -431,3 +442,91 @@ const locales = [
    {id: "fr", locale: "fr", localName: "français"},
    {id: "it", locale: "it", localName: "italiano"},
 ];
+


note: This story shows how we can use an ActionMenu with custom ActionItem elements.

jandrade · 2023-12-05T17:54:49Z

consistency-tests/__tests__/clickables.test.tsx

@@ -10,7 +10,7 @@ import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";

 import plus from "@phosphor-icons/core/regular/plus.svg";
-import {ActionItem, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
+import {OptionItem} from "@khanacademy/wonder-blocks-dropdown";


note: Removed ActionItem from here as we now delegate the ActionItem's clickable behavior/rendering to CompactCell.

packages/wonder-blocks-cell/src/components/internal/cell-core.tsx

jandrade · 2023-12-05T17:56:04Z

packages/wonder-blocks-dropdown/src/components/__tests__/action-item.test.tsx

@@ -18,7 +18,10 @@ describe("ActionItem", () => {
        render(<ActionItem href="/foo" label="Example" disabled={true} />);

        // Assert
-        expect(screen.getByRole("menuitem")).toBeDisabled();
+        expect(screen.getByRole("menuitem")).toHaveAttribute(


note: Cell handles the disabled state with the aria-disabled attr.

jandrade · 2023-12-05T17:56:20Z

packages/wonder-blocks-dropdown/src/components/action-item.tsx

-     * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
-     * page reload.
-     */
-    skipClientNav?: boolean;


note: This is no longer used, so I got rid of it.

Allow custom ActionItem elements

c198896

jandrade self-assigned this Dec 5, 2023

khan-actions-bot requested a review from a team December 5, 2023 17:50

jeresig approved these changes Dec 5, 2023

View reviewed changes

jandrade commented Dec 5, 2023

View reviewed changes

jandrade added 5 commits December 5, 2023 13:00

Minor fixes (moving height to ActionItem)

8c1144a

Override focus state

88b3d7c

Add more unit tests

550c9ca

Add interaction test, disable snapshot

d61dbf7

Add more vertical space to custom icons story (snapshot fix)

4533719

jandrade merged commit 860d9ef into main Dec 5, 2023
13 checks passed

jandrade deleted the action-item-as-cell branch December 5, 2023 18:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WB-1588: Allow custom ActionItem elements #2135

WB-1588: Allow custom ActionItem elements #2135

jandrade commented Dec 5, 2023 •

edited

Loading

changeset-bot bot commented Dec 5, 2023 •

edited

Loading

khan-actions-bot commented Dec 5, 2023

github-actions bot commented Dec 5, 2023 •

edited

Loading

github-actions bot commented Dec 5, 2023 •

edited

Loading

codecov bot commented Dec 5, 2023 •

edited

Loading

github-actions bot commented Dec 5, 2023 •

edited

Loading

jeresig left a comment

jeresig Dec 5, 2023

jandrade Dec 5, 2023

jandrade Dec 5, 2023

jandrade Dec 5, 2023

jandrade Dec 5, 2023

jandrade Dec 5, 2023

WB-1588: Allow custom ActionItem elements #2135

WB-1588: Allow custom ActionItem elements #2135

Conversation

jandrade commented Dec 5, 2023 • edited Loading

Summary:

Test plan:

ActionMenu:

ActionItem docs:

changeset-bot bot commented Dec 5, 2023 • edited Loading

🦋 Changeset detected

khan-actions-bot commented Dec 5, 2023

Gerald

github-actions bot commented Dec 5, 2023 • edited Loading

github-actions bot commented Dec 5, 2023 • edited Loading

npm Snapshot: Published

codecov bot commented Dec 5, 2023 • edited Loading

Codecov Report

github-actions bot commented Dec 5, 2023 • edited Loading

A new build was pushed to Chromatic! 🚀

Chromatic results:

jeresig left a comment

Choose a reason for hiding this comment

jeresig Dec 5, 2023

Choose a reason for hiding this comment

jandrade Dec 5, 2023

Choose a reason for hiding this comment

jandrade Dec 5, 2023

Choose a reason for hiding this comment

jandrade Dec 5, 2023

Choose a reason for hiding this comment

jandrade Dec 5, 2023

Choose a reason for hiding this comment

jandrade Dec 5, 2023

Choose a reason for hiding this comment

jandrade commented Dec 5, 2023 •

edited

Loading

changeset-bot bot commented Dec 5, 2023 •

edited

Loading

github-actions bot commented Dec 5, 2023 •

edited

Loading

github-actions bot commented Dec 5, 2023 •

edited

Loading

codecov bot commented Dec 5, 2023 •

edited

Loading

github-actions bot commented Dec 5, 2023 •

edited

Loading