Skip to content
This repository has been archived by the owner on Oct 19, 2021. It is now read-only.

Commit

Permalink
feat(NumberInput): add experimental mobile variant (#1983)
Browse files Browse the repository at this point in the history 
* feat(NumberInput): add experimental mobile variant

* chore: bump carbon-components version

* chore: bump dependencies

* fix(NumberInput): reorder default legacy props for icon description

* style(NumberInput): rename prop

* chore: bump carbon-components version

* style(NumberInput): rename prop type

* chore: bump carbon-components version
  • Loading branch information
@emyarod @alisonjoseph
emyarod authored and alisonjoseph committed Mar 13, 2019
1 parent 9178e17 commit 0713fd4
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 94 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-react-docgen": "^2.0.0",
"bowser": "^1.6.1",
"carbon-components": "^9.83.9",
"carbon-components": "^9.84.1",
"carbon-icons": "^7.0.5",
"chalk": "^2.3.0",
"cli-table": "^0.3.0",
Expand Down
1 change: 1 addition & 0 deletions src/components/NumberInput/NumberInput-story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const props = () => ({
step: number('Step of up/down arrow (step)', 10),
disabled: boolean('Disabled (disabled)', false),
invalid: boolean('Show form validation UI (invalid)', false),
isMobile: boolean('Mobile variant', false),
invalidText: text(
'Form validation UI content (invalidText)',
'Number is not valid'
Expand Down
232 changes: 140 additions & 92 deletions src/components/NumberInput/NumberInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ class NumberInput extends Component {
* Provide custom text for the component for each translation id
*/
translateWithId: PropTypes.func.isRequired,
/**
* `true` to use the mobile variant.
*/
isMobile: PropTypes.bool,
};

static defaultProps = {
Expand Down Expand Up @@ -217,6 +221,7 @@ class NumberInput extends Component {
allowEmpty,
innerRef: ref,
translateWithId: t,
isMobile,
...other
} = this.props;

Expand All @@ -226,6 +231,7 @@ class NumberInput extends Component {
{
[`${prefix}--number--light`]: light,
[`${prefix}--number--nolabel`]: hideLabel,
[`${prefix}--number--mobile`]: componentsX && isMobile,
}
);

Expand Down Expand Up @@ -275,100 +281,142 @@ class NumberInput extends Component {
return (
<div className={`${prefix}--form-item`}>
<div className={numberInputClasses} {...inputWrapperProps}>
{componentsX ? (
<>
{labelText}
{helper}
<div className={`${prefix}--number__input-wrapper`}>
<input
type="number"
pattern="[0-9]*"
{...other}
{...props}
ref={mergeRefs(ref, this._handleInputRef)}
/>
{invalid && (
<WarningFilled16
className={`${prefix}--number__invalid`}
role="img"
{(() => {
if (!componentsX) {
return (
<>
<div className={`${prefix}--number__controls`}>
<button
className={`${prefix}--number__control-btn up-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'up')}
title={incrementNumLabel}
aria-label={incrementNumLabel}
aria-live="polite"
aria-atomic="true">
<Icon
className="up-icon"
icon={iconCaretUp}
description={iconDescription || incrementNumLabel}
viewBox="0 0 10 5"
/>
</button>
<button
className={`${prefix}--number__control-btn down-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'down')}
title={decrementNumLabel}
aria-label={decrementNumLabel}
aria-live="polite"
aria-atomic="true">
<Icon
className="down-icon"
icon={iconCaretDown}
viewBox="0 0 10 5"
description={iconDescription || decrementNumLabel}
/>
</button>
</div>
{labelText}
<input
type="number"
pattern="[0-9]*"
{...other}
{...props}
ref={mergeRefs(ref, this._handleInputRef)}
/>
)}
<div className={`${prefix}--number__controls`}>
<button
className={`${prefix}--number__control-btn up-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'up')}
title={incrementNumLabel}
aria-label={incrementNumLabel}
aria-live="polite"
aria-atomic="true">
<CaretUpGlyph
className="up-icon"
aria-label={iconDescription || incrementNumLabel}>
<title>{iconDescription || incrementNumLabel}</title>
</CaretUpGlyph>
</button>
<button
className={`${prefix}--number__control-btn down-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'down')}
title={decrementNumLabel}
aria-label={decrementNumLabel}
aria-live="polite"
aria-atomic="true">
<CaretDownGlyph
className="down-icon"
aria-label={iconDescription || decrementNumLabel}>
<title>{iconDescription || decrementNumLabel}</title>
</CaretDownGlyph>
</button>
</div>
</div>
</>
) : (
<>
<div className={`${prefix}--number__controls`}>
<button
className={`${prefix}--number__control-btn up-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'up')}
title={incrementNumLabel}
aria-label={incrementNumLabel}
aria-live="polite"
aria-atomic="true">
<Icon
className="up-icon"
icon={iconCaretUp}
description={iconDescription || incrementNumLabel}
viewBox="0 0 10 5"
</>
);
}
if (isMobile) {
return (
<>
{labelText}
{helper}
<div className={`${prefix}--number__input-wrapper`}>
<button
className={`${prefix}--number__control-btn down-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'down')}
title={decrementNumLabel}
aria-label={decrementNumLabel || iconDescription}
aria-live="polite"
aria-atomic="true">
<CaretDownGlyph className="down-icon">
<title>{decrementNumLabel || iconDescription}</title>
</CaretDownGlyph>
</button>
<input
type="number"
pattern="[0-9]*"
{...other}
{...props}
ref={mergeRefs(ref, this._handleInputRef)}
/>
<button
className={`${prefix}--number__control-btn up-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'up')}
title={incrementNumLabel}
aria-label={incrementNumLabel || iconDescription}
aria-live="polite"
aria-atomic="true">
<CaretUpGlyph className="up-icon">
<title>{incrementNumLabel || iconDescription}</title>
</CaretUpGlyph>
</button>
</div>
</>
);
}
return (
<>
{labelText}
{helper}
<div className={`${prefix}--number__input-wrapper`}>
<input
type="number"
pattern="[0-9]*"
{...other}
{...props}
ref={mergeRefs(ref, this._handleInputRef)}
/>
</button>
<button
className={`${prefix}--number__control-btn down-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'down')}
title={decrementNumLabel}
aria-label={decrementNumLabel}
aria-live="polite"
aria-atomic="true">
<Icon
className="down-icon"
icon={iconCaretDown}
viewBox="0 0 10 5"
description={iconDescription || decrementNumLabel}
/>
</button>
</div>
{labelText}
<input
type="number"
pattern="[0-9]*"
{...other}
{...props}
ref={mergeRefs(ref, this._handleInputRef)}
/>
</>
)}
{invalid && (
<WarningFilled16
className={`${prefix}--number__invalid`}
role="img"
/>
)}
<div className={`${prefix}--number__controls`}>
<button
className={`${prefix}--number__control-btn up-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'up')}
title={incrementNumLabel}
aria-label={incrementNumLabel || iconDescription}
aria-live="polite"
aria-atomic="true">
<CaretUpGlyph className="up-icon">
<title>{incrementNumLabel || iconDescription}</title>
</CaretUpGlyph>
</button>
<button
className={`${prefix}--number__control-btn down-icon`}
{...buttonProps}
onClick={evt => this.handleArrowClick(evt, 'down')}
title={decrementNumLabel}
aria-label={decrementNumLabel || iconDescription}
aria-live="polite"
aria-atomic="true">
<CaretDownGlyph className="down-icon">
<title>{decrementNumLabel || iconDescription}</title>
</CaretDownGlyph>
</button>
</div>
</div>
</>
);
})()}
{error}
{!componentsX && helper}
</div>
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3158,7 +3158,7 @@ capture-stack-trace@^1.0.0:
resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==

carbon-components@^9.83.9:
carbon-components@^9.84.1:
version "9.84.1"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-9.84.1.tgz#1479b25fe0b3dd18d401f36752993b90cdb82e82"
integrity sha512-c8ClaAwnOVow14FrAR3O/ilXNE69Ll9S4kpnle6izE6LPQ6a5UNmTMGC0TE1MZV3ZSf4hyIgqa0QRjC9Rduqpw==
Expand Down

0 comments on commit 0713fd4

Please sign in to comment.