@carbon/styles 1.24.0 → 1.26.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.24.0",
+  "version": "1.26.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "07168bf0272678a04c92cd1e700ac60e66355a95"
+  "gitHead": "14c6f7442f8915d508a0bada49bb05e0cac8464c"
 }

package/scss/components/_index.scss

@@ -12,6 +12,7 @@
 @use 'checkbox';
 @use 'code-snippet';
 @use 'combo-box';
+@use 'combo-button';
 @use 'contained-list';
 @use 'content-switcher';
 @use 'copy-button';
@@ -40,6 +41,7 @@
 @use 'list';
 @use 'list-box';
 @use 'loading';
+@use 'menu-button';
 @use 'menu';
 @use 'modal';
 @use 'multiselect';

package/scss/components/checkbox/_checkbox.scss

@@ -94,19 +94,19 @@
 
     // Checkboxes with a background color look visually off against a parent container.
     background-color: transparent;
-    border-radius: 1px;
+    border-radius: 2px;
     content: '';
   }
 
   // Create the appearance of the check in the `after` pseudo-element
   .#{$prefix}--checkbox-label::after {
     position: absolute;
-    top: rem(8px);
+    top: rem(7.5px);
     left: rem(7px);
     width: rem(9px);
     height: rem(5px);
-    border-bottom: 2px solid $icon-inverse;
-    border-left: 2px solid $icon-inverse;
+    border-bottom: 1.5px solid $icon-inverse;
+    border-left: 1.5px solid $icon-inverse;
     margin-top: rem(-3px) #{'/*rtl:0rem*/'};
     background: none;
     content: '';

package/scss/components/code-snippet/_code-snippet.scss

@@ -201,6 +201,12 @@ $copy-btn-feedback: $background-inverse !default;
     order: 1;
     overflow-y: auto;
     transition: max-height $duration-moderate-01 motion(standard, productive);
+
+    &:focus {
+      @include focus-outline('outline');
+
+      outline-offset: 0;
+    }
   }
 
   // expanded snippet container

package/scss/components/combo-button/_combo-button.scss

@@ -0,0 +1,47 @@
+//
+// Copyright IBM Corp. 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../utilities/convert' as *;
+
+/// Combo Button styles
+/// @access public
+/// @group combo-button
+@mixin combo-button {
+  .#{$prefix}--combo-button__container {
+    display: inline-flex;
+    column-gap: rem(1px);
+  }
+
+  $triggerSizes: (
+    'sm': rem(32px),
+    'md': rem(40px),
+    'lg': rem(48px),
+  );
+
+  @each $size, $trigger in $triggerSizes {
+    .#{$prefix}--combo-button__container--#{$size}
+      .#{$prefix}--combo-button__primary-action {
+      min-width: 10rem - rem(1px) - $trigger;
+    }
+  }
+
+  .#{$prefix}--combo-button__primary-action .#{$prefix}--btn {
+    width: 100%;
+  }
+
+  .#{$prefix}--combo-button__trigger svg {
+    transition: transform $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--combo-button__container--open
+    .#{$prefix}--combo-button__trigger
+    svg {
+    transform: rotate(180deg);
+  }
+}

package/scss/components/combo-button/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2023
+//
+// 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 'combo-button';
+@use 'combo-button';
+
+@include combo-button.combo-button;

package/scss/components/data-table/action/_data-table-action.scss

@@ -393,10 +393,9 @@
   .#{$prefix}--batch-actions:focus {
     @include focus-outline;
   }
-
+  // 200% to allow tooltips
   .#{$prefix}--batch-actions--active {
-    overflow: auto hidden;
-    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    clip-path: polygon(0 0, 200% 0, 200% 200%, 0 200%);
     pointer-events: all;
     transform: translate3d(0, 0, 0);
   }

package/scss/components/file-uploader/_file-uploader.scss

@@ -11,6 +11,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 
+@use '../../utilities/button-reset';
 @use '../../utilities/convert' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/high-contrast-mode' as *;
@@ -320,6 +321,8 @@
   }
 
   .#{$prefix}--file__drop-container {
+    @include button-reset.reset;
+
     display: flex;
     overflow: hidden;
     height: rem(96px);

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

@@ -19,6 +19,16 @@
 @use '../fluid-combo-box';
 
 @mixin fluid-multiselect {
+  .#{$prefix}--multi-select__wrapper.#{$prefix}--list-box__wrapper--fluid--focus:not(.#{$prefix}--multi-select--filterable__wrapper)
+    .#{$prefix}--list-box__field--wrapper--input-focused {
+    outline: none;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--tag.#{$prefix}--tag--filter {
+    margin-top: 1.25rem;
+  }
+
   // Filterable
   .#{$prefix}--list-box__wrapper--fluid
     .#{$prefix}--multi-select--filterable--input-focused {

package/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');

package/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

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

