Merge branch 'main' into 20859-wc-dropdown-autoalign

Author: heloiselui

packages/react/src/components/MultiSelect/MultiSelect.featureflag.stories.js

@@ -21,6 +21,66 @@ export default {
       </WithFeatureFlags>
     ),
   ],
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+    direction: {
+      options: ['top', 'bottom'],
+      control: { type: 'radio' },
+    },
+    type: {
+      options: ['inline', 'default'],
+      control: { type: 'radio' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    invalid: {
+      control: { type: 'boolean' },
+    },
+    light: {
+      table: {
+        disable: true,
+      },
+    },
+    warn: {
+      control: { type: 'boolean' },
+    },
+    helperText: {
+      control: { type: 'text' },
+    },
+    invalidText: {
+      control: { type: 'text' },
+    },
+    label: {
+      control: { type: 'text' },
+    },
+    warnText: {
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'filterItems',
+        'translateWithId',
+        'titleText',
+        'open',
+        'selectedItems',
+        'itemToString',
+        'itemToElement',
+        'locale',
+        'items',
+        'id',
+        'initialSelectedItems',
+        'sortItems',
+        'compareItems',
+        'downshiftProps',
+      ],
+    },
+  },
 };
 
 const comboBoxItems = [
@@ -51,20 +111,35 @@ const comboBoxItems = [
   },
 ];
 
+const sharedArgs = {
+  size: 'md',
+  autoAlign: false,
+  type: 'default',
+  titleText: 'Multiselect title',
+  disabled: false,
+  hideLabel: false,
+  invalid: false,
+  warn: false,
+  helperText: 'This is helper text',
+  warnText: 'whoopsie!',
+  invalidText: 'whoopsie!',
+  label: 'Multiselect Label',
+  clearSelectionDescription: 'Total items selected: ',
+  useTitleInItem: false,
+  clearSelectionText: 'To clear selection, press Delete or Backspace,',
+};
 export const FloatingStyles = (args) => (
   <MultiSelect
-    label="Multiselect Label"
     id="carbon-multiselect-example"
-    titleText="Multiselect title"
-    helperText="This is helper text"
     items={comboBoxItems}
-    direction={args.direction}
     itemToString={(item) => (item ? item.text : '')}
     selectionFeedback="top-after-reopen"
+    {...args}
   />
 );
 
 FloatingStyles.args = {
+  ...sharedArgs,
   direction: 'bottom',
 };
 

packages/react/src/components/MultiSelect/MultiSelect.stories.js

