feat(number-input): add option to hide steppers
MODIFY
packages/components/src/components/number-input/_number-input.scss
packages/components/src/components/number-input/_number-input.scss
margin-top: 0;
}
+ // No steppers
+ .#{$prefix}--number--nosteppers input[type='number'] {
+ padding-right: rem(48px);
+ }
+
+ .#{$prefix}--number--nosteppers .#{$prefix}--number__invalid {
+ right: rem(16px);
+ }
+
// Skeleton State
.#{$prefix}--number.#{$prefix}--skeleton {
@include skeleton;

MODIFY
packages/react/src/components/NumberInput/NumberInput-story.js
packages/react/src/components/NumberInput/NumberInput-story.js
@@ -32,6 +32,7 @@ const props = () => ({
id: 'tj-input',
label: text('Label (label)', 'NumberInput label'),
hideLabel: boolean('No label (hideLabel)', false),
+ hideSteppers: boolean('No steppers (hideSteppers)', false),
min: number('Minimum value (min)', 0),
max: number('Maximum value (max)', 100),
value: number('Value (value)', 50),

MODIFY
packages/react/src/components/NumberInput/NumberInput.js
packages/react/src/components/NumberInput/NumberInput.js
@@ -78,6 +78,11 @@ class NumberInput extends Component {
*/
hideLabel: PropTypes.bool,
+ /**
+ * Specify whether you want the steppers to be hidden
+ */
+ hideSteppers: PropTypes.bool,
+
/**
* Provide a description for up/down icons that can be read by screen readers
*/
@@ -317,6 +322,7 @@ class NumberInput extends Component {
iconDescription, // eslint-disable-line
id,
hideLabel,
+ hideSteppers,
label,
max,
min,
@@ -347,6 +353,7 @@ class NumberInput extends Component {
[`${prefix}--number--readonly`]: readOnly,
[`${prefix}--number--light`]: light,
[`${prefix}--number--nolabel`]: hideLabel,
+ [`${prefix}--number--nosteppers`]: hideSteppers,
[`${prefix}--number--mobile`]: isMobile,
[`${prefix}--number--${size}`]: size,
}
@@ -466,6 +473,7 @@ class NumberInput extends Component {
className={`${prefix}--number__invalid ${prefix}--number__invalid--warning`}
/>
)}
+ {!hideSteppers && (
<div className={`${prefix}--number__controls`}>
<button
type="button"
@@ -490,6 +498,7 @@ class NumberInput extends Component {
</button>
<div className={`${prefix}--number__rule-divider`}></div>
</div>
+ )}
</div>
{error ? null : helper}
</>

feat(number-input): add option to hide steppers (#8646)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>