@@ -91,9 +91,23 @@
     display: none;
   }
 
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--warn {
+    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,
   .#{$prefix}--text-area--fluid
-    .#{$prefix}--text-area--invalid
-    + .#{$prefix}--text-area__divider {
+    .#{$prefix}--text-area__wrapper--warn
+    .#{$prefix}--text-area__divider {
     display: block;
     border-style: solid;
     border-color: $border-subtle;
@@ -101,11 +115,13 @@
     margin: 0 1rem;
   }
 
-  // invalid error message container
+  // invalid & warning error message container
   .#{$prefix}--text-area--fluid
-    .#{$prefix}--text-area--invalid
-    + .#{$prefix}--text-area__divider
-    + .#{$prefix}--form-requirement {
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    .#{$prefix}--form-requirement.#{$prefix}--form-requirement,
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--warn
+    .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
     position: relative;
     display: block;
     overflow: visible;
@@ -113,13 +129,30 @@
     padding: 0.5rem 2.5rem 0.5rem 1rem;
     margin: 0;
     background: $field;
+  }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper--warn
+    .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
+    border-bottom: 1px solid $border-strong;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--text-area--fluid
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    .#{$prefix}--form-requirement.#{$prefix}--form-requirement {
+    border-bottom: none;
     color: $text-error;
   }
 
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--warn {
+    border-bottom: none;
+  }
+
   .#{$prefix}--modal
     .#{$prefix}--text-area--fluid
-    .#{$prefix}--text-area--invalid
-    + .#{$prefix}--text-area__divider
+    .#{$prefix}--text-area__wrapper[data-invalid]
+    .#{$prefix}--text-area__divider
     + .#{$prefix}--form-requirement {
     background: $field-02;
   }
@@ -129,11 +162,10 @@
   }
 
   //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
@@ -141,10 +173,10 @@
     .#{$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,

package/scss/components/form/_form.scss

@@ -125,7 +125,7 @@ $input-label-weight: 400 !default;
     > .#{$prefix}--text-area--invalid:not(:focus),
   .#{$prefix}--select-input__wrapper[data-invalid]
     .#{$prefix}--select-input:not(:focus),
-  .#{$prefix}--list-box[data-invalid]:not(:focus),
+  .#{$prefix}--list-box[data-invalid]:not(.#{$prefix}--multi-select--invalid--focused),
   .#{$prefix}--combo-box[data-invalid]:not(.#{$prefix}--multi-select--selected)
     .#{$prefix}--text-input:not(:focus) {
     @include focus-outline('invalid');
@@ -142,6 +142,7 @@ $input-label-weight: 400 !default;
   .#{$prefix}--text-input__field-wrapper--warning,
   .#{$prefix}--text-input__field-wrapper--warning > .#{$prefix}--text-input,
   .#{$prefix}--text-area__wrapper[data-invalid],
+  .#{$prefix}--text-area__wrapper--warn,
   .#{$prefix}--select-input__wrapper[data-invalid],
   .#{$prefix}--select--warning .#{$prefix}--select-input__wrapper,
   .#{$prefix}--time-picker[data-invalid],

package/scss/components/menu/_menu.scss

@@ -27,7 +27,7 @@
 
     position: fixed;
     z-index: z('modal');
-    min-width: 13rem;
+    min-width: 10rem;
     max-width: 18rem;
     padding: $spacing-02 0;
     background-color: $layer;
@@ -35,6 +35,10 @@
     visibility: hidden;
   }
 
+  .#{$prefix}--menu--with-icons {
+    min-width: 12rem;
+  }
+
   .#{$prefix}--menu--open {
     visibility: visible;
 
@@ -62,7 +66,7 @@
     color: $text-primary;
     column-gap: $spacing-03;
     cursor: pointer;
-    grid-template-columns: 0 1fr max-content;
+    grid-template-columns: 1fr max-content;
     padding-inline: $spacing-05;
     transition: background-color $duration-fast-01 motion(standard, productive);
 
@@ -89,6 +93,10 @@
   }
 
   .#{$prefix}--menu-item__icon {
+    display: none;
+  }
+
+  .#{$prefix}--menu--with-icons .#{$prefix}--menu-item__icon {
     display: flex;
   }
 

package/scss/components/menu-button/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2023
+//
+// 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 'menu-button';
+@use 'menu-button';
+
+@include menu-button.menu-button;

package/scss/components/menu-button/_menu-button.scss

@@ -0,0 +1,27 @@
+//
+// Copyright IBM Corp. 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../utilities/convert' as *;
+
+/// Menu Button styles
+/// @access public
+/// @group menu-button
+@mixin menu-button {
+  .#{$prefix}--menu-button__trigger:not(.#{$prefix}--btn--ghost) {
+    min-width: 10rem;
+  }
+
+  .#{$prefix}--menu-button__trigger svg {
+    transition: transform $duration-fast-02 motion(standard, productive);
+  }
+
+  .#{$prefix}--menu-button__trigger--open svg {
+    transform: rotate(180deg);
+  }
+}

package/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,
@@ -327,7 +368,8 @@
     max-width: none;
     height: rem(64px);
     flex: 0 1 50%;
