Readonly and inputgroup styles (#1566)

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/stepper/index.css

@@ -38,6 +38,17 @@ governing permissions and limitations under the License.
   line-height: 0;
   border-radius: var(--spectrum-border-radius);
   transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
+
+  &:not(.spectrum-Stepper--quiet):not(.spectrum-Stepper--showStepper) .spectrum-Stepper-input {
+    border-inline-end-width: var(--spectrum-stepper-border-size-default);
+    border-inline-end-style: solid;
+    border-start-end-radius: var(--spectrum-border-radius);
+    border-end-end-radius: var(--spectrum-border-radius);
+  }
+
+  &.is-disabled:not(.spectrum-Stepper--quiet) .spectrum-Stepper-input {
+    border: none;
+  }
 }
 
 .spectrum-Stepper-container {
@@ -119,10 +130,6 @@ governing permissions and limitations under the License.
     border-end-end-radius: var(--spectrum-stepper-border-radius-reset);
   }
 
-  .spectrum-Stepper-button {
-    border-inline-start-style: none;
-  }
-
   &.spectrum-Stepper--isMobile {
     grid-template-rows: auto;
     grid-template-columns: auto 1fr auto;

packages/@adobe/spectrum-css-temp/components/stepper/skin.css

@@ -10,7 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-/* TODO: ReadOnly */
 
 .spectrum-Stepper-button {
   background-color: var(--spectrum-actionbutton-background-color);
@@ -49,14 +48,17 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-Stepper-button.spectrum-Stepper-button--isQuiet {
+.spectrum-Stepper-button.spectrum-Stepper-button--quiet {
   background-color: unset;
   &:hover {
     background-color: unset;
   }
 }
 
 .spectrum-Stepper {
+  .spectrum-Stepper-input {
+    border-color: var(--spectrum-textfield-border-color);
+  }
   .spectrum-Stepper-button {
     border-color: var(--spectrum-textfield-border-color);
   }
@@ -445,3 +447,25 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+.spectrum-Stepper.spectrum-Stepper--quiet.spectrum-Stepper--readonly {
+  .spectrum-Stepper-button.spectrum-Stepper-button--stepDown {
+    &.is-disabled {
+      border-color: var(--spectrum-textfield-quiet-border-color);
+    }
+  }
+  &:hover {
+    .spectrum-Stepper-button.spectrum-Stepper-button--stepDown {
+      &.is-disabled {
+        border-color: var(--spectrum-actionbutton-border-color-hover);
+      }
+    }
+  }
+  &.is-focused {
+    .spectrum-Stepper-button.spectrum-Stepper-button--stepDown {
+      &.is-disabled {
+        border-color: var(--spectrum-actionbutton-border-color-key-focus);
+      }
+    }
+  }
+}

packages/@react-spectrum/numberfield/src/NumberField.tsx

@@ -35,6 +35,7 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
   let provider = useProvider();
   let {
     isQuiet,
+    isReadOnly,
     isDisabled,
     hideStepper
   } = props;
@@ -62,14 +63,17 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
     'spectrum-InputGroup',
     {
       'spectrum-InputGroup--quiet': isQuiet,
-      'is-invalid': props.validationState === 'invalid',
-      'is-disabled': isDisabled
+      'spectrum-InputGroup--invalid': props.validationState === 'invalid',
+      'is-disabled': isDisabled,
+      'is-hovered': isHovered
     },
     classNames(
       stepperStyle,
       'spectrum-Stepper',
       {
         'spectrum-Stepper--quiet': isQuiet,
+        'is-disabled': isDisabled,
+        'spectrum-Stepper--readonly': isReadOnly,
         'is-invalid': props.validationState === 'invalid',
         'spectrum-Stepper--showStepper': showStepper,
         'spectrum-Stepper--isMobile': isMobile,
@@ -79,7 +83,6 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
       }
     )
   );
-  // TODO: how to ignore a right click on the stepper buttons to prevent focus of just them
 
   return (
     <Field
@@ -146,9 +149,31 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: Numbe
         style={style}
         className={className}>
         <TextFieldBase
-          UNSAFE_className={classNames(stepperStyle, 'spectrum-Stepper-field')}
+          UNSAFE_className={
+            classNames(
+              stepperStyle,
+              'spectrum-Stepper-field',
+              classNames(inputgroupStyles,
+                'spectrum-InputGroup-field'
+              )
+            )
+          }
           isQuiet={isQuiet}
-          inputClassName={classNames(stepperStyle, 'spectrum-Stepper-input')}
+          inputClassName={
+            classNames(
+              stepperStyle,
+              'spectrum-Stepper-input',
+              classNames(inputgroupStyles,
+                'spectrum-InputGroup-input'
+              )
+            )
+          }
+          validationIconClassName={
+            classNames(
+              inputgroupStyles,
+              'spectrum-InputGroup-input-validationIcon'
+            )
+          }
           inputRef={inputRef}
           validationState={validationState}
           inputProps={inputProps} />

packages/@react-spectrum/numberfield/src/StepButton.tsx

@@ -49,7 +49,7 @@ function StepButton(props: StepButtonProps, ref: RefObject<HTMLDivElement>) {
             {
               'spectrum-Stepper-button--stepUp': direction === 'up',
               'spectrum-Stepper-button--stepDown': direction === 'down',
-              'spectrum-Stepper-button--isQuiet': isQuiet,
+              'spectrum-Stepper-button--quiet': isQuiet,
               'is-hovered': isHovered,
               'is-active': isPressed,
               'is-disabled': isDisabled

packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx

@@ -68,6 +68,10 @@ storiesOf('NumberField', module)
     'disabled',
     () => render({isDisabled: true})
   )
+  .add(
+    'readonly',
+    () => render({defaultValue: 10, isReadOnly: true})
+  )
   .add(
     'isQuiet',
     () => render({isQuiet: true})
@@ -77,8 +81,8 @@ storiesOf('NumberField', module)
     () => render({isQuiet: true, isDisabled: true})
   )
   .add(
-    'readonly',
-    () => render({defaultValue: 10, isReadOnly: true})
+    'quiet readonly',
+    () => render({isQuiet: true, isReadOnly: true})
   )
   .add(
     'validationState: invalid',