diff --git a/packages/react/src/components/ComboBox/next/ComboBox.stories.js b/packages/react/src/components/ComboBox/next/ComboBox.stories.js index e4bf0d88832f..3453c8f0e131 100644 --- 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) => (
{}} @@ -53,11 +59,12 @@ export const Combobox = () => ( placeholder="Filter..." titleText="ComboBox title" helperText="Combobox helper text" + {...args} />
); -export const WithLayer = () => ( +export const WithLayer = (args) => (
{}} @@ -67,6 +74,7 @@ export const WithLayer = () => ( placeholder="Filter..." titleText="First Layer" helperText="Combobox helper text" + {...args} /> ( placeholder="Filter..." titleText="Second Layer" helperText="Combobox helper text" + {...args} /> ( placeholder="Filter..." titleText="Third Layer" helperText="Combobox helper text" + {...args} /> diff --git a/packages/react/src/components/Dropdown/next/Dropdown.stories.js b/packages/react/src/components/Dropdown/next/Dropdown.stories.js index 210917102ed4..e3d3ae38b9a0 100644 --- 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) => (
( label="Dropdown menu options" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} />
); -export const Inline = () => ( +export const Inline = (args) => (
( type="inline" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} />
); -export const WithLayer = () => ( +export const WithLayer = (args) => (
( label="Dropdown menu options" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} /> ( label="Dropdown menu options" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} /> ( label="Dropdown menu options" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} />
); -export const InlineWithLayer = () => ( +export const InlineWithLayer = (args) => (
( type="inline" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} /> ( type="inline" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} /> ( type="inline" items={items} itemToString={(item) => (item ? item.text : '')} + {...args} />
); -export const Skeleton = () => ( +export const Skeleton = (args) => (
- +
); diff --git a/packages/react/src/components/ListBox/ListBoxPropTypes.js b/packages/react/src/components/ListBox/ListBoxPropTypes.js index f80a15d12b17..f85f453874fc 100644 --- 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 index 7838edd5be5a..c146d70daa7e 100644 --- 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 (
{ items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} />
); }; -export const WithInitialSelectedItems = () => { +export const WithInitialSelectedItems = (args) => { return (
{ itemToString={(item) => (item ? item.text : '')} initialSelectedItems={[items[0], items[1]]} selectionFeedback="top-after-reopen" + {...args} />
); }; -export const _Filterable = () => { +export const _Filterable = (args) => { return (
{ items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} />
); }; -export const WithLayer = () => { +export const WithLayer = (args) => { return (
{ items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} /> { items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} /> { items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} /> @@ -132,7 +144,7 @@ export const WithLayer = () => { ); }; -export const _FilterableWithLayer = () => { +export const _FilterableWithLayer = (args) => { return (
{ items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} /> { items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} /> { items={items} itemToString={(item) => (item ? item.text : '')} selectionFeedback="top-after-reopen" + {...args} /> diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss index 197f5e9513ce..b1697a954e29 100644 --- 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 index 07173e964092..a5dbb1b4cd51 100644 --- 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