feat(list-box): introduce size variants (carbon-design-system#4731)

Refs carbon-design-system#3513.
asudoh · Dec 9, 2019 · 0723836 · 0723836
1 parent e90f5d4
commit 0723836
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 9 deletions.
diff --git a/packages/components/src/components/dropdown/_dropdown.scss b/packages/components/src/components/dropdown/_dropdown.scss
@@ -66,6 +66,22 @@
     }
   }
 
+  .#{$prefix}--dropdown--xl {
+    height: rem(48px);
+  }
+
+  .#{$prefix}--dropdown--xl .#{$prefix}--dropdown__arrow {
+    top: rem(16px);
+  }
+
+  .#{$prefix}--dropdown--sm {
+    height: rem(32px);
+  }
+
+  .#{$prefix}--dropdown--sm .#{$prefix}--dropdown__arrow {
+    top: rem(8px);
+  }
+
   .#{$prefix}--dropdown--open {
     border-bottom-color: $ui-03;
   }
@@ -138,9 +154,7 @@
   .#{$prefix}--dropdown-text {
     @include type-style('body-short-01');
     display: block;
-    height: rem(40px);
-    padding-top: $carbon--spacing-04;
-    padding-bottom: $carbon--spacing-04;
+    height: calc(100% + 1px); // Account for the border in `.bx--dropdown`
     padding-left: $carbon--spacing-05;
     padding-right: rem(42px); // 2rem + SVG width
     white-space: nowrap;

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -86,6 +86,16 @@ $list-box-menu-width: rem(300px);
     }
   }
 
+  .#{$prefix}--list-box--xl {
+    height: rem(48px);
+    max-height: rem(48px);
+  }
+
+  .#{$prefix}--list-box--sm {
+    height: rem(32px);
+    max-height: rem(32px);
+  }
+
   .#{$prefix}--list-box--expanded {
     border-bottom-color: $ui-03;
   }
@@ -105,9 +115,10 @@ $list-box-menu-width: rem(300px);
   // invalid states
   .#{$prefix}--list-box__invalid-icon {
     position: absolute;
-    top: $carbon--spacing-04;
+    top: 50%;
     right: $carbon--spacing-08;
     fill: $support-01;
+    transform: translateY(-50%);
   }
 
   .#{$prefix}--list-box--inline .#{$prefix}--list-box__invalid-icon {
@@ -247,7 +258,7 @@ $list-box-menu-width: rem(300px);
     display: inline-flex;
     align-items: center;
     vertical-align: top;
-    height: rem(40px);
+    height: calc(100% + 1px); // Account for the border in `.bx--list-box`
     padding: 0 $carbon--spacing-09 0 $carbon--spacing-05;
     cursor: pointer;
     outline: none;

diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import ComboBox from '../ComboBox';
 import Button from '../Button';
 import WithState from '../../tools/withState';
