feat(read-only): update readonly border values (#13456)

* feat(read-only): update readonly border values * test(snapshot): update snapshots
carbon-design-system · Apr 4, 2023 · 6948982 · 6948982
1 parent b955ebe
commit 6948982
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 5 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9793,6 +9793,9 @@ Map {
       "invalidText": Object {
         "type": "node",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "warn": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.js
@@ -13,13 +13,23 @@ import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
 const FluidDatePicker = React.forwardRef(function FluidDatePicker(
-  { className, children, invalid, invalidText, warn, warnText, ...other },
+  {
+    className,
+    children,
+    invalid,
+    invalidText,
+    readOnly,
+    warn,
+    warnText,
+    ...other
+  },
   ref
 ) {
   const prefix = usePrefix();
   const classNames = classnames(className, {
     [`${prefix}--date-picker--fluid`]: true,
     [`${prefix}--date-picker--fluid--invalid`]: invalid,
+    [`${prefix}--date-picker--fluid--readonly`]: readOnly,
     [`${prefix}--date-picker--fluid--warn`]: warn,
   });
 
@@ -28,6 +38,7 @@ const FluidDatePicker = React.forwardRef(function FluidDatePicker(
       <DatePicker
         invalid={invalid}
         invalidText={invalidText}
+        readOnly={readOnly}
         warn={warn}
         warnText={warnText}
         className={classNames}
@@ -60,6 +71,11 @@ FluidDatePicker.propTypes = {
    */
   invalidText: PropTypes.node,
 
+  /**
+   * Whether the input should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify whether the control is currently in warning state
    */

diff --git a/packages/styles/scss/components/combo-box/_combo-box.scss b/packages/styles/scss/components/combo-box/_combo-box.scss
@@ -54,6 +54,10 @@
     background-color: transparent;
   }
 
+  .#{$prefix}--combo-box--readonly .#{$prefix}--text-input {
+    border-bottom-color: $border-subtle;
+  }
+
   .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__menu-icon,
   .#{$prefix}--combo-box--readonly .#{$prefix}--list-box__selection {
     cursor: default;

diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss
@@ -213,6 +213,7 @@
 
   // readonly
   .#{$prefix}--date-picker__input[readonly] {
+    border-bottom-color: $border-subtle;
     background: transparent;
     cursor: text;
   }

diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss
@@ -477,6 +477,7 @@
   // readonly
   .#{$prefix}--dropdown--readonly,
   .#{$prefix}--dropdown--readonly:hover {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
   }
 

diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -360,4 +360,21 @@
     .#{$prefix}--date-picker__icon {
     bottom: $spacing-03;
   }
+
+  // Readonly
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+    .#{$prefix}--date-picker
+    > .#{$prefix}--date-picker-container,
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+    .#{$prefix}--date-picker
+    .#{$prefix}--date-picker__input {
+    border-bottom-color: $border-subtle;
+  }
+
+  .#{$prefix}--date-picker--fluid.#{$prefix}--date-picker--fluid--readonly:not(.#{$prefix}--date-picker--fluid--invalid):not(.#{$prefix}--date-picker--fluid--warn)
+    .#{$prefix}--date-picker--range
+    > .#{$prefix}--date-picker-container:last-child
+    .#{$prefix}--date-picker__input {
+    border-left-color: $border-subtle;
+  }
 }
diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -119,6 +119,7 @@
 
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly,
   .#{$prefix}--multi-select.#{$prefix}--multi-select--readonly:hover {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
   }
 

diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
@@ -198,20 +198,18 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-bottom-width: 0;
+    border-bottom-color: transparent;
 
     &:hover {
       @include focus-outline('outline');
-
-      border: 0;
     }
   }
 
   .#{$prefix}--number
     input[type='number'][data-invalid]
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn {
-    border-bottom-width: 0;
+    border-bottom-color: transparent;
   }
 
   // add invalid outline to number controls only when invalid input is not focused
@@ -437,6 +435,7 @@
 
   // Readonly
   .#{$prefix}--number--readonly input[type='number'] {
+    border-bottom-color: $border-subtle;
     background: transparent;
   }
 

diff --git a/packages/styles/scss/components/select/_select.scss b/packages/styles/scss/components/select/_select.scss
@@ -254,6 +254,7 @@
 
   // readonly
   .#{$prefix}--select--readonly .#{$prefix}--select-input {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
     cursor: default;
   }

diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
@@ -112,6 +112,7 @@
   // Readonly
   //-----------------------------
   .#{$prefix}--text-area__wrapper--readonly .#{$prefix}--text-area {
+    border-bottom-color: $border-subtle;
     background: transparent;
   }
 

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
@@ -415,6 +415,7 @@
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
   .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+    border-bottom-color: $border-subtle;
     background: transparent;
   }
 

diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss
@@ -91,10 +91,12 @@
 
   // readonly
   .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
   }
 
   .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
+    border-bottom-color: $border-subtle;
     background-color: transparent;
     cursor: default;
   }