chore(fluid-form): update fluid input styles (#13343)

* chore(fluid-form): fix modal fluid padding * chore(fluid-form): fix modal fluid input styles * chore(fluid-inputs): update fluid input styles * chore(fluid-form): update fluid form in modal style * chore(fluid-form): update example --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 17, 2023 · 03de283 · 03de283
1 parent a2c4147
commit 03de283
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 7 deletions.
diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
@@ -53,6 +53,10 @@
     white-space: nowrap;
   }
 
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__input-wrapper {
+    position: initial;
+  }
+
   .#{$prefix}--number-input--fluid input[type='number'] {
     min-height: rem(64px);
     padding: rem(32px) rem(80px) rem(13px) $spacing-05;
@@ -74,7 +78,6 @@
     border-bottom: 1px solid transparent;
   }
 
-  // Focus Overrides
   .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
     .#{$prefix}--number {
     @include focus-outline('outline');

diff --git a/packages/styles/scss/components/fluid-select/_fluid-select.scss b/packages/styles/scss/components/fluid-select/_fluid-select.scss
@@ -105,7 +105,7 @@
   }
 
   .#{$prefix}--select--fluid .#{$prefix}--select-input__wrapper {
-    flex-direction: column;
+    display: block;
   }
 
   .#{$prefix}--select--fluid

diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -96,6 +96,12 @@
     resize: none;
   }
 
+  // accounts for 2px of border when invalid
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid {
+    padding: 0 rem(14px) rem(13px);
+    margin-top: rem(30px);
+  }
+
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]
     .#{$prefix}--text-area__divider,
@@ -156,22 +162,21 @@
   }
 
   //invalid outline
+  // needs to be a border for some weirdness when in a modal
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]:not(:focus) {
-    @include focus-outline('invalid');
-
-    outline-offset: 0;
+    border: 2px solid $support-error;
   }
 
   // focus
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]:focus-within,
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper:focus-within {
     @include focus-outline('outline');
-
-    outline-offset: 0;
   }
 
+  // end weirdness
+
   .#{$prefix}--text-area--fluid
     .#{$prefix}--text-area__wrapper[data-invalid]
     > .#{$prefix}--text-area--invalid:focus,

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -71,6 +71,41 @@
     .#{$prefix}--number__rule-divider {
       background-color: $border-subtle-02;
     }
+
+    // Fluid inputs
+    .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
+    .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,
+    .#{$prefix}--text-area--fluid .#{$prefix}--text-area,
+    .#{$prefix}--search--fluid .#{$prefix}--search-input,
+    .#{$prefix}--select--fluid .#{$prefix}--select-input,
+    .#{$prefix}--text-area--fluid
+      .#{$prefix}--text-area__wrapper[data-invalid]
+      .#{$prefix}--text-area__divider
+      + .#{$prefix}--form-requirement,
+    .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box,
+    .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper,
+    .#{$prefix}--number-input--fluid input[type='number'],
+    .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::before,
+    .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn::after,
+    .#{$prefix}--date-picker--fluid
+      .c#{$prefix}ds--date-picker-input__wrapper
+      .#{$prefix}--date-picker__input {
+      background-color: $field-01;
+    }
+
+    .#{$prefix}--number-input--fluid
+      .#{$prefix}--number__control-btn:hover::before,
+    .#{$prefix}--number-input--fluid
+      .#{$prefix}--number__control-btn:hover::after {
+      background-color: $field-hover;
+    }
+
+    .#{$prefix}--number-input--fluid
+      .#{$prefix}--number__control-btn:focus::before,
+    .#{$prefix}--number-input--fluid
+      .#{$prefix}--number__control-btn:focus::after {
+      border-left: 2px solid $focus;
+    }
   }
 
   .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
@@ -144,6 +179,12 @@
     }
   }
 
+  // fluid form in modal
+  .#{$prefix}--modal-content .#{$prefix}--form--fluid {
+    margin-right: -$spacing-05;
+    margin-left: -$spacing-05;
+  }
+
   //TO-DO: remove .#{$prefix}--modal-content__regular-content in v11 since hasForm has been deprecated
   // text/p gets 20% right padding
   .#{$prefix}--modal-content > p,