@carbon/styles 1.14.0 → 1.15.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.14.0",
+  "version": "1.15.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -59,5 +59,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "dcf802a75caf0201ac831826f611d24dbe508859"
+  "gitHead": "79b7a1a788658d921f399232fea33e3c40eb939f"
 }

package/scss/components/_index.scss

@@ -12,6 +12,7 @@
 @use 'checkbox';
 @use 'code-snippet';
 @use 'combo-box';
+@use 'contained-list';
 @use 'content-switcher';
 @use 'copy-button';
 @use 'data-table';
@@ -22,8 +23,10 @@
 @use 'date-picker';
 @use 'dropdown';
 @use 'file-uploader';
-@use 'fluid-text-input';
+@use 'fluid-dropdown';
+@use 'fluid-list-box';
 @use 'fluid-text-area';
+@use 'fluid-text-input';
 @use 'form';
 @use 'inline-loading';
 @use 'link';

package/scss/components/accordion/_accordion.scss

@@ -51,6 +51,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__item {
+    display: list-item;
     overflow: visible;
     border-top: 1px solid $border-subtle;
     transition: all $duration-fast-02 motion(standard, productive);
@@ -102,6 +103,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
   // Size styles
   .#{$prefix}--accordion--lg .#{$prefix}--accordion__heading {
     min-height: convert.rem(48px);
+    align-items: center;
   }
 
   .#{$prefix}--accordion--sm .#{$prefix}--accordion__heading {
@@ -155,6 +157,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     z-index: 1;
     width: 100%;
+    padding-right: $spacing-05;
     margin: $title-margin;
     text-align: left;
   }

package/scss/components/contained-list/_contained-list.scss

@@ -0,0 +1,174 @@
+//
+// 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.
+//
+
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../../utilities/button-reset';
+
+/// Contained List styles
+/// @access public
+/// @group contained-list
+@mixin contained-list {
+  .#{$prefix}--contained-list__header {
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    display: flex;
+    align-items: center;
+    padding-inline: $spacing-05;
+  }
+
+  .#{$prefix}--contained-list__label {
+    width: 100%;
+  }
+
+  // "On Page" variant
+
+  .#{$prefix}--contained-list--on-page + .#{$prefix}--contained-list--on-page {
+    margin-block-start: $spacing-05;
+  }
+
+  .#{$prefix}--contained-list--on-page .#{$prefix}--contained-list__header {
+    @include type-style('heading-compact-01');
+
+    height: $spacing-09;
+    border-bottom: 1px solid $border-subtle;
+    background-color: $background;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--layer-two
+    .#{$prefix}--contained-list--on-page
+    .#{$prefix}--contained-list__header {
+    background-color: $layer-01;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--contained-list--on-page
+    .#{$prefix}--contained-list__header {
+    background-color: $layer-02;
+  }
+
+  // "Disclosed" variant
+
+  .#{$prefix}--contained-list--disclosed .#{$prefix}--contained-list__header {
+    @include type-style('label-01');
+
+    height: $spacing-07;
+    background-color: $layer;
+    color: $text-secondary;
+  }
+
+  // List item
+
+  .#{$prefix}--contained-list-item {
+    position: relative;
+  }
+
+  .#{$prefix}--contained-list-item:not(:first-of-type) {
+    margin-top: -1px;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content {
+    @include button-reset.reset;
+
+    text-align: start;
+    transition: background-color $duration-moderate-01
+      motion(standard, productive);
+  }
+
+  .#{$prefix}--contained-list-item__content,
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content {
+    @include type-style('body-01');
+
+    padding: calc(#{$spacing-05} - #{rem(2px)}) $spacing-05;
+    color: $text-primary;
+  }
+
+  .#{$prefix}--contained-list-item:not(:last-of-type)::before {
+    position: absolute;
+    right: $spacing-05;
+    bottom: 0;
+    left: $spacing-05;
+    height: 1px;
+    background-color: $border-subtle;
+    content: '';
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:not(:disabled):hover {
+    background-color: $layer-hover;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:not(:disabled):active {
+    background-color: $layer-active;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:disabled {
+    color: $text-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:focus {
+    outline: none;
+  }
+
+  .#{$prefix}--contained-list-item--clickable
+    .#{$prefix}--contained-list-item__content:focus::after {
+    @include focus-outline('outline');
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+  }
+
+  .#{$prefix}--contained-list-item--with-action
+    .#{$prefix}--contained-list-item__content {
+    padding-inline-end: $spacing-10;
+  }
+
+  .#{$prefix}--contained-list__action,
+  .#{$prefix}--contained-list-item__action {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    justify-content: flex-end;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--contained-list__action > *,
+  .#{$prefix}--contained-list-item__action > * {
+    pointer-events: all;
+  }
+
+  .#{$prefix}--contained-list-item--with-icon
+    .#{$prefix}--contained-list-item__content {
+    display: grid;
+    column-gap: $spacing-04;
+    grid-template-columns: 1rem 1fr;
+  }
+
+  .#{$prefix}--contained-list-item__icon {
+    display: inline-flex;
+    padding-top: $spacing-01;
+  }
+}

