Merge branch 'master' into pagination-overflow

carbon-design-system · Feb 25, 2021 · d6f5ef2 · d6f5ef2
2 parents ed4ae1f + fcf8df0
commit d6f5ef2
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 175 deletions.
diff --git a/packages/components/src/components/checkbox/_checkbox.scss b/packages/components/src/components/checkbox/_checkbox.scss
@@ -85,7 +85,8 @@
     // different checkbox states.
     width: rem(16px);
     height: rem(16px);
-    margin: rem(2px);
+    // increase left margin for #6480
+    margin: rem(2px) rem(2px) rem(2px) rem(3px);
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
@@ -41,6 +41,7 @@ function AccordionItem({
   });
 
   if (open !== prevIsOpen) {
+    setAnimation(isOpen ? 'collapsing' : 'expanding');
     setIsOpen(open);
     setPrevIsOpen(open);
   }

diff --git a/packages/react/src/components/Button/Button.js b/packages/react/src/components/Button/Button.js
@@ -70,6 +70,7 @@ const Button = React.forwardRef(function Button(
   let otherProps = {
     disabled,
     type,
+    'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null,
   };
   const anchorProps = {
     href,

diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2060,6 +2060,7 @@ exports[`DataTable should render 1`] = `
                       type="button"
                     >
                       <button
+                        aria-pressed={null}
                         className="bx--btn bx--btn--primary"
                         disabled={false}
                         onClick={[MockFunction]}
@@ -2132,6 +2133,7 @@ exports[`DataTable should render 1`] = `
                       type="button"
                     >
                       <button
+                        aria-pressed={null}
                         className="bx--btn bx--btn--primary"
                         disabled={false}
                         onClick={[MockFunction]}
@@ -2204,6 +2206,7 @@ exports[`DataTable should render 1`] = `
                       type="button"
                     >
                       <button
+                        aria-pressed={null}
                         className="bx--btn bx--btn--primary"
                         disabled={false}
                         onClick={[MockFunction]}
@@ -2262,6 +2265,7 @@ exports[`DataTable should render 1`] = `
                     type="button"
                   >
                     <button
+                      aria-pressed={null}
                       className="bx--batch-summary__cancel bx--btn bx--btn--primary"
                       disabled={false}
                       onClick={[Function]}
@@ -2515,6 +2519,7 @@ exports[`DataTable should render 1`] = `
                 type="button"
               >
                 <button
+                  aria-pressed={null}
                   className="bx--btn bx--btn--sm bx--btn--primary"
                   disabled={false}
                   onClick={[MockFunction]}
@@ -3066,6 +3071,7 @@ exports[`DataTable sticky header should render 1`] = `
                       type="button"
                     >
                       <button
+                        aria-pressed={null}
                         className="bx--btn bx--btn--primary"
                         disabled={false}
                         onClick={[MockFunction]}
@@ -3138,6 +3144,7 @@ exports[`DataTable sticky header should render 1`] = `
                       type="button"
                     >
                       <button
+                        aria-pressed={null}
                         className="bx--btn bx--btn--primary"
                         disabled={false}
                         onClick={[MockFunction]}
@@ -3210,6 +3217,7 @@ exports[`DataTable sticky header should render 1`] = `
                       type="button"
                     >
                       <button
+                        aria-pressed={null}
                         className="bx--btn bx--btn--primary"
                         disabled={false}
                         onClick={[MockFunction]}
@@ -3268,6 +3276,7 @@ exports[`DataTable sticky header should render 1`] = `
                     type="button"
                   >
                     <button
+                      aria-pressed={null}
                       className="bx--batch-summary__cancel bx--btn bx--btn--primary"
                       disabled={false}
                       onClick={[Function]}
@@ -3521,6 +3530,7 @@ exports[`DataTable sticky header should render 1`] = `
                 type="button"
               >
                 <button
+                  aria-pressed={null}
                   className="bx--btn bx--btn--sm bx--btn--primary"
                   disabled={false}
                   onClick={[MockFunction]}

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -29,6 +29,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
     type="button"
   >
     <button
+      aria-pressed={null}
       className="custom-class bx--btn bx--btn--primary"
       disabled={false}
       tabIndex={0}

diff --git a/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/...ges/react/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -39,6 +39,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
           type="button"
         >
           <button
+            aria-pressed={null}
             className="bx--batch-summary__cancel bx--btn bx--btn--primary"
             disabled={false}
             onClick={[MockFunction]}
@@ -93,6 +94,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
           type="button"
         >
           <button
+            aria-pressed={null}
             className="bx--batch-summary__cancel bx--btn bx--btn--primary"
             disabled={false}
             onClick={[MockFunction]}

diff --git a/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/packages/react/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
@@ -36,6 +36,7 @@ exports[`ModalWrapper should render 1`] = `
       type="button"
     >
       <button
+        aria-pressed={null}
         className="btn-trigger bx--btn bx--btn--primary"
         disabled={false}
         onClick={[Function]}
@@ -171,6 +172,7 @@ exports[`ModalWrapper should render 1`] = `
                   type="button"
                 >
                   <button
+                    aria-pressed={null}
                     className="bx--btn bx--btn--secondary"
                     disabled={false}
                     onClick={[Function]}
@@ -192,6 +194,7 @@ exports[`ModalWrapper should render 1`] = `
                 type="button"
               >
                 <button
+                  aria-pressed={null}
                   className="bx--btn bx--btn--primary"
                   disabled={false}
                   onClick={[Function]}

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -92,7 +92,9 @@ const MultiSelect = React.forwardRef(function MultiSelect(
       ...downshiftProps,
       highlightedIndex,
       isOpen,
-      itemToString,
+      itemToString: (items) => {
+        return items.map((item) => itemToString(item)).join(', ');
+      },
       onStateChange,
       selectedItem: controlledSelectedItems,
       items,
@@ -245,6 +247,9 @@ const MultiSelect = React.forwardRef(function MultiSelect(
             sortItems(items, sortOptions).map((item, index) => {
               const itemProps = getItemProps({
                 item,
+                // we don't want Downshift to set aria-selected for us
+                // we also don't want to set 'false' for reader verbosity's sake
+                ['aria-selected']: isChecked ? true : null,
               });
               const itemText = itemToString(item);
               const isChecked =
@@ -254,6 +259,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
                 <ListBox.MenuItem
                   key={itemProps.id}
                   isActive={isChecked}
+                  aria-label={itemText}
                   isHighlighted={highlightedIndex === index}
                   title={itemText}
                   {...itemProps}>

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
@@ -8,12 +8,11 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import { withReadme } from 'storybook-readme';
 import OverflowMenu from '../OverflowMenu';
 import { OverflowMenu as OGOverflowMenu } from './OverflowMenu';
 import OverflowMenuItem from '../OverflowMenuItem';
-import OverflowREADME from './README.md';
 import mdx from './OverflowMenu.mdx';
+import { Filter16 } from '@carbon/icons-react';
 
 const directions = {
   'Bottom of the trigger button (bottom)': 'bottom',
@@ -70,126 +69,44 @@ export default {
   },
 };
 
-export const Basic = withReadme(OverflowREADME, () => (
-  <OverflowMenu {...props.menu()}>
-    <OverflowMenuItem {...props.menuItem()} itemText="Option 1" />
-    <OverflowMenuItem
-      {...props.menuItem()}
-      itemText="Option 2 is an example of a really long string and how we recommend handling this"
-      requireTitle
-      title="Custom tooltip title"
-    />
-    <OverflowMenuItem {...props.menuItem()} itemText="Option 3" />
-    <OverflowMenuItem {...props.menuItem()} itemText="Option 4" />
-    <OverflowMenuItem
-      {...props.menuItem()}
-      requireTitle
-      itemText="Danger option"
-      hasDivider
-      isDelete
-    />
+export const _Default = () => (
+  <OverflowMenu>
+    <OverflowMenuItem itemText="Stop app" />
+    <OverflowMenuItem itemText="Restart app" />
+    <OverflowMenuItem itemText="Rename app" />
+    <OverflowMenuItem itemText="Edit routes and access" requireTitle />
+    <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
   </OverflowMenu>
-));
-
-Basic.storyName = 'basic';
+);
 
-Basic.parameters = {
-  info: {
-    text: `
-        Overflow Menu is used when additional options are available to the user and there is a space constraint.
-        Create Overflow Menu Item components for each option on the menu.
-      `,
-  },
+_Default.story = {
+  name: 'Overflow Menu',
 };
 
-export const WithLinks = withReadme(OverflowREADME, () => (
-  <OverflowMenu {...props.menu()}>
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Option 1"
-    />
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Option 2 is an example of a really long string and how we recommend handling this"
-      requireTitle
-    />
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Option 3"
-    />
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Option 4"
-    />
-    <OverflowMenuItem
-      {...{
-        ...props.menuItem(),
-        href: 'https://www.ibm.com',
-      }}
-      itemText="Danger option"
-      hasDivider
-      isDelete
-    />
+export const RenderCustomIcon = () => (
+  <OverflowMenu renderIcon={Filter16}>
+    <OverflowMenuItem itemText="Filter A" />
+    <OverflowMenuItem itemText="Filter B" />
   </OverflowMenu>
-));
-
-WithLinks.storyName = 'with links';
+);
 
-WithLinks.parameters = {
-  info: {
-    text: `
-        Overflow Menu is used when additional options are available to the user and there is a space constraint.
-        Create Overflow Menu Item components for each option on the menu.
-
-        When given \`href\` props, menu items render as <a> tags to facilitate usability.
-      `,
-  },
-};
-
-export const CustomTrigger = withReadme(OverflowREADME, () => (
-  <OverflowMenu
-    {...{
-      ...props.menu(),
-      ariaLabel: null,
-      style: { width: 'auto' },
-      // eslint-disable-next-line react/display-name
-      renderIcon: () => <div style={{ padding: '0 1rem' }}>Menu</div>,
-    }}>
+export const Playground = () => (
+  <OverflowMenu {...props.menu()}>
     <OverflowMenuItem {...props.menuItem()} itemText="Option 1" />
     <OverflowMenuItem
       {...props.menuItem()}
       itemText="Option 2 is an example of a really long string and how we recommend handling this"
       requireTitle
+      title="Custom tooltip title"
     />
     <OverflowMenuItem {...props.menuItem()} itemText="Option 3" />
     <OverflowMenuItem {...props.menuItem()} itemText="Option 4" />
     <OverflowMenuItem
       {...props.menuItem()}
+      requireTitle
       itemText="Danger option"
       hasDivider
       isDelete
     />
   </OverflowMenu>
-));
-
-CustomTrigger.storyName = 'custom trigger';
-
-CustomTrigger.parameters = {
-  info: {
-    text: `
-        Sometimes you just want to render something other than an icon
-      `,
-  },
-};
+);
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.mdx b/packages/react/src/components/OverflowMenu/OverflowMenu.mdx
@@ -12,6 +12,16 @@ import { Props } from '@storybook/addon-docs/blocks';
 
 ## Overview
 
+The overflow menu component is a clickable element that contains additional
+options that are available to the user, but there is a space constraint.
+
+### `data-floating-menu-container`
+
+`OverflowMenu` uses React Portals to render the overflow menu into the DOM. To
+determine where in the DOM the menu will be placed, it looks for a parent
+element with the `data-floating-menu-container` attribute. If none parent with
+this attribute is found, the menu will be placed on `document.body`.
+
 ## Component API
 
 <Props />