fix(listbox): conditionally apply new size prop options, update story… (

#10640) * fix(listbox): conditionally apply new size prop options, update storybook * fix(listbox): remove unused xl styles Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 9, 2022 · aee822d · aee822d
1 parent b9c9920
commit aee822d
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 45 deletions.
diff --git a/packages/react/src/components/ComboBox/next/ComboBox.stories.js b/packages/react/src/components/ComboBox/next/ComboBox.stories.js
@@ -41,9 +41,15 @@ const items = [
 export default {
   title: 'Components/ComboBox',
   component: ComboBox,
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+  },
 };
 
-export const Combobox = () => (
+export const Combobox = (args) => (
   <div style={{ width: 300 }}>
     <ComboBox
       onChange={() => {}}
@@ -53,11 +59,12 @@ export const Combobox = () => (
       placeholder="Filter..."
       titleText="ComboBox title"
       helperText="Combobox helper text"
+      {...args}
     />
   </div>
 );
 
-export const WithLayer = () => (
+export const WithLayer = (args) => (
   <div style={{ width: 300 }}>
     <ComboBox
       onChange={() => {}}
@@ -67,6 +74,7 @@ export const WithLayer = () => (
       placeholder="Filter..."
       titleText="First Layer"
       helperText="Combobox helper text"
+      {...args}
     />
     <Layer>
       <ComboBox
@@ -77,6 +85,7 @@ export const WithLayer = () => (
         placeholder="Filter..."
         titleText="Second Layer"
         helperText="Combobox helper text"
+        {...args}
       />
       <Layer>
         <ComboBox
@@ -87,6 +96,7 @@ export const WithLayer = () => (
           placeholder="Filter..."
           titleText="Third Layer"
           helperText="Combobox helper text"
+          {...args}
         />
       </Layer>
     </Layer>

diff --git a/packages/react/src/components/Dropdown/next/Dropdown.stories.js b/packages/react/src/components/Dropdown/next/Dropdown.stories.js
@@ -15,6 +15,12 @@ export default {
   subcomponents: {
     DropdownSkeleton,
   },
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+  },
 };
 
 const items = [
@@ -45,7 +51,7 @@ const items = [
   },
 ];
 
-export const Default = () => (
+export const Default = (args) => (
   <div style={{ width: 400 }}>
     <Dropdown
       id="default"
@@ -54,11 +60,12 @@ export const Default = () => (
       label="Dropdown menu options"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
+      {...args}
     />
   </div>
 );
 
-export const Inline = () => (
+export const Inline = (args) => (
   <div style={{ width: 600 }}>
     <Dropdown
       id="inline"
@@ -67,11 +74,12 @@ export const Inline = () => (
       type="inline"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
+      {...args}
     />
   </div>
 );
 
-export const WithLayer = () => (
+export const WithLayer = (args) => (
   <div style={{ width: 400 }}>
     <Dropdown
       id="default"
@@ -80,6 +88,7 @@ export const WithLayer = () => (
       label="Dropdown menu options"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
+      {...args}
     />
     <Layer>
       <Dropdown
@@ -89,6 +98,7 @@ export const WithLayer = () => (
         label="Dropdown menu options"
         items={items}
         itemToString={(item) => (item ? item.text : '')}
+        {...args}
       />
       <Layer>
         <Dropdown
@@ -98,13 +108,14 @@ export const WithLayer = () => (
           label="Dropdown menu options"
           items={items}
           itemToString={(item) => (item ? item.text : '')}
+          {...args}
         />
       </Layer>
     </Layer>
   </div>
 );
 
-export const InlineWithLayer = () => (
+export const InlineWithLayer = (args) => (
   <div style={{ width: 600 }}>
     <Dropdown
       id="inline"
@@ -113,6 +124,7 @@ export const InlineWithLayer = () => (
       type="inline"
       items={items}
       itemToString={(item) => (item ? item.text : '')}
+      {...args}
     />
     <Layer>
       <Dropdown
@@ -122,6 +134,7 @@ export const InlineWithLayer = () => (
         type="inline"
         items={items}
         itemToString={(item) => (item ? item.text : '')}
+        {...args}
       />
       <Layer>
         <Dropdown
@@ -131,14 +144,15 @@ export const InlineWithLayer = () => (
           type="inline"
           items={items}
           itemToString={(item) => (item ? item.text : '')}
+          {...args}
         />
       </Layer>
     </Layer>
   </div>
 );
 
-export const Skeleton = () => (
+export const Skeleton = (args) => (
   <div style={{ width: 300 }}>
-    <DropdownSkeleton />
+    <DropdownSkeleton {...args} />
   </div>
 );
diff --git a/packages/react/src/components/ListBox/ListBoxPropTypes.js b/packages/react/src/components/ListBox/ListBoxPropTypes.js
@@ -6,7 +6,9 @@
  */
 
 import PropTypes from 'prop-types';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 export const ListBoxType = PropTypes.oneOf(['default', 'inline']);
-// TODO V11: remove xl
-export const ListBoxSize = PropTypes.oneOf(['sm', 'md', 'lg', 'xl']);
+export const ListBoxSize = FeatureFlags.enabled('enable-v11-release')
+  ? PropTypes.oneOf(['sm', 'md', 'lg'])
+  : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']);
diff --git a/packages/react/src/components/MultiSelect/next/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/next/MultiSelect.stories.js
@@ -16,6 +16,12 @@ export default {
   subcomponents: {
     'MultiSelect.Filterable': MultiSelect.Filterable,
   },
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' },
+    },
+  },
 };
 
 const items = [
@@ -47,7 +53,7 @@ const items = [
   },
 ];
 
-export const Default = () => {
+export const Default = (args) => {
   return (
     <div style={{ width: 300 }}>
       <MultiSelect
@@ -58,12 +64,13 @@ export const Default = () => {
         items={items}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
+        {...args}
       />
     </div>
   );
 };
 
-export const WithInitialSelectedItems = () => {
+export const WithInitialSelectedItems = (args) => {
   return (
     <div style={{ width: 300 }}>
       <MultiSelect
@@ -74,12 +81,13 @@ export const WithInitialSelectedItems = () => {
         itemToString={(item) => (item ? item.text : '')}
         initialSelectedItems={[items[0], items[1]]}
         selectionFeedback="top-after-reopen"
+        {...args}
       />
     </div>
   );
 };
 
-export const _Filterable = () => {
+export const _Filterable = (args) => {
   return (
     <div style={{ width: 300 }}>
       <FilterableMultiSelect
@@ -89,12 +97,13 @@ export const _Filterable = () => {
         items={items}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
+        {...args}
       />
     </div>
   );
 };
 
-export const WithLayer = () => {
+export const WithLayer = (args) => {
   return (
     <div style={{ width: 300 }}>
       <MultiSelect
@@ -105,6 +114,7 @@ export const WithLayer = () => {
         items={items}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
+        {...args}
       />
       <Layer>
         <MultiSelect
@@ -115,6 +125,7 @@ export const WithLayer = () => {
           items={items}
           itemToString={(item) => (item ? item.text : '')}
           selectionFeedback="top-after-reopen"
+          {...args}
         />
         <Layer>
           <MultiSelect
@@ -125,14 +136,15 @@ export const WithLayer = () => {
             items={items}
             itemToString={(item) => (item ? item.text : '')}
             selectionFeedback="top-after-reopen"
+            {...args}
           />
         </Layer>
       </Layer>
     </div>
   );
 };
 
-export const _FilterableWithLayer = () => {
+export const _FilterableWithLayer = (args) => {
   return (
     <div style={{ width: 300 }}>
       <FilterableMultiSelect
@@ -142,6 +154,7 @@ export const _FilterableWithLayer = () => {
         items={items}
         itemToString={(item) => (item ? item.text : '')}
         selectionFeedback="top-after-reopen"
+        {...args}
       />
       <Layer>
         <FilterableMultiSelect
@@ -151,6 +164,7 @@ export const _FilterableWithLayer = () => {
           items={items}
           itemToString={(item) => (item ? item.text : '')}
           selectionFeedback="top-after-reopen"
+          {...args}
         />
         <Layer>
           <FilterableMultiSelect
@@ -160,6 +174,7 @@ export const _FilterableWithLayer = () => {
             items={items}
             itemToString={(item) => (item ? item.text : '')}
             selectionFeedback="top-after-reopen"
+            {...args}
           />
         </Layer>
       </Layer>

diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss
@@ -70,15 +70,11 @@
     text-align: left;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--dropdown--xl,
   .#{$prefix}--dropdown--lg {
     height: rem(48px);
     max-height: rem(48px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--dropdown--xl .#{$prefix}--dropdown__arrow,
   .#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow {
     top: rem(16px);
   }
@@ -277,12 +273,6 @@
     padding-bottom: rem(7px);
   }
 
-  .#{$prefix}--dropdown--xl .#{$prefix}--dropdown-link {
-    height: rem(48px);
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
-  }
-
   .#{$prefix}--dropdown--focused,
   .#{$prefix}--dropdown-link:focus {
     @include focus-outline('outline');
@@ -329,12 +319,6 @@
     transform: rotate(-180deg);
   }
 
-  .#{$prefix}--dropdown--open.#{$prefix}--dropdown--xl
-    .#{$prefix}--dropdown-list {
-    // 48px item height * 5.5 items shown
-    max-height: rem(264px);
-  }
-
   .#{$prefix}--dropdown--open.#{$prefix}--dropdown--sm
     .#{$prefix}--dropdown-list {
     // 32px item height * 5.5 items shown

diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
@@ -92,8 +92,6 @@ $list-box-menu-width: rem(300px);
     }
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl,
   .#{$prefix}--list-box--lg {
     height: rem(48px);
     max-height: rem(48px);
@@ -524,9 +522,6 @@ $list-box-menu-width: rem(300px);
     max-height: rem(220px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
-    .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
     .#{$prefix}--list-box__menu {
     // 48px item height * 5.5 items shown
@@ -568,8 +563,6 @@ $list-box-menu-width: rem(300px);
     height: rem(32px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item,
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
     height: rem(48px);
   }
@@ -653,8 +646,6 @@ $list-box-menu-width: rem(300px);
     padding-bottom: rem(7px);
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option,
   .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
     height: rem(48px);
     padding-top: rem(15px);
@@ -803,11 +794,6 @@ $list-box-menu-width: rem(300px);
     bottom: 2rem;
   }
 
-  // TODO V11: Remove xl selector
-  .#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
-    .#{$prefix}--list-box__menu,
-  .#{$prefix}--list-box--up.#{$prefix}--list-box--xl
-    .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
     .#{$prefix}--list-box__menu,
   .#{$prefix}--list-box--up.#{$prefix}--list-box--lg