package/scss/components/contained-list/_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 'contained-list';
+@use 'contained-list';
+
+@include contained-list.contained-list;

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

@@ -32,6 +32,7 @@
   }
 
   .#{$prefix}--data-table-content {
+    display: block;
     overflow-x: auto;
   }
 

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

@@ -414,7 +414,10 @@
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn:disabled {
-    color: $text-on-color-disabled;
+    border-color: transparent;
+    background-color: transparent;
+    color: $text-on-color;
+    opacity: 0.5;
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon {

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

@@ -0,0 +1,22 @@
+//
+// 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 Dropdown
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../dropdown';
+@use '../fluid-list-box';
+
+@mixin fluid-dropdown {
+  // Style overrides can be added here as needed
+}

package/scss/components/fluid-dropdown/_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-dropdown';
+@use 'fluid-dropdown';
+
+@include fluid-dropdown.fluid-dropdown;

package/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -0,0 +1,217 @@
+//
+// 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 List-box
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../../utilities/skeleton' as *;
+
+@mixin fluid-list-box {
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper {
+    position: relative;
+    height: 100%;
+    background: $field;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box {
+    min-height: rem(64px);
+    padding: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--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}--list-box__wrapper--fluid .#{$prefix}--list-box__field {
+    padding-top: rem(33px);
+    padding-bottom: rem(13px);
+    padding-left: $spacing-05;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__menu-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box__wrapper--fluid--condensed)
+    .#{$prefix}--list-box__menu-item {
+    height: $spacing-10;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid:not(.#{$prefix}--list-box__wrapper--fluid--condensed)
+    .#{$prefix}--list-box__menu-item__selected-icon {
+    top: rem(20px);
+  }
+
+  // Disabled styles
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--label--disabled
+    .#{$prefix}--toggletip-label {
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--label--disabled
+    .#{$prefix}--toggletip-button {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--label--disabled
+    .#{$prefix}--toggletip-button
+    svg {
+    fill: $icon-disabled;
+  }
+
+  // Focus styles
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus {
+    @include focus-outline('outline');
+
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__field:focus {
+    outline: none;
+    outline-offset: 0;
+  }
+
+  // Invalid / Warning styles
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:not(.#{$prefix}--list-box__wrapper--fluid--focus) {
+    @include focus-outline('invalid');
+
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--focus
+    .#{$prefix}--list-box:not(.#{$prefix}--list-box--invalid) {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box,
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box__field:focus {
+    outline: none;
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:focus-within {
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box,
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box--warning {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--form-requirement,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning
+    ~ .#{$prefix}--form-requirement {
+    padding: rem(8px) 4rem rem(8px) $spacing-05;
+    margin-top: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
+    .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__invalid-icon {
+    top: rem(81px);
+    right: $spacing-05;
+    pointer-events: none;
+  }
+
+  // Error + Warning divider
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--list-box__divider {
+    display: none;
+    transition: border-color $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--invalid
+    ~ .#{$prefix}--list-box__divider,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning
+    ~ .#{$prefix}--list-box__divider {
+    display: block;
+    border: none;
+    border-bottom: 1px solid $border-subtle;
+    margin: 0 1rem;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--invalid:hover
+    ~ .#{$prefix}--list-box__divider,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning:hover
+    ~ .#{$prefix}--list-box__divider {
+    border-color: transparent;
+  }
+
+  // direction - top
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--up
+    .#{$prefix}--list-box__menu {
+    bottom: $spacing-10;
+  }
+
+  // Skeleton styles
+  .#{$prefix}--list-box__wrapper--fluid .#{$prefix}--skeleton {
+    border-bottom: 1px solid $skeleton-element;
+    background: $skeleton-background;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--skeleton
+    .#{$prefix}--list-box__field {
+    position: absolute;
+    bottom: rem(13px);
+    left: $spacing-05;
+    width: 50%;
+    height: $spacing-05;
+    padding: 0;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--skeleton
+    .#{$prefix}--list-box__label {
+    position: absolute;
+    top: rem(13px);
+    left: $spacing-05;
+    width: 25%;
+    height: $spacing-05;
+  }
+
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--skeleton
+    .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--skeleton
+    .#{$prefix}--list-box__label {
+    animation: 3000ms ease-in-out skeleton infinite;
+    background: $skeleton-element;
+  }
+}

package/scss/components/fluid-list-box/_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-list-box';
+@use 'fluid-list-box';
+
+@include fluid-list-box.fluid-list-box;

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

@@ -141,4 +141,25 @@
     width: rem(32px);
     height: rem(32px);
   }
+
+  // Skeleton
+  .#{$prefix}--text-input--fluid__skeleton {
+    position: relative;
+    height: 100%;
+    padding: $spacing-05;
+    border-bottom: 1px solid $skeleton-element;
+    background: $skeleton-background;
+  }
+
+  .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--skeleton {
+    height: 0.5rem;
+  }
+
+  .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--label {
+    margin-bottom: $spacing-04;
+  }
+
+  .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--text-input {
+    width: 80%;
+  }
 }

package/scss/components/list-box/_list-box.scss

@@ -812,6 +812,7 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box input[type='text'] {
     min-width: 0;
     background-color: inherit;
+    text-overflow: ellipsis;
   }
 
   // Windows HCM fix

package/scss/components/menu/_menu.scss

@@ -46,6 +46,7 @@
 
   .#{$prefix}--menu-option {
     position: relative;
+    display: list-item;
     // $size-sm
     height: 2rem;
     background-color: $layer;
@@ -123,6 +124,7 @@
   }
 
   .#{$prefix}--menu-divider {
