@carbon/styles 1.11.0 → 1.12.0

package/scss/components/_index.scss

@@ -22,6 +22,7 @@
 @use 'date-picker';
 @use 'dropdown';
 @use 'file-uploader';
+@use 'fluid-text-input';
 @use 'form';
 @use 'inline-loading';
 @use 'link';

package/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -0,0 +1,125 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Fluid Text Input
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../text-input';
+
+@mixin fluid-text-input {
+  .#{$prefix}--text-input--fluid.#{$prefix}--text-input-wrapper {
+    position: relative;
+    height: 100%;
+    background: $field;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--form__helper-text {
+    display: none;
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--text-input {
+    min-height: rem(64px);
+    padding: rem(32px) $spacing-05 rem(13px);
+  }
+
+  .#{$prefix}--text-input__divider,
+  .#{$prefix}--text-input--fluid .#{$prefix}--text-input__divider {
+    display: none;
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper[data-invalid],
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--warning {
+    display: block;
+  }
+
+  .#{$prefix}--text-input--fluid input[data-invalid] {
+    outline: none;
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--form-requirement {
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin: 0;
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--text-input--invalid,
+  .#{$prefix}--text-input--fluid .#{$prefix}--text-input--warning {
+    border-bottom: none;
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--invalid
+    + .#{$prefix}--text-input__divider,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input--warning
+    + .#{$prefix}--text-input__divider {
+    display: block;
+    border-style: solid;
+    border-color: $border-subtle;
+    border-bottom: none;
+    margin: 0 1rem;
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--text-input__invalid-icon {
+    top: rem(80px);
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper[data-invalid]
+    > .#{$prefix}--text-input--invalid,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--warning
+    > .#{$prefix}--text-input--warning {
+    outline: none;
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--warning {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper[data-invalid]:not(:focus) {
+    @include focus-outline('invalid');
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper[data-invalid]:focus-within,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--warning:focus-within {
+    @include focus-outline('outline');
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper[data-invalid]
+    > .#{$prefix}--text-input--invalid:focus,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--text-input__field-wrapper--warning
+    > .#{$prefix}--text-input--warning:focus {
+    outline: none;
+  }
+}

package/scss/components/fluid-text-input/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'fluid-text-input';
+@use 'fluid-text-input';
+
+@include fluid-text-input.fluid-text-input;

package/scss/components/multiselect/_multiselect.scss

@@ -100,4 +100,9 @@
     border-bottom: 0;
     background-color: transparent;
   }
+
+  .#{$prefix}--multi-select:not(.#{$prefix}--list-box--expanded)
+    .#{$prefix}--list-box__menu {
+    visibility: hidden;
+  }
 }

package/scss/components/text-input/_text-input.scss

@@ -248,6 +248,8 @@
     @include skeleton;
   }
 
+  // Deprecated -- Styles have been moved to `fluid-text-input.scss`
+  // V12 - Remove this block
   //-----------------------------
   // Fluid Text Input
   //-----------------------------
@@ -263,6 +265,9 @@
     z-index: 1;
     top: rem(13px);
     left: $spacing-05;
+    display: flex;
+    height: rem(16px);
+    align-items: center;
     margin: 0;
   }
 
@@ -281,7 +286,7 @@
   }
 
   .#{$prefix}--form--fluid .#{$prefix}--text-input--invalid,
-  .#{$prefix}--form--fluid .#{$prefix}--text-input--warn {
+  .#{$prefix}--form--fluid .#{$prefix}--text-input--warning {
     border-bottom: none;
   }
 
@@ -289,7 +294,7 @@
     .#{$prefix}--text-input--invalid
     + .#{$prefix}--text-input__divider,
   .#{$prefix}--form--fluid
-    .#{$prefix}--text-input--warn
+    .#{$prefix}--text-input--warning
     + .#{$prefix}--text-input__divider {
     display: block;
     border-style: solid;
@@ -302,15 +307,17 @@
     top: rem(80px);
   }
 
-  // V11: Possibly deprecate
-  .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--light {
-    background: $field-02;
-  }
-
   .#{$prefix}--form--fluid
     .#{$prefix}--text-input__field-wrapper[data-invalid]
-    > .#{$prefix}--text-input--invalid {
-    @include focus-outline('reset');
+    > .#{$prefix}--text-input--invalid,
+  .#{$prefix}--form--fluid
+    .#{$prefix}--text-input__field-wrapper--warning
+    > .#{$prefix}--text-input--warning {
+    outline: none;
+  }
+
+  .#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper--warning {
+    border-bottom: 1px solid $border-strong;
   }
 
   .#{$prefix}--form--fluid
@@ -319,11 +326,20 @@
   }
 
   .#{$prefix}--form--fluid
-    .#{$prefix}--text-input__field-wrapper[data-invalid]
-    > .#{$prefix}--text-input--invalid:focus {
+    .#{$prefix}--text-input__field-wrapper[data-invalid]:focus-within,
+  .#{$prefix}--form--fluid
+    .#{$prefix}--text-input__field-wrapper--warning:focus-within {
     @include focus-outline('outline');
   }
 
+  .#{$prefix}--form--fluid
+    .#{$prefix}--text-input__field-wrapper[data-invalid]
+    > .#{$prefix}--text-input--invalid:focus,
+  .#{$prefix}--form--fluid
+    .#{$prefix}--text-input__field-wrapper--warning
+    > .#{$prefix}--text-input--warning:focus {
+    outline: none;
+  }
   //-----------------------------
   // Inline Text Input
   //-----------------------------

package/scss/components/treeview/_treeview.scss

@@ -73,6 +73,9 @@
     min-height: rem(32px);
     flex: 1;
     align-items: center;
+    // (min-height 32px - single line text height 18px) / 2 = 7px
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
 
     &:hover {
       background-color: $layer-hover-01;
@@ -109,7 +112,11 @@
   }
 
   .#{$prefix}--tree-parent-node__toggle {
-    padding: 0;
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    // increase 16px container height to 18px to match text bounding box
+    padding: rem(1px) 0;
     border: 0;
     margin-right: $spacing-03;
 
@@ -135,6 +142,8 @@
   .#{$prefix}--tree-node__icon {
     min-width: 1rem;
     min-height: 1rem;
+    align-self: flex-start;
+    margin-top: rem(1px);
     margin-right: $spacing-03;
     fill: $icon-secondary;
   }
@@ -173,5 +182,7 @@
 
   .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {
     min-height: rem(24px);
+    padding-top: rem(4px);
+    padding-bottom: rem(4px);
   }
 }