@@ -106,7 +106,7 @@ export default {
     },
     useTitleInItem: {
       control: {
-        type: 'text',
+        type: 'boolean',
       },
     },
     clearSelectionText: {
@@ -188,10 +188,26 @@ const sharedArgs = {
   clearSelectionDescription: 'Total items selected: ',
   useTitleInItem: false,
   clearSelectionText: 'To clear selection, press Delete or Backspace,',
-  selectAll: false,
-  selectAllItemText: 'All options',
 };
 
+const filterableArgTypes = {
+  label: {
+    control: false,
+    table: {
+      disable: true,
+    },
+  },
+  placeholder: {
+    control: {
+      type: 'text',
+    },
+    description:
+      'Generic `placeholder` that will be used as the textual representation of what this field is for',
+    table: {
+      type: { summary: 'string' },
+    },
+  },
+};
 export const Default = (args) => {
   const items = [
     {
@@ -289,6 +305,7 @@ export const WithInitialSelectedItems = (args) => {
   );
 };
 
+WithInitialSelectedItems.args = { ...sharedArgs };
 export const Filterable = (args) => {
   const items = [
     {
@@ -354,7 +371,11 @@ export const FilterableWithSelectAll = (args) => {
   );
 };
 
+FilterableWithSelectAll.argTypes = {
+  ...filterableArgTypes,
+};
 Filterable.argTypes = {
+  ...filterableArgTypes,
   onChange: {
     action: 'onChange',
   },
@@ -381,6 +402,7 @@ export const WithLayerMultiSelect = (args) => (
     )}
   </WithLayer>
 );
+WithLayerMultiSelect.args = { ...sharedArgs };
 export const _FilterableWithLayer = (args) => (
   <WithLayer>
     {(layer) => (
@@ -399,6 +421,9 @@ export const _FilterableWithLayer = (args) => (
   </WithLayer>
 );
 
+_FilterableWithLayer.argTypes = {
+  ...filterableArgTypes,
+};
 export const _Controlled = (args) => {
   const [selectedItems, setSelectedItems] = useState(
     items.filter((item) => item.id === 'downshift-1-item-0')
@@ -442,6 +467,7 @@ export const _Controlled = (args) => {
   );
 };
 
+_Controlled.args = { ...sharedArgs };
 const itemsWithSelectAll = [
   {
     id: 'downshift-1-item-0',
@@ -544,6 +570,7 @@ export const withAILabel = (args) => (
   </div>
 );
 
+withAILabel.args = { ...sharedArgs };
 export const FilterableWithAILabel = (args) => (
   <div style={{ width: 400 }}>
     <FilterableMultiSelect
@@ -560,6 +587,9 @@ export const FilterableWithAILabel = (args) => (
   </div>
 );
 
+FilterableWithAILabel.argTypes = {
+  ...filterableArgTypes,
+};
 export const ExperimentalAutoAlign = (args) => {
   const ref = useRef();
   useEffect(() => {
@@ -597,6 +627,7 @@ ExperimentalAutoAlign.argTypes = {
   },
 };
 
+ExperimentalAutoAlign.args = { ...sharedArgs, autoAlign: true };
 export const withToggletipLabel = (args) => {
   return (
     <div>
@@ -634,7 +665,7 @@ export const withToggletipLabel = (args) => {
   );
 };
 
-export const SelectAllWithDynamicItems = () => {
+export const SelectAllWithDynamicItems = (args) => {
   const [label, setLabel] = useState('Choose options');
   const [items, setItems] = useState(itemsWithSelectAll);
 
@@ -676,6 +707,7 @@ export const SelectAllWithDynamicItems = () => {
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
         onChange={onChange}
+        {...args}
       />
       <Button onClick={addItems}>Add 2 items to the list</Button>
     </div>

packages/web-components/src/components/menu-button/__tests__/__snapshots__/menu-button-test.snap.js

@@ -6,12 +6,13 @@ snapshots['cds-menu-button should render and match snapshot'] =
   kind="primary"
   label="Actions"
   menu-alignment="bottom"
+  menu-background-token="layer"
   size="lg"
   tab-index="0"
 >
   <cds-menu
     size="lg"
-    style="inset-inline-start: 8px; inset-inline-end: initial; inset-block-start: 8px;"
+    style=""
   >
     <cds-menu-item
       label="First action"
@@ -44,12 +45,13 @@ snapshots[
   kind="primary"
   label="Test"
   menu-alignment="bottom"
+  menu-background-token="layer"
   size="lg"
   tab-index="0"
 >
   <cds-menu
     size="lg"
-    style="inset-inline-start: 8px; inset-inline-end: initial; inset-block-start: 8px;"
+    style=""
   >
     <cds-menu-item
       label="First action"
@@ -78,12 +80,13 @@ snapshots[
   kind="primary"
   label="Nested"
   menu-alignment="bottom"
+  menu-background-token="layer"
   size="lg"
   tab-index="0"
 >
   <cds-menu
     size="lg"
-    style="inset-inline-start: 8px; inset-inline-end: initial; inset-block-start: 8px;"
+    style=""
   >
     <cds-menu-item
       aria-expanded="true"
@@ -121,110 +124,3 @@ snapshots['cds-menu-button should support xs size'] = `<cds-button
 </slot>
 `;
 /* end snapshot cds-menu-button should support xs size */
-snapshots['cds-menu-button should render and match snapshot'] =
-  `<cds-menu-button
-  kind="primary"
-  label="Actions"
-  menu-alignment="bottom"
-  menu-background-token="layer"
-  size="lg"
-  tab-index="0"
->
-  <cds-menu
-    size="lg"
-    style="inset-inline-start: 8px; inset-inline-end: initial; inset-block-start: 8px;"
-  >
-    <cds-menu-item
-      label="First action"
-      role="menuitem"
-      tabindex="0"
-    >
-    </cds-menu-item>
-    <cds-menu-item
-      label="Second action"
-      role="menuitem"
-      tabindex="0"
-    >
-    </cds-menu-item>
-    <cds-menu-item
-      aria-disabled="true"
-      disabled=""
-      label="Third action"
-      role="menuitem"
-      tabindex="-1"
-    >
-    </cds-menu-item>
-  </cds-menu>
-</cds-menu-button>
-`;
-/* end snapshot cds-menu-button should render and match snapshot */
-
-snapshots[
-  'cds-menu-button Children/slots and special menu content Snapshot variants should render with divider and danger and match snapshot'
-] = `<cds-menu-button
-  kind="primary"
-  label="Test"
-  menu-alignment="bottom"
-  menu-background-token="layer"
-  size="lg"
-  tab-index="0"
->
-  <cds-menu
-    size="lg"
-    style="inset-inline-start: 8px; inset-inline-end: initial; inset-block-start: 8px;"
-  >
-    <cds-menu-item
-      label="First action"
-      role="menuitem"
-      tabindex="0"
-    >
-    </cds-menu-item>
-    <cds-menu-item-divider role="separator">
-    </cds-menu-item-divider>
-    <cds-menu-item
-      class="cds--menu-item--danger"
-      kind="danger"
-      label="Danger"
-      role="menuitem"
-      tabindex="0"
-    >
-    </cds-menu-item>
-  </cds-menu>
-</cds-menu-button>
-`;
-/* end snapshot cds-menu-button Children/slots and special menu content Snapshot variants should render with divider and danger and match snapshot */
-
-snapshots[
-  'cds-menu-button Children/slots and special menu content Snapshot variants should render with nested menu and match snapshot'
-] = `<cds-menu-button
-  kind="primary"
-  label="Nested"
-  menu-alignment="bottom"
-  menu-background-token="layer"
-  size="lg"
-  tab-index="0"
->
-  <cds-menu
-    size="lg"
-    style="inset-inline-start: 8px; inset-inline-end: initial; inset-block-start: 8px;"
-  >
-    <cds-menu-item
-      aria-expanded="true"
-      aria-haspopup="true"
-      label="Export as"
-      role="menuitem"
-      tabindex="0"
-    >
-      <cds-menu-item-group slot="submenu">
-        <cds-menu-item
-          label="PDF"
-          role="menuitem"
-          tabindex="0"
-        >
-        </cds-menu-item>
-      </cds-menu-item-group>
-    </cds-menu-item>
-  </cds-menu>
-</cds-menu-button>
-`;
-/* end snapshot cds-menu-button Children/slots and special menu content Snapshot variants should render with nested menu and match snapshot */