@@ -38,6 +38,12 @@ const items = [
   },
 ];
 
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Regular size (lg)': '',
+  'Small size (sm)': 'sm',
+};
+
 const props = () => ({
   id: text('Combobox ID (id)', 'carbon-combobox-example'),
   placeholder: text('Placeholder text (placeholder)', 'Filter...'),
@@ -47,6 +53,7 @@ const props = () => ({
   disabled: boolean('Disabled (disabled)', false),
   invalid: boolean('Invalid (invalid)', false),
   invalidText: text('Invalid text (invalidText)', 'A valid value is required'),
+  size: select('Field size (size)', sizes, '') || undefined,
   onChange: action('onChange'),
 });
 

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -154,6 +154,11 @@ export default class ComboBox extends React.Component {
      */
     type: ListBoxPropTypes.ListBoxType,
 
+    /**
+     * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+     */
+    size: ListBoxPropTypes.ListBoxSize,
+
     /**
      * Callback function to notify consumer when the text input changes.
      * This provides support to change available items based on the text.
@@ -262,6 +267,7 @@ export default class ComboBox extends React.Component {
       invalidText,
       light,
       type, // eslint-disable-line no-unused-vars
+      size,
       shouldFilterItem, // eslint-disable-line no-unused-vars
       onChange, // eslint-disable-line no-unused-vars
       onInputChange, // eslint-disable-line no-unused-vars
@@ -321,6 +327,7 @@ export default class ComboBox extends React.Component {
             invalidText={invalidText}
             isOpen={isOpen}
             light={light}
+            size={size}
             {...getRootProps({ refKey: 'innerRef' })}>
             <ListBox.Field
               id={id}

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -39,9 +39,16 @@ const types = {
   'Inline (inline)': 'inline',
 };
 
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Regular size (lg)': '',
+  'Small size (sm)': 'sm',
+};
+
 const props = () => ({
   id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
   type: select('Dropdown type (type)', types, 'default'),
+  size: select('Field size (size)', sizes, '') || undefined,
   label: text('Label (label)', 'Dropdown menu options'),
   ariaLabel: text('Aria Label (ariaLabel)', 'Dropdown'),
   disabled: boolean('Disabled (disabled)', false),

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -109,6 +109,11 @@ export default class Dropdown extends React.Component {
      */
     type: ListBoxPropTypes.ListBoxType,
 
+    /**
+     * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+     */
+    size: ListBoxPropTypes.ListBoxSize,
+
     /**
      * In the case you want to control the dropdown selection entirely.
      */
@@ -167,6 +172,7 @@ export default class Dropdown extends React.Component {
       itemToString,
       itemToElement,
       type,
+      size,
       initialSelectedItem,
       selectedItem,
       id,
@@ -240,6 +246,7 @@ export default class Dropdown extends React.Component {
           }) => (
             <ListBox
               type={type}
+              size={size}
               id={dropdownId}
               aria-label={ariaLabel}
               className={className({ isOpen })}

diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js
@@ -9,7 +9,7 @@ import cx from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
-import { ListBoxType } from './ListBoxPropTypes';
+import { ListBoxType, ListBoxSize } from './ListBoxPropTypes';
 
 const { prefix } = settings;
 
@@ -34,6 +34,7 @@ const ListBox = ({
   disabled,
   innerRef,
   type,
+  size,
   invalid,
   invalidText,
   light,
@@ -43,6 +44,7 @@ const ListBox = ({
   const className = cx({
     [containerClassName]: !!containerClassName,
     [`${prefix}--list-box`]: true,
+    [`${prefix}--list-box--${size}`]: size,
     [`${prefix}--list-box--inline`]: type === 'inline',
     [`${prefix}--list-box--disabled`]: disabled,
     [`${prefix}--list-box--light`]: light,
@@ -95,6 +97,11 @@ ListBox.propTypes = {
    * `inline` as an option.
    */
   type: ListBoxType.isRequired,
+
+  /**
+   * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+   */
+  size: ListBoxSize,
 };
 
 ListBox.defaultProps = {

diff --git a/packages/react/src/components/ListBox/ListBoxPropTypes.js b/packages/react/src/components/ListBox/ListBoxPropTypes.js
@@ -8,3 +8,4 @@
 import PropTypes from 'prop-types';
 
 export const ListBoxType = PropTypes.oneOf(['default', 'inline']);
+export const ListBoxSize = PropTypes.oneOf(['sm', 'lg', 'xl']);
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -12,7 +12,7 @@ import Downshift from 'downshift';
 import isEqual from 'lodash.isequal';
 import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
-import ListBox from '../ListBox';
+import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import Checkbox from '../Checkbox';
 import Selection from '../../internal/Selection';
 import { sortingPropTypes } from './MultiSelectPropTypes';
@@ -65,6 +65,11 @@ export default class FilterableMultiSelect extends React.Component {
      */
     locale: PropTypes.string,
 
+    /**
+     * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+     */
+    size: ListBoxPropTypes.ListBoxSize,
+
     /**
      * `onChange` is a utility for this controlled component to communicate to a
      * consuming component what kind of internal state changes are occuring.
@@ -259,6 +264,7 @@ export default class FilterableMultiSelect extends React.Component {
       initialSelectedItems,
       id,
       locale,
+      size,
       placeholder,
       sortItems,
       compareItems,
@@ -345,6 +351,7 @@ export default class FilterableMultiSelect extends React.Component {
                   invalid={invalid}
                   invalidText={invalidText}
                   isOpen={isOpen}
+                  size={size}
                   {...getRootProps({ refKey: 'innerRef' })}>
                   <ListBox.Field
                     id={id}

diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -51,6 +51,12 @@ const types = {
   'Inline (inline)': 'inline',
 };
 
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Regular size (lg)': '',
+  'Small size (sm)': 'sm',
+};
+
 const props = () => ({
   id: text('MultiSelect ID (id)', 'carbon-multiselect-example'),
   titleText: text('Title (titleText)', 'Multiselect title'),
@@ -63,6 +69,7 @@ const props = () => ({
   light: boolean('Light variant (light)', false),
   useTitleInItem: boolean('Show tooltip on hover', false),
   type: select('UI type (Only for `<MultiSelect>`) (type)', types, 'default'),
+  size: select('Field size (size)', sizes, '') || undefined,
   label: text('Label (label)', defaultLabel),
   invalid: boolean('Show form validation UI (invalid)', false),
   invalidText: text(

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -12,7 +12,7 @@ import Downshift from 'downshift';
 import isEqual from 'lodash.isequal';
 import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
-import ListBox from '../ListBox';
+import ListBox, { PropTypes as ListBoxPropTypes } from '../ListBox';
 import Checkbox from '../Checkbox';
 import Selection from '../../internal/Selection';
 import { sortingPropTypes } from './MultiSelectPropTypes';
@@ -78,6 +78,11 @@ export default class MultiSelect extends React.Component {
      */
     type: PropTypes.oneOf(['default', 'inline']),
 
+    /**
+     * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+     */
+    size: ListBoxPropTypes.ListBoxSize,
+
     /**
      * Specify title to show title on hover
      */
@@ -222,6 +227,7 @@ export default class MultiSelect extends React.Component {
       helperText,
       label,
       type,
+      size,
       disabled,
       initialSelectedItems,
       sortItems,
@@ -298,6 +304,7 @@ export default class MultiSelect extends React.Component {
                 <ListBox
                   id={id}
                   type={type}
+                  size={size}
                   className={className}
                   disabled={disabled}
                   light={light}