-    padding-top: $spacing-05;
+    align-items: baseline;
+    padding-top: calc($spacing-05 - rem(2px));
     padding-bottom: $spacing-07;
     margin: 0;
   }

package/scss/components/multiselect/_multiselect.scss

@@ -17,12 +17,19 @@
 /// @access public
 /// @group multi-select
 @mixin multiselect {
-  .#{$prefix}--multi-select .#{$prefix}--tag {
-    min-width: auto;
-    margin: 0 $spacing-03 0 0;
+  .#{$prefix}--multi-select .#{$prefix}--list-box__field--wrapper {
+    display: inline-flex;
+    width: 100%;
+    height: calc(100% + 1px);
+    align-items: center;
+  }
+
+  .#{$prefix}--multi-select .#{$prefix}--list-box__field:focus {
+    @include focus-outline('reset');
   }
 
-  .#{$prefix}--multi-select--filterable .#{$prefix}--tag {
+  .#{$prefix}--multi-select .#{$prefix}--tag {
+    min-width: auto;
     margin: 0 $spacing-03 0 $spacing-05;
   }
 
@@ -75,12 +82,16 @@
     outline: none;
   }
 
-  .#{$prefix}--multi-select--filterable--input-focused {
+  .#{$prefix}--multi-select--filterable--input-focused,
+  .#{$prefix}--multi-select
+    .#{$prefix}--list-box__field--wrapper--input-focused {
     @include focus-outline('outline');
   }
 
   .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
-    .#{$prefix}--text-input {
+    .#{$prefix}--text-input,
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selected
+    .#{$prefix}--list-box__field {
     padding-left: 0;
   }
 

package/scss/components/popover/_popover.scss

@@ -8,6 +8,7 @@
 @use '../../config' as *;
 @use '../../theme';
 @use '../../utilities/box-shadow' as *;
+@use '../../utilities/button-reset';
 @use '../../utilities/custom-property';
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
@@ -370,4 +371,51 @@ $popover-caret-height: custom-property.get-var(
     clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
     transform: translate(calc(-1 * $popover-offset + 100%), -50%);
   }
+
+  //-----------------------------------------------------------------------------
+  // Tab Tip Variant
+  //-----------------------------------------------------------------------------
+  .#{$prefix}--popover--tab-tip .#{$prefix}--popover-content {
+    border-radius: 0;
+  }
+
+  .#{$prefix}--popover--tab-tip__button {
+    @include button-reset.reset;
+
+    position: relative;
+    display: inline-flex;
+    width: rem(32px);
+    height: rem(32px);
+    align-items: center;
+    justify-content: center;
+
+    &:focus {
+      @include focus-outline('outline');
+    }
+
+    &:hover {
+      background-color: theme.$layer-hover;
+    }
+  }
+
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--open
+    .#{$prefix}--popover--tab-tip__button {
+    background: theme.$layer;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  }
+
+  .#{$prefix}--popover--tab-tip.#{$prefix}--popover--open
+    .#{$prefix}--popover--tab-tip__button:not(:focus)::after {
+    position: absolute;
+    z-index: z('floating') + 1;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: theme.$layer;
+    content: '';
+  }
+
+  .#{$prefix}--popover--tab-tip__button svg {
+    fill: theme.$icon-primary;
+  }
 }

package/scss/components/radio-button/_radio-button.scss

@@ -153,6 +153,63 @@ $radio-border-width: 1px !default;
     user-select: text;
   }
 
+  // invalid + warn
+  .#{$prefix}--radio-button-group--invalid
+    .#{$prefix}--radio-button
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    border-color: $support-error;
+  }
+
+  .#{$prefix}--radio-button__validation-msg {
+    display: none;
+    align-items: flex-end;
+    margin-top: $spacing-03;
+  }
+
+  .#{$prefix}--radio-button__invalid-icon {
+    margin: 0 rem(1px) 0 rem(3px);
+    fill: $support-error;
+  }
+
+  .#{$prefix}--radio-button__invalid-icon--warning {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--radio-button__invalid-icon--warning path:first-of-type {
+    fill: #000000;
+  }
+
+  .#{$prefix}--radio-button__validation-msg .#{$prefix}--form__helper-text {
+    margin-top: 0;
+  }
+
+  .#{$prefix}--radio-button-group--invalid
+    + .#{$prefix}--radio-button__validation-msg,
+  .#{$prefix}--radio-button-group--warning
+    + .#{$prefix}--radio-button__validation-msg {
+    display: flex;
+  }
+
+  .#{$prefix}--radio-button-group--invalid
+    + .#{$prefix}--radio-button__validation-msg
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--radio-button-group--warning
+    + .#{$prefix}--radio-button__validation-msg
+    .#{$prefix}--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: 100%;
+    margin-top: 0;
+    margin-left: $spacing-03;
+  }
+
+  .#{$prefix}--radio-button-group--invalid
+    + .#{$prefix}--radio-button__validation-msg
+    .#{$prefix}--form-requirement {
+    color: $text-error;
+  }
+
   // Focus
 
   .#{$prefix}--radio-button:focus