fix(NumberInput): deprecate mobile variant (#7919)

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

Author: emyarod

packages/components/src/components/number-input/_number-input.scss

@@ -381,54 +381,6 @@
     background-color: $hover-light-ui;
   }
 
-  .#{$prefix}--number--mobile {
-    width: auto;
-    min-width: rem(144px);
-
-    .#{$prefix}--number__control-btn,
-    &.#{$prefix}--number--light .#{$prefix}--number__control-btn {
-      position: static;
-      width: rem(40px);
-      height: rem(40px);
-      background-color: $ui-01;
-
-      &:hover,
-      &:focus {
-        background-color: $hover-ui;
-      }
-
-      &:focus {
-        outline-width: 2px;
-        outline-offset: -2px;
-      }
-
-      svg {
-        position: static;
-      }
-    }
-
-    input[type='number'] {
-      width: auto;
-      min-width: rem(64px);
-      margin: 0;
-      padding: 0;
-      text-align: center;
-      background-color: $field-01;
-      border-right: 1px solid $ui-03;
-      border-left: 1px solid $ui-03;
-    }
-
-    &.#{$prefix}--number--light {
-      input[type='number'] {
-        background-color: $field-02;
-      }
-
-      .#{$prefix}--number__control-btn {
-        background-color: $ui-02;
-      }
-    }
-  }
-
   // Size Variant styles
   .#{$prefix}--number--xl input[type='number'] {
     height: rem(48px);
@@ -448,12 +400,6 @@
     }
   }
 
-  .#{$prefix}--number--xl.#{$prefix}--number--mobile
-    .#{$prefix}--number__control-btn {
-    width: rem(48px);
-    height: rem(48px);
-  }
-
   .#{$prefix}--number--sm input[type='number'] {
     height: rem(32px);
   }
@@ -472,12 +418,6 @@
     }
   }
 
-  .#{$prefix}--number--sm.#{$prefix}--number--mobile
-    .#{$prefix}--number__control-btn {
-    width: rem(32px);
-    height: rem(32px);
-  }
-
   //No label positioning adjustment
   .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text {
     margin-top: 0;

packages/react/src/components/NumberInput/NumberInput-story.js

@@ -40,7 +40,6 @@ const props = () => ({
   disabled: boolean('Disabled (disabled)', false),
   readOnly: boolean('Read only (readOnly)', 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'

packages/react/src/components/NumberInput/NumberInput.js

@@ -18,6 +18,7 @@ import {
 import mergeRefs from '../../tools/mergeRefs';
 import requiredIfValueExists from '../../prop-types/requiredIfValueExists';
 import { useControlledStateWithValue } from '../../internal/FeatureFlags';
+import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 
@@ -46,67 +47,86 @@ class NumberInput extends Component {
      * `true` to allow empty string.
      */
     allowEmpty: PropTypes.bool,
+
     /**
      * Provide a description that would be used to best describe the use case of the NumberInput component
      */
     ariaLabel: PropTypes.string,
+
     /**
      * Specify an optional className to be applied to the wrapper node
      */
     className: PropTypes.string,
+
     /**
      * Optional starting value for uncontrolled state
      */
     defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
     /**
      * Specify if the control should be disabled, or not
      */
     disabled: PropTypes.bool,
+
     /**
      * Provide text that is used alongside the control label for additional help
      */
     helperText: PropTypes.node,
+
     /**
      * Specify whether you want the underlying label to be visually hidden
      */
     hideLabel: PropTypes.bool,
+
     /**
      * Provide a description for up/down icons that can be read by screen readers
      */
     iconDescription: PropTypes.string.isRequired,
+
     /**
      * Specify a custom `id` for the input
      */
     id: PropTypes.string.isRequired,
+
     /**
      * Specify if the currently value is invalid.
      */
     invalid: PropTypes.bool,
+
     /**
      * Message which is displayed if the value is invalid.
      */
     invalidText: PropTypes.node,
+
     /**
      * `true` to use the mobile variant.
      */
-    isMobile: PropTypes.bool,
+    isMobile: deprecate(
+      PropTypes.bool,
+      `The \`isMobile\` prop no longer needed as the default NumberInput styles are now identical to the mobile variant styles. This prop will be removed in the next major version of \`carbon-components-react\``
+    ),
+
     /**
      * Generic `label` that will be used as the textual representation of what
      * this field is for
      */
     label: PropTypes.node,
+
     /**
      * `true` to use the light version.
      */
     light: PropTypes.bool,
+
     /**
      * The maximum value.
      */
     max: PropTypes.number,
+
     /**
      * The minimum value.
      */
     min: PropTypes.number,
+
     /**
      * The new value is available in 'imaginaryTarget.value'
      * i.e. to get the value: evt.imaginaryTarget.value
@@ -120,34 +140,42 @@ class NumberInput extends Component {
     onChange: !useControlledStateWithValue
       ? PropTypes.func
       : requiredIfValueExists(PropTypes.func),
+
     /**
      * Provide an optional function to be called when the up/down button is clicked
      */
     onClick: PropTypes.func,
+
     /**
      * Specify if the component should be read-only
      */
     readOnly: PropTypes.bool,
+
     /**
      * Specify the size of the Number Input. Currently supports either `sm` or `xl` as an option.
      */
     size: PropTypes.oneOf(['sm', 'xl']),
+
     /**
      * Specify how much the valus should increase/decrease upon clicking on up/down button
      */
     step: PropTypes.number,
+
     /**
      * Provide custom text for the component for each translation id
      */
     translateWithId: PropTypes.func.isRequired,
+
     /**
      * Specify the value of the input
      */
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
     /**
      * Specify whether the control is currently in warning state
      */
     warn: PropTypes.bool,
+
     /**
      * Provide the text that is displayed when the control is in warning state
      */
@@ -411,45 +439,6 @@ class NumberInput extends Component {
       <div className={`${prefix}--form-item`}>
         <div className={numberInputClasses} {...inputWrapperProps}>
           {(() => {
-            if (isMobile) {
-              return (
-                <>
-                  {labelText}
-                  {helper}
-                  <div className={`${prefix}--number__input-wrapper`}>
-                    <button
-                      type="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">
-                      <Subtract16 className="down-icon" />
-                    </button>
-                    <input
-                      type="number"
-                      pattern="[0-9]*"
-                      {...other}
-                      {...props}
-                      ref={mergeRefs(ref, this._handleInputRef)}
-                    />
-                    <button
-                      type="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">
-                      <Add16 className="up-icon" />
-                    </button>
-                  </div>
-                </>
-              );
-            }
             return (
               <>
                 {labelText}