+    display: list-item;
     width: 100%;
     height: 1px;
     margin: $spacing-02 0;

package/scss/components/modal/_modal.scss

@@ -62,9 +62,15 @@
     .#{$prefix}--dropdown-list,
     .#{$prefix}--number input[type='number'],
     .#{$prefix}--date-picker__input,
-    .#{$prefix}--multi-select {
+    .#{$prefix}--multi-select,
+    .#{$prefix}--number__control-btn::before,
+    .#{$prefix}--number__control-btn::after {
       background-color: $field-02;
     }
+
+    .#{$prefix}--number__rule-divider {
+      background-color: $border-subtle-02;
+    }
   }
 
   .#{$prefix}--modal.is-visible .#{$prefix}--modal-container {
@@ -372,8 +378,10 @@
     overflow: hidden;
   }
 
-  .#{$prefix}--body--with-modal-open .#{$prefix}--tooltip,
-  .#{$prefix}--body--with-modal-open .#{$prefix}--overflow-menu-options {
+  .#{$prefix}--body--with-modal-open .#{$prefix}--modal .#{$prefix}--tooltip,
+  .#{$prefix}--body--with-modal-open
+    .#{$prefix}--modal
+    .#{$prefix}--overflow-menu-options {
     z-index: z('modal');
   }
 

package/scss/components/progress-indicator/_progress-indicator.scss

@@ -106,21 +106,23 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     cursor: pointer;
   }
 
-  .#{$prefix}--progress-label:focus {
-    box-shadow: 0 rem(3px) 0 0 $link-primary;
-    color: $link-primary;
-    outline: none;
-  }
-
   .#{$prefix}--progress--space-equal .#{$prefix}--progress-label {
     max-width: 100%;
     margin-right: 0.75rem;
   }
 
-  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable)
+  .#{$prefix}--progress-step-button:not(.#{$prefix}--progress-step-button--unclickable) {
+    &:focus {
+      outline: none;
+    }
+    &:focus-visible .#{$prefix}--progress-label {
+      color: $focus;
+      outline: rem(1px) solid $focus;
+    }
     .#{$prefix}--progress-label:active {
-    box-shadow: 0 rem(3px) 0 0 $text-primary;
-    color: $text-primary;
+      box-shadow: 0 rem(1px) 0 0 $text-primary;
+      color: $text-primary;
+    }
   }
 
   //OVERFLOW STYLING
@@ -246,12 +248,6 @@ $progress-indicator-bar-width: 1px inset transparent !default;
       cursor: not-allowed;
     }
 
-    .#{$prefix}--progress-label:focus,
-    .#{$prefix}--progress-label:active {
-      box-shadow: none;
-      outline: none;
-    }
-
     .#{$prefix}--progress-line {
       cursor: not-allowed;
     }

package/scss/components/toggle/_toggle.scss

@@ -21,6 +21,7 @@
 /// @group toggle
 @mixin toggle {
   .#{$prefix}--toggle {
+    display: inline-block;
     user-select: none;
   }
 
@@ -41,7 +42,7 @@
   }
 
   .#{$prefix}--toggle__appearance {
-    display: grid;
+    display: inline-grid;
     align-items: center;
     column-gap: $spacing-03;
     cursor: pointer;