From fb6429fd48b16aa3799a5fd1b8498f0d5e667cac Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 3 Mar 2020 13:13:27 +0100 Subject: [PATCH 1/4] feat(date-picker): add size variants (#5460) * feat(date-picker): add size variants * fix(date-picker): update proptype definition * fix(date-pickerr): remove default prop value * docs(date-picker): use undefined instead of empty string * docs(components): rename large to default size --- .../src/components/date-picker/_date-picker.scss | 9 +++++++++ .../src/components/DatePicker/DatePicker-story.js | 7 +++++++ .../components/DatePickerInput/DatePickerInput.js | 14 ++++++++++++-- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/date-picker/_date-picker.scss b/packages/components/src/components/date-picker/_date-picker.scss index e85b1fc1dab1..92c5a3a2a009 100644 --- a/packages/components/src/components/date-picker/_date-picker.scss +++ b/packages/components/src/components/date-picker/_date-picker.scss @@ -119,6 +119,15 @@ } } + // Size variant styles + .#{$prefix}--date-picker__input--xl { + height: rem(48px); + } + + .#{$prefix}--date-picker__input--sm { + height: rem(32px); + } + .#{$prefix}--date-picker__icon { position: absolute; right: 1rem; diff --git a/packages/react/src/components/DatePicker/DatePicker-story.js b/packages/react/src/components/DatePicker/DatePicker-story.js index 75d9f4ff83b3..17634194a4d0 100644 --- a/packages/react/src/components/DatePicker/DatePicker-story.js +++ b/packages/react/src/components/DatePicker/DatePicker-story.js @@ -26,6 +26,12 @@ const patterns = { 'Regular (d{1,2}/d{1,2}/d{4})': '\\d{1,2}/\\d{1,2}/\\d{4}', }; +const sizes = { + 'Extra large size (xl)': 'xl', + 'Default size': undefined, + 'Small size (sm)': 'sm', +}; + const props = { datePicker: () => ({ id: 'date-picker', @@ -36,6 +42,7 @@ const props = { datePickerInput: () => ({ id: 'date-picker-input-id', className: 'some-class', + size: select('Field size (size)', sizes, undefined) || undefined, labelText: text( 'Label text (labelText in )', 'Date Picker label' diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.js b/packages/react/src/components/DatePickerInput/DatePickerInput.js index e9bcc78ad2aa..c6025c820fcb 100644 --- a/packages/react/src/components/DatePickerInput/DatePickerInput.js +++ b/packages/react/src/components/DatePickerInput/DatePickerInput.js @@ -31,6 +31,11 @@ export default class DatePickerInput extends Component { */ labelText: PropTypes.node.isRequired, + /** + * Specify the size of the Date Picker Input. Currently supports either `sm` or `xl` as an option. + */ + size: PropTypes.oneOf(['sm', 'xl']), + /** * Provide a regular expression that the input value must match */ @@ -99,6 +104,7 @@ export default class DatePickerInput extends Component { pattern, iconDescription, openCalendar, + size, ...other } = this.props; @@ -124,6 +130,10 @@ export default class DatePickerInput extends Component { [`${prefix}--label--disabled`]: disabled, }); + const inputClasses = classNames(`${prefix}--date-picker__input`, { + [`${prefix}--date-picker__input--${size}`]: size, + }); + const datePickerIcon = (() => { if (datePickerType === 'simple') { return; @@ -162,7 +172,7 @@ export default class DatePickerInput extends Component { this.input = input; }} data-invalid - className={`${prefix}--date-picker__input`} + className={inputClasses} /> ) : ( ); From c44b4e64d5f57912bad52e457464303a7d0745d1 Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Tue, 3 Mar 2020 12:24:23 +0000 Subject: [PATCH 2/4] chore(project): sync generated files --- packages/components/docs/sass.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index a5191dcb8a17..71eb1ff037ec 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -16068,6 +16068,15 @@ Date picker styles } } + // Size variant styles + .#{$prefix}--date-picker__input--xl { + height: rem(48px); + } + + .#{$prefix}--date-picker__input--sm { + height: rem(32px); + } + .#{$prefix}--date-picker__icon { position: absolute; right: 1rem; From d68e6d2aaf3238e0facf5523123ca84c4412a612 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 3 Mar 2020 14:13:54 +0100 Subject: [PATCH 3/4] feat(number-input): add size variants (#5459) * feat(number-input): add size variants * fix(number-input): update disabled styles * docs(number-input): use undefined instead of empty string * docs(components): rename large to default size --- .../number-input/_number-input.scss | 46 +++++++++++++++++++ .../NumberInput/NumberInput-story.js | 8 ++++ .../src/components/NumberInput/NumberInput.js | 8 +++- 3 files changed, 61 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss index 632df88bb93c..de70c36f47c4 100644 --- a/packages/components/src/components/number-input/_number-input.scss +++ b/packages/components/src/components/number-input/_number-input.scss @@ -72,6 +72,7 @@ cursor: not-allowed; background-color: $disabled-background-color; color: $disabled; + border-bottom-color: transparent; } .#{$prefix}--number__input-wrapper { @@ -220,6 +221,51 @@ } } + // Size Variant styles + .#{$prefix}--number--xl input[type='number'] { + height: rem(48px); + } + + .#{$prefix}--number--xl .#{$prefix}--number__control-btn { + height: rem(24px); + } + + .#{$prefix}--number--xl.#{$prefix}--number--mobile + .#{$prefix}--number__control-btn { + height: rem(48px); + width: rem(48px); + } + + .#{$prefix}--number--xl .#{$prefix}--number__control-btn.up-icon svg { + top: rem(6.6px); // Needed to maintain arrow spacing between input sizes. + } + + .#{$prefix}--number--xl .#{$prefix}--number__control-btn.down-icon svg { + top: rem(-6.6px); // Needed to maintain arrow spacing between input sizes. + } + + .#{$prefix}--number--sm input[type='number'] { + height: rem(32px); + } + + .#{$prefix}--number--sm .#{$prefix}--number__control-btn { + height: rem(16px); + } + + .#{$prefix}--number--sm.#{$prefix}--number--mobile + .#{$prefix}--number__control-btn { + height: rem(32px); + width: rem(32px); + } + + .#{$prefix}--number--sm .#{$prefix}--number__control-btn.up-icon svg { + top: rem(3.4px); // Needed to maintain arrow spacing between input sizes. + } + + .#{$prefix}--number--sm .#{$prefix}--number__control-btn.down-icon svg { + top: rem(-3.4px); // Needed to maintain arrow spacing between input sizes. + } + //No label positioning adjustment .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text { margin-top: 0; diff --git a/packages/react/src/components/NumberInput/NumberInput-story.js b/packages/react/src/components/NumberInput/NumberInput-story.js index ed8a74a91b11..b7244b087e04 100644 --- a/packages/react/src/components/NumberInput/NumberInput-story.js +++ b/packages/react/src/components/NumberInput/NumberInput-story.js @@ -15,10 +15,17 @@ import { number, text, object, + select, } from '@storybook/addon-knobs'; import NumberInput from '../NumberInput'; import NumberInputSkeleton from '../NumberInput/NumberInput.Skeleton'; +const sizes = { + 'Extra large size (xl)': 'xl', + 'Default size': undefined, + 'Small size (sm)': 'sm', +}; + const props = () => ({ className: 'some-class', id: 'tj-input', @@ -28,6 +35,7 @@ const props = () => ({ max: number('Maximum value (max)', 100), value: number('Value (value)', 50), step: number('Step of up/down arrow (step)', 10), + size: select('Field size (size)', sizes, undefined) || undefined, disabled: boolean('Disabled (disabled)', false), readOnly: boolean('Read only (readOnly)', false), invalid: boolean('Show form validation UI (invalid)', false), diff --git a/packages/react/src/components/NumberInput/NumberInput.js b/packages/react/src/components/NumberInput/NumberInput.js index 9b49d24861f8..d765dff89ddb 100644 --- a/packages/react/src/components/NumberInput/NumberInput.js +++ b/packages/react/src/components/NumberInput/NumberInput.js @@ -139,6 +139,10 @@ class NumberInput extends Component { * `true` to use the mobile variant. */ isMobile: PropTypes.bool, + /** + * Specify the size of the Number Input. Currently supports either `sm` or `xl` as an option. + */ + size: PropTypes.oneOf(['sm', 'xl']), }; static defaultProps = { @@ -176,7 +180,7 @@ class NumberInput extends Component { } /** - * The DOM node refernce to the ``. + * The DOM node reference to the ``. * @type {HTMLInputElement} */ _inputRef = null; @@ -281,6 +285,7 @@ class NumberInput extends Component { innerRef: ref, translateWithId: t, isMobile, + size, ...other } = this.props; @@ -292,6 +297,7 @@ class NumberInput extends Component { [`${prefix}--number--light`]: light, [`${prefix}--number--nolabel`]: hideLabel, [`${prefix}--number--mobile`]: isMobile, + [`${prefix}--number--${size}`]: size, } ); From 3c6925116834a8e01de795e6a45d30decff3ea4f Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Tue, 3 Mar 2020 13:24:32 +0000 Subject: [PATCH 4/4] chore(project): sync generated files --- packages/components/docs/sass.md | 46 ++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md index 71eb1ff037ec..459ca34506b4 100644 --- a/packages/components/docs/sass.md +++ b/packages/components/docs/sass.md @@ -19559,6 +19559,7 @@ Number input styles cursor: not-allowed; background-color: $disabled-background-color; color: $disabled; + border-bottom-color: transparent; } .#{$prefix}--number__input-wrapper { @@ -19707,6 +19708,51 @@ Number input styles } } + // Size Variant styles + .#{$prefix}--number--xl input[type='number'] { + height: rem(48px); + } + + .#{$prefix}--number--xl .#{$prefix}--number__control-btn { + height: rem(24px); + } + + .#{$prefix}--number--xl.#{$prefix}--number--mobile + .#{$prefix}--number__control-btn { + height: rem(48px); + width: rem(48px); + } + + .#{$prefix}--number--xl .#{$prefix}--number__control-btn.up-icon svg { + top: rem(6.6px); // Needed to maintain arrow spacing between input sizes. + } + + .#{$prefix}--number--xl .#{$prefix}--number__control-btn.down-icon svg { + top: rem(-6.6px); // Needed to maintain arrow spacing between input sizes. + } + + .#{$prefix}--number--sm input[type='number'] { + height: rem(32px); + } + + .#{$prefix}--number--sm .#{$prefix}--number__control-btn { + height: rem(16px); + } + + .#{$prefix}--number--sm.#{$prefix}--number--mobile + .#{$prefix}--number__control-btn { + height: rem(32px); + width: rem(32px); + } + + .#{$prefix}--number--sm .#{$prefix}--number__control-btn.up-icon svg { + top: rem(3.4px); // Needed to maintain arrow spacing between input sizes. + } + + .#{$prefix}--number--sm .#{$prefix}--number__control-btn.down-icon svg { + top: rem(-3.4px); // Needed to maintain arrow spacing between input sizes. + } + //No label positioning adjustment .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text { margin-top: 0;