@carbon/styles 1.19.0 → 1.20.0

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

@@ -0,0 +1,273 @@
+//
+// Copyright IBM Corp. 2022
+//
+// 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 Number Input
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../number-input';
+
+@mixin fluid-number-input {
+  .#{$prefix}--number-input--fluid {
+    position: relative;
+    height: 100%;
+    background: $field;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    width: calc(100% - 2rem);
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--number-input--fluid input[type='number'] {
+    min-height: rem(64px);
+    padding: rem(32px) rem(80px) rem(13px) $spacing-05;
+    background: transparent;
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__controls {
+    top: rem(23px);
+    height: rem(40px);
+    transform: translate(0);
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border-bottom: 1px solid transparent;
+  }
+
+  // Focus Overrides
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+    .#{$prefix}--number {
+    @include focus-outline('outline');
+  }
+
+  // Weird overrides (needed to override focus borders on stepper buttons when hovered while input has focus)
+  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+    .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper:not(.#{$prefix}--number__input-wrapper--warning)
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover {
+    outline: 2px solid transparent;
+  }
+
+  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+    .#{$prefix}--number
+    .#{$prefix}--number__input-wrapper:not(.#{$prefix}--number__input-wrapper--warning)
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover::before {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: $focus;
+  }
+  // End weirdness
+
+  .#{$prefix}--number-input--fluid:not(.#{$prefix}--number-input--fluid--invalid)
+    .#{$prefix}--number-input-wrapper:not(.#{$prefix}--number-input-wrapper__warning)
+    input[type='number']:focus
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover {
+    border-bottom: 1px solid $focus;
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn::after {
+    top: 0;
+    height: calc(100% - rem(1px));
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon::after {
+    background: $focus;
+  }
+
+  .#{$prefix}--number-input--fluid
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon::after {
+    height: calc(100%);
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--focus
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn.up-icon:hover::after {
+    height: calc(100%);
+    background-color: $focus;
+  }
+
+  .#{$prefix}--number-input--fluid--invalid
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus,
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:focus:hover {
+    @include focus-outline('outline');
+  }
+
+  // Invalid styles
+  .#{$prefix}--number-input--fluid .#{$prefix}--number-input__divider {
+    display: none;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--number__invalid {
+    top: rem(73px);
+    right: $spacing-05;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__controls
+    .#{$prefix}--number__rule-divider:first-of-type {
+    display: none;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number'] {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number']:focus {
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number-input__divider,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    + .#{$prefix}--number-input__divider {
+    position: absolute;
+    top: rem(63px);
+    display: block;
+    width: calc(100% - 2rem);
+    height: rem(1px);
+    border: none;
+    border-bottom: 1px solid $border-subtle;
+    margin: 0 1rem;
+  }
+
+  .#{$prefix}--number-input--fluid .#{$prefix}--form-requirement {
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin: 0;
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--fluid--invalid:not(.#{$prefix}--number-input--fluid--focus)
+    .#{$prefix}--number {
+    @include focus-outline('invalid');
+  }
+
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number[data-invalid]
+    input[type='number'] {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number[data-invalid]
+    input[type='number'],
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn:hover:not(:focus) {
+    outline: none;
+  }
+
+  .#{$prefix}--number-input--fluid.#{$prefix}--number-input--invalid
+    .#{$prefix}--number__input-wrapper
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number__input-wrapper--warning
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border-bottom: none;
+  }
+
+  .#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='number'][data-invalid]
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn,
+  .#{$prefix}--number-input--fluid
+    .#{$prefix}--number
+    input[type='number']
+    ~ .#{$prefix}--number__controls
+    .#{$prefix}--number__control-btn {
+    border: initial;
+    border-bottom-width: rem(1px);
+  }
+
+  // Disabled states
+  .#{$prefix}--number-input--fluid--disabled:not(.#{$prefix}--number-input--fluid--invalid)
+    .#{$prefix}--number {
+    border-bottom: 1px solid $border-subtle;
+  }
+
+  .#{$prefix}--number-input--fluid--disabled.#{$prefix}--number-input--fluid--invalid
+    .#{$prefix}--number
+    input[type='number']:disabled {
+    background-color: transparent;
+  }
+}

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

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022
+//
+// 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-number-input';
+@use 'fluid-number-input';
+
+@include fluid-number-input.fluid-number-input;

package/scss/components/fluid-search/_fluid-search.scss

@@ -0,0 +1,141 @@
+//
+// Copyright IBM Corp. 2022
+//
+// 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 Search
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../search';
+
+@mixin fluid-search {
+  .#{$prefix}--search--fluid {
+    height: rem(64px);
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    overflow: initial;
+    width: calc(100% - 2rem);
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+    clip: initial;
+    white-space: initial;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--search--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--search--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--search--fluid .#{$prefix}--label .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-input {
+    height: 100%;
+    padding: rem(32px) rem(88px) rem(13px) $spacing-05;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-magnifier-icon {
+    top: auto;
+    right: 1rem;
+    bottom: rem(13px);
+    left: auto;
+    transform: none;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-close {
+    top: auto;
+    right: rem(48px);
+    bottom: 0;
+    left: auto;
+    width: rem(40px);
+    height: rem(40px);
+    border: none;
+    transition: background-color $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-close::before {
+    position: absolute;
+    top: auto;
+    right: rem(-1px);
+    bottom: rem(14px);
+    left: auto;
+    display: block;
+    width: rem(1px);
+    height: 1rem;
+    background: $border-subtle;
+    content: '';
+  }
+
+  .#{$prefix}--search--fluid
+    .#{$prefix}--search-input:focus
+    ~ .#{$prefix}--search-close:hover {
+    outline: none;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-close::after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: rem(2px);
+    content: '';
+  }
+
+  .#{$prefix}--search--fluid
+    .#{$prefix}--search-input:focus
+    ~ .#{$prefix}--search-close::after {
+    background: $focus;
+  }
+
+  .#{$prefix}--search--fluid
+    .#{$prefix}--search-input:not(:focus)
+    ~ .#{$prefix}--search-close:not([disabled])::after {
+    height: rem(1px);
+    background: $border-strong;
+  }
+
+  .#{$prefix}--search--fluid .#{$prefix}--search-close svg {
+    margin-bottom: rem(2px);
+  }
+
+  // Disabled styles
+  .#{$prefix}--search--fluid
+    .#{$prefix}--search-input:disabled
+    ~ .#{$prefix}--search-close:hover::before {
+    background: $border-subtle;
+  }
+
+  .#{$prefix}--search--fluid.#{$prefix}--search--disabled .#{$prefix}--label {
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--search--fluid.#{$prefix}--search--disabled
+    .#{$prefix}--search-input[disabled] {
+    border-bottom: 1px solid $border-subtle;
+  }
+}

