From 16e1635a282cccf41427f56d6c290e4da2f30fe7 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Mon, 17 Jun 2024 12:18:59 -0600 Subject: [PATCH] Adds large IconButton size (#2253) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: - IconButton: Add option for `large` value for `size` prop (24x24 icon size with target area of 48x48) Issue: WB-1694 ## Test plan: - New large size for the IconButton meets specifications - `?path=/story/packages-iconbutton--sizes` - `?path=/docs/packages-iconbutton-all-variants--docs` - IconButton stories have 0 warnings in the Storybook a11y addon Author: beaesguerra Reviewers: jandrade Required Reviewers: Approved By: jandrade Checks: ✅ codecov/project, ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), 🚫 Chromatic - Get results on regular PRs, ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, 🚫 Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Publish npm snapshot, ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⌛ undefined Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2253 --- .changeset/four-donuts-chew.md | 5 ++ .../icon-button-variants.stories.tsx | 88 +++++++++++++------ .../icon-button.argtypes.ts | 17 +++- .../icon-button.stories.tsx | 14 ++- .../src/components/icon-button.tsx | 5 +- .../src/util/icon-button-util.test.ts | 2 + .../src/util/icon-button-util.ts | 4 +- 7 files changed, 102 insertions(+), 33 deletions(-) create mode 100644 .changeset/four-donuts-chew.md diff --git a/.changeset/four-donuts-chew.md b/.changeset/four-donuts-chew.md new file mode 100644 index 000000000..b4be6170d --- /dev/null +++ b/.changeset/four-donuts-chew.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-icon-button": minor +--- + +IconButton: Add option for `large` value for `size` prop (24x24 icon size with target area of 48x48) diff --git a/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx b/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx index 1aaa4b420..c55f658a5 100644 --- a/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx +++ b/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx @@ -25,6 +25,13 @@ export default { type StoryComponentType = StoryObj; +const sizes: ("xsmall" | "small" | "medium" | "large")[] = [ + "xsmall", + "small", + "medium", + "large", +]; + const KindVariants = ({ kind, light, @@ -38,7 +45,7 @@ const KindVariants = ({ <> {kind}-default - + + {sizes.map((size) => ( + + ))} + {kind}-destructive - + + {sizes.map((size) => ( + + ))} + {kind}-disabled - + + {sizes.map((size) => ( + + ))} + )} @@ -160,11 +188,17 @@ const styles = StyleSheet.create({ gridTemplateColumns: "repeat(3, 250px)", gap: spacing.large_24, }, - gridRow: { - flexDirection: "row", + gridCol: { + flexDirection: "column", alignItems: "center", - gap: spacing.medium_16, + gap: spacing.large_24, justifyContent: "space-between", padding: spacing.medium_16, }, + iconButtons: { + display: "flex", + flexDirection: "row", + alignItems: "center", + gap: spacing.xLarge_32, + }, }); diff --git a/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts b/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts index 4e97b5293..eb5e1ac47 100644 --- a/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts +++ b/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts @@ -49,14 +49,27 @@ export default { type: "select", }, description: "The size of the icon button.", - options: ["xsmall", "small", "medium"], + options: ["xsmall", "small", "medium", "large"], table: { type: { - summary: `"xsmall" | "small" | "medium"`, + summary: `"xsmall" | "small" | "medium" | "large"`, }, defaultValue: { summary: `"medium"`, }, }, }, + "aria-label": { + description: + "The description of this component for the screenreader to read.", + control: { + type: "text", + }, + table: { + category: "Accessibility", + type: { + summary: "string", + }, + }, + }, }; diff --git a/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx b/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx index 79aed0cfc..7e1e004f2 100644 --- a/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx +++ b/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx @@ -84,6 +84,9 @@ export default { }, }, argTypes: IconButtonArgtypes, + args: { + "aria-label": "Search", + }, } as Meta; type StoryComponentType = StoryObj; @@ -115,6 +118,7 @@ export const Default: StoryComponentType = { * - `xsmall` (16px icon with a 24px touch target). * - `small` (24px icon with a 32px touch target). * - `medium` (24px icon with a 40px touch target). + * - `large` (24px icon with a 48px touch target). */ export const Sizes: StoryComponentType = { ...Default, @@ -139,6 +143,10 @@ export const Sizes: StoryComponentType = { medium + + large + + ), }; @@ -185,26 +193,30 @@ export const Variants: StoryComponentType = { */ export const WithColor: StoryComponentType = { name: "Color", - render: () => ( + render: (args) => ( {}} color="destructive" /> {}} kind="secondary" color="destructive" /> {}} kind="tertiary" color="destructive" /> > & { /** @@ -42,7 +42,8 @@ export type SharedProps = Partial> & { testId?: string; /** * Size of the icon button. - * One of `xsmall` (16 icon, 20 target), `small` (24, 32), or `medium (24, 40). + * One of `xsmall` (16 icon, 20 target), `small` (24, 32), `medium` (24, 40), + * or `large` (24, 48). * Defaults to `medium`. */ size?: IconButtonSize; diff --git a/packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts b/packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts index 039290f28..ea2b0f221 100644 --- a/packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts +++ b/packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts @@ -6,6 +6,7 @@ describe("iconSizeForButtonSize", () => { ${"xsmall"} | ${"small"} ${"small"} | ${"medium"} ${"medium"} | ${"medium"} + ${"large"} | ${"medium"} `( "should return $expectedIconSize icon for $buttonSize icon button", ({buttonSize, expectedIconSize}) => { @@ -20,6 +21,7 @@ describe("targetPixelsForSize", () => { ${"xsmall"} | ${24} ${"small"} | ${32} ${"medium"} | ${40} + ${"large"} | ${48} `( "should return $expectedTargetPixels for $size icon button", ({size, expectedTargetPixels}) => { diff --git a/packages/wonder-blocks-icon-button/src/util/icon-button-util.ts b/packages/wonder-blocks-icon-button/src/util/icon-button-util.ts index 3b4d6dacd..652e4ccd8 100644 --- a/packages/wonder-blocks-icon-button/src/util/icon-button-util.ts +++ b/packages/wonder-blocks-icon-button/src/util/icon-button-util.ts @@ -12,6 +12,8 @@ export const iconSizeForButtonSize = (size: IconButtonSize): IconSize => { return "medium"; case "medium": return "medium"; + case "large": + return "medium"; } }; @@ -19,4 +21,4 @@ export const iconSizeForButtonSize = (size: IconButtonSize): IconSize => { * A function that returns the size of the touch target in pixels for a given icon button size. */ export const targetPixelsForSize = (size: IconButtonSize): number => - ({xsmall: 24, small: 32, medium: 40}[size]); + ({xsmall: 24, small: 32, medium: 40, large: 48}[size]);