@carbon/styles 1.24.0-rc.0 → 1.25.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.24.0-rc.0",
+  "version": "1.25.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,19 +32,19 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/colors": "^11.13.0-rc.0",
-    "@carbon/feature-flags": "^0.13.0-rc.0",
-    "@carbon/grid": "^11.12.0-rc.0",
-    "@carbon/layout": "^11.12.0-rc.0",
-    "@carbon/motion": "^11.10.0-rc.0",
-    "@carbon/themes": "^11.17.0-rc.0",
-    "@carbon/type": "^11.16.0-rc.0",
+    "@carbon/colors": "^11.13.0",
+    "@carbon/feature-flags": "^0.13.0",
+    "@carbon/grid": "^11.12.0",
+    "@carbon/layout": "^11.12.0",
+    "@carbon/motion": "^11.10.0",
+    "@carbon/themes": "^11.17.0",
+    "@carbon/type": "^11.16.0",
     "@ibm/plex": "6.0.0-next.6"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.27.0-rc.0",
+    "@carbon/test-utils": "^10.27.0",
     "autoprefixer": "^10.4.7",
-    "browserslist-config-carbon": "^11.1.0-rc.0",
+    "browserslist-config-carbon": "^11.1.0",
     "css": "^3.0.0",
     "cssnano": "^5.1.9",
     "lodash.isequal": "^4.5.0",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "0554718f48299a56a0525c4fb3e2b0271f13440b"
+  "gitHead": "47966b102beb1310c23bb0fc914a22f639dc08d6"
 }

package/scss/__tests__/theme-test.js

@@ -115,6 +115,7 @@ describe('@carbon/styles/scss/theme', () => {
         "icon-on-color",
         "icon-on-color-disabled",
         "icon-disabled",
+        "icon-interactive",
         "support-error",
         "support-success",
         "support-warning",

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/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-text-area/_fluid-text-area.scss

@@ -91,9 +91,17 @@
     display: none;
   }
 
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
+  .#{$prefix}--text-area--fluid .#{$prefix}--text-area--warn {
+    resize: none;
+  }
+
+  .#{$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 +109,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 +123,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;
   }

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/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/tabs/_tabs.scss

@@ -279,7 +279,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
 
       overflow: hidden;
-      max-width: 10rem;
       padding: $spacing-04 $spacing-05 $spacing-03;
       border-bottom: $tab-underline-color;
       color: $text-secondary;

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

@@ -6,6 +6,7 @@
 //
 
 @use '../form';
+@use '../../colors' as *;
 @use '../../config' as *;
 @use '../../motion' as *;
 @use '../../spacing' as *;
@@ -71,6 +72,15 @@
     fill: $support-error;
   }
 
+  .#{$prefix}--text-area__invalid-icon--warning {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--text-area__invalid-icon--warning path[fill] {
+    fill: $black-100;
+    opacity: 1;
+  }
+
   .#{$prefix}--text-area__counter-alert {
     position: absolute;
     overflow: hidden;