fix(components): normalize size props (#5481)

* fix(components): begin normalizing default size props * fix(components): normalize size prop across components * docs(components): rename large to default size Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Feb 28, 2020 · 5d8392d · 5d8392d
1 parent 827d959
commit 5d8392d
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 19 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -39,7 +39,7 @@ const items = [
 
 const sizes = {
   'Extra large size (xl)': 'xl',
-  'Regular size (lg)': '',
+  'Default size': undefined,
   'Small size (sm)': 'sm',
 };
 
@@ -52,7 +52,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,
+  size: select('Field size (size)', sizes, undefined) || undefined,
   onChange: action('onChange'),
 });
 

diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -51,14 +51,14 @@ const types = {
 
 const sizes = {
   'Extra large size (xl)': 'xl',
-  'Regular size (lg)': '',
+  'Default size': undefined,
   '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,
+  size: select('Field size (size)', sizes, undefined) || 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
@@ -107,7 +107,7 @@ 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.
+     * Specify the size of the ListBox. Currently supports either `sm` or `xl` as an option.
      */
     size: ListBoxPropTypes.ListBoxSize,
 

diff --git a/packages/react/src/components/ListBox/ListBox.js b/packages/react/src/components/ListBox/ListBox.js
@@ -97,7 +97,7 @@ ListBox.propTypes = {
   type: ListBoxType.isRequired,
 
   /**
-   * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+   * Specify the size of the ListBox. Currently supports either `sm` or `xl` as an option.
    */
   size: ListBoxSize,
 };

diff --git a/packages/react/src/components/ListBox/ListBoxPropTypes.js b/packages/react/src/components/ListBox/ListBoxPropTypes.js
@@ -8,4 +8,4 @@
 import PropTypes from 'prop-types';
 
 export const ListBoxType = PropTypes.oneOf(['default', 'inline']);
-export const ListBoxSize = PropTypes.oneOf(['sm', 'lg', 'xl']);
+export const ListBoxSize = PropTypes.oneOf(['sm', 'xl']);
diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -53,7 +53,7 @@ const types = {
 
 const sizes = {
   'Extra large size (xl)': 'xl',
-  'Regular size (lg)': '',
+  'Default size': undefined,
   'Small size (sm)': 'sm',
 };
 
@@ -65,7 +65,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,
+  size: select('Field size (size)', sizes, undefined) || undefined,
   label: text('Label (label)', defaultLabel),
   invalid: boolean('Show form validation UI (invalid)', false),
   invalidText: text(

diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js
@@ -17,7 +17,7 @@ import SelectSkeleton from '../Select/Select.Skeleton';
 
 const sizes = {
   'Extra large size (xl)': 'xl',
-  'Regular size (lg)': 'lg',
+  'Default size': undefined,
   'Small size (sm)': 'sm',
 };
 
@@ -29,7 +29,7 @@ const props = {
       'Put control in-line with label (inline in <Select>)',
       false
     ),
-    size: select('Field size (size)', sizes, 'lg'),
+    size: select('Field size (size)', sizes, undefined) || undefined,
     disabled: boolean('Disabled (disabled in <Select>)', false),
     hideLabel: boolean('No label (hideLabel in <Select>)', false),
     invalid: boolean('Show form validation UI (invalid in <Select>)', false),

diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
@@ -209,9 +209,9 @@ Select.propTypes = {
   noLabel: PropTypes.bool,
 
   /**
-   * Specify the size of the Text Input. Currently supports either `sm`, `lg` (default), or `xl` as an option.
+   * Specify the size of the Select Input. Currently supports either `sm` or `xl` as an option.
    */
-  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+  size: PropTypes.oneOf(['sm', 'xl']),
 };
 
 Select.defaultProps = {
@@ -222,7 +222,6 @@ Select.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
-  size: 'lg',
 };
 
 export default Select;
diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
@@ -21,7 +21,7 @@ const types = {
 
 const sizes = {
   'Extra large size (xl)': 'xl',
-  'Regular size (lg)': 'lg',
+  'Default size': undefined,
   'Small size (sm)': 'sm',
 };
 
@@ -51,7 +51,7 @@ const props = {
       'Default value (defaultValue)',
       'This is not a default value'
     ),
-    size: select('Field size (size)', sizes, 'lg'),
+    size: select('Field size (size)', sizes, undefined) || undefined,
     labelText: text('Label text (labelText)', 'Text Input label'),
     placeholder: text('Placeholder text (placeholder)', 'Placeholder text'),
     light: boolean('Light variant (light)', false),

diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
@@ -146,9 +146,9 @@ TextInput.propTypes = {
   placeholder: PropTypes.string,
 
   /**
-   * Specify the size of the Text Input. Currently supports either `sm`, `lg` (default), or `xl` as an option.
+   * Specify the size of the Text Input. Currently supports either `sm` or `xl` as an option.
    */
-  size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+  size: PropTypes.oneOf(['sm', 'xl']),
 
   /**
    * Specify the type of the <input>
@@ -195,7 +195,6 @@ TextInput.defaultProps = {
   invalidText: '',
   helperText: '',
   light: false,
-  size: 'lg',
 };
 
 export default TextInput;