package/scss/components/fluid-search/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022
+//
+// 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-search';
+@use 'fluid-search';
+
+@include fluid-search.fluid-search;

package/scss/components/fluid-select/_fluid-select.scss

@@ -31,11 +31,28 @@
     top: rem(13px);
     left: $spacing-05;
     display: flex;
+    width: calc(100% - 2rem);
     height: rem(16px);
     align-items: center;
     margin: 0;
   }
 
+  .#{$prefix}--select--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--select--fluid .#{$prefix}--label .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
   .#{$prefix}--select--fluid .#{$prefix}--select-input {
     min-height: rem(64px);
     padding: rem(32px) rem(32px) rem(13px) $spacing-05;

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

@@ -39,11 +39,30 @@
     top: rem(13px);
     left: $spacing-05;
     display: flex;
+    width: calc(100% - 2rem);
     height: rem(16px);
     align-items: center;
     margin: 0;
   }
 
+  .#{$prefix}--text-area--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label {
+    -ms-overflow-style: none;
+    overflow-x: scroll;
+    scrollbar-width: none;
+    white-space: nowrap;
+  }
+
   //counter
   .#{$prefix}--text-area--fluid div.#{$prefix}--label {
     right: 1rem;

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

@@ -35,16 +35,26 @@
     height: rem(16px);
     align-items: center;
     margin: 0;
+  }
+
+  .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar,
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label::-webkit-scrollbar {
+    display: none;
+  }
+
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--label:not(:has(.#{$prefix}--toggletip-label)),
+  .#{$prefix}--text-input--fluid
+    .#{$prefix}--label
+    .#{$prefix}--toggletip-label {
     -ms-overflow-style: none;
     overflow-x: scroll;
     scrollbar-width: none;
     white-space: nowrap;
   }
 
-  .#{$prefix}--text-input--fluid .#{$prefix}--label::-webkit-scrollbar {
-    display: none;
-  }
-
   .#{$prefix}--text-input--fluid .#{$prefix}--form__helper-text {
     display: none;
   }

package/scss/components/form/_form.scss

@@ -110,7 +110,7 @@ $input-label-weight: 400 !default;
   }
 
   input[type='number'] {
-    font-family: carbon--font-family('mono');
+    font-family: font-family('sans');
   }
 
   input[data-invalid]:not(:focus),

package/scss/components/modal/_modal.scss

@@ -146,7 +146,7 @@
 
   //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,
+  .#{$prefix}--modal-content > p,
   .#{$prefix}--modal-content__regular-content {
     @include type-style('body-01');
     // padding should take into account the left and right padding of modal container
@@ -193,7 +193,7 @@
       padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content p {
+    .#{$prefix}--modal-content > p {
       //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
       padding-right: 0;
     }
@@ -221,7 +221,7 @@
       padding-right: $spacing-05;
     }
 
-    .#{$prefix}--modal-content p {
+    .#{$prefix}--modal-content > p {
       //.#{$prefix}--modal-content already has 16px padding so this doesn't need any
       padding-right: 0;
     }
@@ -234,7 +234,7 @@
       width: 42%;
       max-height: 72%;
 
-      .#{$prefix}--modal-content p,
+      .#{$prefix}--modal-content > p,
       .#{$prefix}--modal-content__regular-content {
         padding-right: 20%;
       }

package/scss/components/number-input/_number-input.scss

@@ -32,7 +32,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('code-01');
+    @include type-style('body-compact-01');
     @include focus-outline('reset');
 
     display: inline-flex;
@@ -50,7 +50,7 @@
     background-color: $field;
     border-radius: 0;
     color: $text-primary;
-    font-family: font-family('mono');
+    font-family: font-family('sans');
     font-weight: 400;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);

package/scss/components/popover/_popover.scss

@@ -107,6 +107,7 @@ $popover-caret-height: custom-property.get-var(
   // Popover, this element contains both the caret and the popover content
   .#{$prefix}--popover {
     position: absolute;
+    z-index: z('floating');
     top: 0;
     right: 0;
     bottom: 0;

package/scss/components/slider/_slider.scss

@@ -134,6 +134,10 @@
     }
   }
 
+  .#{$prefix}--slider-text-input--hidden {
+    display: none;
+  }
+
   .#{$prefix}--slider-text-input.#{$prefix}--text-input--invalid {
     padding-right: 1rem;
   }