➡ Updates Input Option (#2365)

* create Menu.styles * installs descendants in menu * extract useMenuHeight * init descendants * pass onItemFocus from provider * abstract out useUpdatedChildren * creates useHighlightReducer * cleanup reducer * skip disabled elements * implement descendant in submenu * Update yarn.lock * rm focus-visible styles we always want focus * fix menu item list style * fix ts errors * rm deprecated hooks * rm debug text * restructure test suite * Create blue-crews-hope.md * Updates stories * adds controlled story * modernizes spec file * Update Menu.stories.tsx * Update SplitButton.spec.tsx * update split button pkg.json * Update yarn.lock * Delete getNewIndex.ts * add // prettier-ignore * mv HighlightReducer Update getUpdatedIndex.ts * Update .gitignore * creates AriaLabelPropsWithChildren type * uses AriaLabelPropsWithChildren in InputOption * Create InputOptionContent generated story * InputOptionContent use tokens, extend className * inputOptionThemeStyles use color tokens * Update titleClassName * create & use InputOptionContext * refactor inputOptionStyles * fix inputoption icon placement & sizing * update icon hover styles * Update Avatar props (#2352) * avatar accepts null text * update generated stories * changeset * Update spotty-ghosts-play.md * add turbo to clean (#2361) * pr * Update .gitignore * create Menu.styles * installs descendants in menu * extract useMenuHeight * init descendants * pass onItemFocus from provider * abstract out useUpdatedChildren * creates useHighlightReducer * cleanup reducer * skip disabled elements * implement descendant in submenu * Update yarn.lock * rm focus-visible styles we always want focus * fix menu item list style * fix ts errors * rm deprecated hooks * rm debug text * restructure test suite * Create blue-crews-hope.md * Updates stories * adds controlled story * modernizes spec file * Update Menu.stories.tsx * adds preserveIconSpace. Update unique classnames * update component exports * Create big-wasps-fix.md * Create shaggy-cheetahs-ring.md * Update big-wasps-fix.md * Renames selected -> checked * creates separate InputOptionContent.stories * Update big-wasps-fix.md * update active wedge to border.primary * include darkMode in InputOptionContext * rm old highlight reducer * rm unused descendant vars * rm checked styles * Update big-wasps-fix.md * typo * revert wedge color to blue.base * revert icon height to default * use disabled prop on `Description` * add style changes to changeset * updates text highlight color targeting * revert implementing of Label component * add description to highlight story * update changesets * add tests for AriaLabelPropsWithChildren * update documentation --------- Co-authored-by: Shaneeza <[email protected]>
mongodb · Jun 25, 2024 · 5257a51 · 5257a51
1 parent 8bce562
commit 5257a51
Show file tree

Hide file tree

Showing 17 changed files with 609 additions and 233 deletions.
diff --git a/.changeset/big-wasps-fix.md b/.changeset/big-wasps-fix.md
@@ -0,0 +1,35 @@
+---
+'@leafygreen-ui/input-option': major
+---
+
+### API changes
+- Renames `selected` prop to `checked` (this is done to avoid confusion with the `aria-selected` attribute, which is conditionally applied via the `highlighted` prop)
+ - `checked` applies the `aria-checked` attribute
+ - Note: `checked` _does not_ apply any styles. Any "checked" styles must be applied by the consuming component (this is consistent with previous behavior)
+- Adds `preserveIconSpace` prop to `InputOptionContent` to determine whether menu items should preserve space for a left glyph, or left align all text content. Use this prop in menus where some items may or may not have icons/glyphs, in order to keep text across menu items aligned.
+- Extends `AriaLabelPropsWithChildren` in `InputOptionProps`
+  - [`AriaLabelPropsWithChildren`](../packages/a11y/src/AriaLabelProps.ts) allows a component to accept any of `aria-label`, `aria-labelledby` or `children` as sufficient text for screen-reader accessibility
+
+### Styling changes
+
+- Updates `InputOption` and `InputOptionContent` styles to use updated `color` and `spacing` tokens
+- Exports `inputOptionClassName`, and `inputOptionContentClassName`.
+
+#### Spacing overview
+ - block padding: 8px
+ - inline padding: 12px
+ - icon/text/chevron gap: 8px
+ - label & description font-size: 13px
+ - label & description line-height: 16px
+
+#### Colors overview
+ - Left & right icon color: `color.[theme].icon.primary` tokens 
+ - Label & Description: use default `Label` & `Description` colors from `typography`
+ - Background uses `color[theme].background.primary` tokens (including hover & focus states)
+ - Wedge uses `palette.blue.base` for all modes
+ - The `highlight` prop uses the `.focus` state color for Icon, Text & Background colors
+
+
+### Internal updates
+
+- Establishes internal `InputOptionContext` to track `disabled`,  `highlighted`, & `checked` attributes.
diff --git a/.changeset/shaggy-cheetahs-ring.md b/.changeset/shaggy-cheetahs-ring.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/a11y': minor
+---
+
+Adds `AriaLabelPropsWithChildren` type that requires either `children`, or other `aria-label` attributes to be defined. Allows a component to accept any of `aria-label`, `aria-labelledby` or `children` as sufficient text for screen-reader accessibility
diff --git a/packages/a11y/src/A11y.spec.tsx b/packages/a11y/src/A11y.spec.tsx
@@ -4,7 +4,11 @@ import { axe } from 'jest-axe';
 
 import { renderHook } from '@leafygreen-ui/testing-lib';
 
-import { AriaLabelProps, AriaLabelPropsWithLabel } from './AriaLabelProps';
+import {
+  AriaLabelProps,
+  AriaLabelPropsWithChildren,
+  AriaLabelPropsWithLabel,
+} from './AriaLabelProps';
 import {
   prefersReducedMotion,
   useAccessibleForm,
@@ -123,50 +127,100 @@ describe('packages/a11y', () => {
   /* eslint-disable jest/no-disabled-tests, jest/expect-expect, @typescript-eslint/no-unused-vars */
   describe.skip('AriaLabelProps types', () => {
     test('AriaLabelProps', () => {
-      // @ts-expect-error
-      const _1: AriaLabelProps = {};
-      const _2: AriaLabelProps = {
+      // @ts-expect-error - empty object not allowed
+      const empty: AriaLabelProps = {};
+      const aria_label: AriaLabelProps = {
         'aria-label': 'some label',
       };
-      const _3: AriaLabelProps = {
+      const labelledby: AriaLabelProps = {
         'aria-labelledby': '#some-id',
       };
-      const _4: AriaLabelProps = {
+      const both_aria: AriaLabelProps = {
         'aria-label': 'some label',
         'aria-labelledby': '#some-id',
       };
-      [_1, _2, _3, _4]; // Avoid TS error
+      [empty, aria_label, labelledby, both_aria]; // Avoid TS error
     });
     test('AriaLabelPropsWithLabel', () => {
       // @ts-expect-error
-      const _1: AriaLabelPropsWithLabel = {};
-      const _2: AriaLabelPropsWithLabel = {
+      const empty: AriaLabelPropsWithLabel = {};
+      const aria_label: AriaLabelPropsWithLabel = {
         'aria-label': 'some label',
       };
-      const _3: AriaLabelPropsWithLabel = {
+      const labelledby: AriaLabelPropsWithLabel = {
         'aria-labelledby': '#some-id',
       };
-      const _4: AriaLabelPropsWithLabel = {
+      const both_aria: AriaLabelPropsWithLabel = {
         'aria-label': 'some label',
         'aria-labelledby': '#some-id',
       };
-      const _5: AriaLabelPropsWithLabel = {
+      const label_only: AriaLabelPropsWithLabel = {
         label: 'some label',
       };
-      const _6: AriaLabelPropsWithLabel = {
+      const label_and_aria: AriaLabelPropsWithLabel = {
         label: 'some label',
         'aria-label': 'some label',
       };
-      const _7: AriaLabelPropsWithLabel = {
+      const label_and_labelledby: AriaLabelPropsWithLabel = {
         label: 'some label',
         'aria-labelledby': '#some-id',
       };
-      const _8: AriaLabelPropsWithLabel = {
+      const all: AriaLabelPropsWithLabel = {
         label: 'some label',
         'aria-label': 'some label',
         'aria-labelledby': '#some-id',
       };
-      [_1, _2, _3, _4, _5, _6, _7, _8]; // Avoid TS error
+      [
+        empty,
+        aria_label,
+        labelledby,
+        both_aria,
+        label_only,
+        label_and_aria,
+        label_and_labelledby,
+        all,
+      ]; // Avoid TS error
+    });
+    test('AriaLabelPropsWithChildren', () => {
+      // @ts-expect-error - empty object not allowed
+      const empty: AriaLabelPropsWithChildren = {};
+      const label: AriaLabelPropsWithChildren = {
+        'aria-label': 'some label',
+      };
+      const labelledby: AriaLabelPropsWithChildren = {
+        'aria-labelledby': '#some-id',
+      };
+      const both_aria: AriaLabelPropsWithChildren = {
+        'aria-label': 'some label',
+        'aria-labelledby': '#some-id',
+      };
+      const children: AriaLabelPropsWithChildren = {
+        children: 'some label',
+      };
+      const label_and_children: AriaLabelPropsWithChildren = {
+        children: 'some label',
+        'aria-label': 'some label',
+      };
+      const labelledby_and_children: AriaLabelPropsWithChildren = {
+        children: 'some label',
+        'aria-labelledby': '#some-id',
+      };
+      const all: AriaLabelPropsWithChildren = {
+        children: 'some label',
+        'aria-label': 'some label',
+        'aria-labelledby': '#some-id',
+      };
+
+      [
+        empty,
+        label,
+        labelledby,
+        both_aria,
+        children,
+        label_and_children,
+        labelledby_and_children,
+        all,
+      ]; //
     });
   });
 });
diff --git a/packages/a11y/src/AriaLabelProps.ts b/packages/a11y/src/AriaLabelProps.ts
@@ -55,3 +55,15 @@ export type AriaLabelPropsWithLabel =
        */
       label: ReactNode;
     } & Partial<AriaLabelProps>);
+
+/**
+ * Conditionally requires {@link AriaLabelProps}
+ * if `children` is not provided
+ */
+export type AriaLabelPropsWithChildren =
+  | ({
+      children: ReactNode;
+    } & Partial<AriaLabelProps>)
+  | ({
+      children?: ReactNode | undefined;
+    } & AriaLabelProps);
diff --git a/packages/a11y/src/index.ts b/packages/a11y/src/index.ts
@@ -1,6 +1,7 @@
-export {
-  type AriaLabelProps,
-  type AriaLabelPropsWithLabel,
+export type {
+  AriaLabelProps,
+  AriaLabelPropsWithChildren,
+  AriaLabelPropsWithLabel,
 } from './AriaLabelProps';
 export { default as prefersReducedMotion } from './prefersReducedMotion';
 export { default as useAccessibleForm } from './useAccessibleForm';

diff --git a/packages/input-option/src/InputOption/InputOption.stories.tsx b/packages/input-option/src/InputOption/InputOption.stories.tsx
@@ -1,10 +1,11 @@
+/* eslint-disable react/jsx-key */
 import React from 'react';
 import {
   storybookArgTypes,
   storybookExcludedControlParams,
   StoryMetaType,
 } from '@lg-tools/storybook-utils';
-import { StoryFn } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
 
 import Icon, { glyphs } from '@leafygreen-ui/icon';
 
@@ -15,7 +16,7 @@ import {
 
 import { InputOption, type InputOptionProps } from '.';
 
-const meta: StoryMetaType<typeof InputOption> = {
+export default {
   title: 'Components/InputOption',
   component: InputOption,
   parameters: {
@@ -31,17 +32,15 @@ const meta: StoryMetaType<typeof InputOption> = {
       ],
     },
     generate: {
+      storyNames: ['Generated', 'WithContent'],
       combineArgs: {
         darkMode: [false, true],
-        selected: [false, true],
-        isInteractive: [false, true],
-        showWedge: [false, true],
-        disabled: [false, true],
       },
     },
   },
   args: {
     children: 'Some text',
+    showWedge: true,
   },
   argTypes: {
     disabled: {
@@ -50,7 +49,7 @@ const meta: StoryMetaType<typeof InputOption> = {
     highlighted: {
       control: 'boolean',
     },
-    selected: {
+    checked: {
       control: 'boolean',
     },
     showWedge: {
@@ -69,9 +68,7 @@ const meta: StoryMetaType<typeof InputOption> = {
     },
     as: storybookArgTypes.as,
   },
-};
-
-export default meta;
+} satisfies StoryMetaType<typeof InputOption>;
 
 export const LiveExample: StoryFn<
   InputOptionProps & InputOptionContentProps
@@ -95,4 +92,15 @@ LiveExample.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
-export const Generated = () => {};
+export const Generated = {
+  render: () => <></>,
+  parameters: {
+    generate: {
+      combineArgs: {
+        highlighted: [false, true],
+        checked: [false, true],
+        disabled: [false, true],
+      },
+    },
+  },
+} satisfies StoryObj<typeof InputOption>;