@carbon/ibm-products 2.28.1 → 2.29.0-alpha.10

package/scss/components/DescriptionList/_description-list.scss

@@ -0,0 +1,103 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/theme' as *;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--description-list;
+$carbon-block-class: #{c4p-settings.$carbon-prefix}--structured-list;
+
+.#{$block-class} .#{$carbon-block-class} {
+  margin-bottom: $spacing-07;
+}
+
+// ROW /////////////////////////
+.#{$block-class} .#{$block-class}__body .#{$block-class}__row {
+  border-block-end-width: 0;
+  border-block-start-width: 0;
+}
+
+.#{$block-class}
+  .#{$carbon-block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:first-child {
+  border-block-start-width: 0;
+}
+.#{$block-class}
+  .#{$carbon-block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:last-child {
+  border-block-end-width: 0;
+}
+
+.#{$block-class}--bordered .#{$block-class}__body .#{$block-class}__row {
+  border-block-start-width: 1px;
+}
+
+// CELL /////////////////////////
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell {
+  @include type-style('body-01');
+
+  padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell:first-of-type {
+  width: 1%;
+  padding-left: 0;
+  white-space: nowrap;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell:last-of-type {
+  padding-right: 0;
+  color: $text-primary;
+}
+
+.#{$block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:first-of-type
+  > .#{$block-class}__cell {
+  padding-top: 0;
+}
+
+.#{$block-class}
+  .#{$block-class}__body
+  .#{$block-class}__row:last-of-type
+  > .#{$block-class}__cell {
+  padding-bottom: 0;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul {
+  list-style: none;
+}
+
+.#{$block-class} .#{$block-class}__body .#{$block-class}__cell ul > li {
+  margin-bottom: $spacing-03;
+}
+
+// LG SIZE /////////////////////////
+.#{$block-class}--lg .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-05 $spacing-06 $spacing-05 $spacing-05;
+}
+
+// SM SIZE /////////////////////////
+.#{$block-class}--sm .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-02 $spacing-06 $spacing-02 $spacing-02;
+}
+
+// XS SIZE /////////////////////////
+.#{$block-class}--xs .#{$block-class}__body .#{$block-class}__cell {
+  padding: $spacing-02;
+}
+
+.#{$block-class} .#{$carbon-block-class}-row--focused-within {
+  outline: none;
+}

package/scss/components/DescriptionList/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './carbon-imports';
+@use './description-list';

package/scss/components/DescriptionList/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './description-list';

package/scss/components/SidePanel/_side-panel.scss

@@ -356,11 +356,16 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   }
 
   .#{$block-class}__slug-and-close {
-    position: absolute;
+    position: fixed;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
     right: 0;
     display: flex;
+
+    /* stylelint-disable-next-line max-nesting-depth */
+    @media (prefers-reduced-motion) {
+      position: absolute;
+    }
   }
 
   .#{$block-class}__actions-container {

package/scss/components/StatusIndicator/_carbon-imports.scss

@@ -0,0 +1,12 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+// Import any Carbon component styles used from StatusIndicator in this file.
+// StatusIndicator uses the following Carbon components:
+// InlineLoading, Button
+@use '@carbon/react/scss/components/inline-loading';
+@use '@carbon/react/scss/components/button';

package/scss/components/StatusIndicator/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './carbon-imports';
+@use './status-indicator';

package/scss/components/StatusIndicator/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// 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 './status-indicator';

package/scss/components/StatusIndicator/_status-indicator.scss

@@ -0,0 +1,93 @@
+//
+// Copyright IBM Corp. 2024, 2024
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable function-no-unknown */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+
+// Other Carbon settings if needed
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--status-indicator;
+$block-class-step: #{c4p-settings.$pkg-prefix}--status-indicator-step;
+
+// Default styling
+.#{$block-class}__title {
+  @include type-style('heading-02');
+
+  margin-bottom: $spacing-02;
+}
+.#{$block-class-step}__details {
+  display: flex;
+  min-height: $spacing-07;
+  align-items: center;
+}
+.#{$block-class-step}__icon {
+  position: relative;
+  display: flex;
+  width: $spacing-06;
+}
+.#{$block-class-step}__text {
+  @include type-style('body-compact-01');
+
+  color: $text-primary;
+}
+.#{$block-class} .#{$block-class}__button {
+  align-items: center;
+  margin-top: $spacing-01;
+  margin-left: $spacing-03;
+}
+.#{$block-class} .#{$block-class}__button:not([disabled]) svg {
+  margin-left: $spacing-03;
+  fill: currentColor;
+}
+
+// Text
+.#{$block-class-step}--inactive .#{$block-class-step}__text {
+  color: $text-secondary;
+}
+.#{$block-class-step}--inactive svg {
+  fill: $icon-primary;
+}
+
+// Icons
+//
+// Override <InlineLoading's> large margins.
+.#{$block-class-step}--active .#{$block-class-step}__icon {
+  margin-right: 0;
+}
+.#{$block-class-step}--active
+  .#{c4p-settings.$carbon-prefix}--inline-loading__animation {
+  margin-right: to-rem(7px);
+}
+// /Override
+//
+.#{$block-class-step}--error svg {
+  fill: $support-error;
+}
+.#{$block-class-step}--finished svg {
+  fill: $support-success;
+}
+
+// Error message
+.#{$block-class-step}__error-message {
+  @include type-style('label-01');
+
+  margin-top: to-rem(-2px);
+  margin-bottom: to-rem(6px);
+  margin-left: $spacing-06;
+  color: $text-error;
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -23,19 +23,39 @@
 $block-class: #{$pkg-prefix}--tearsheet;
 
 // stylelint-disable-next-line carbon/theme-token-use
-$overlay-color: $gray-100;
-
 $motion-duration: $duration-moderate-02;
 
 @include block-wrap($block-class) {
   &.#{$block-class} {
+    --overlay-color: #{$overlay};
+    --overlay-opacity: 1;
+
+    &::before {
+      position: absolute;
+      display: block;
+      background: var(--overlay-color);
+      content: '';
+      inset: 0;
+      opacity: var(--overlay-opacity);
+
+      transition: background-color $motion-duration motion(exit, expressive),
+        opacity $motion-duration motion(exit, expressive);
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+
+    &.#{$block-class}.#{$block-class} {
+      /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
+      background: initial;
+    }
+
     z-index: utilities.z('modal') + 1;
     align-items: flex-end;
     color: $text-primary;
     // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
-    transition: visibility 0s linear $motion-duration,
-      background-color $motion-duration motion(exit, expressive),
-      opacity $motion-duration motion(exit, expressive);
+    transition: visibility 0s linear $motion-duration;
     --#{$block-class}--stacking-scale-factor-single: 0.95;
     --#{$block-class}--stacking-scale-factor-double: 0.9;
   }
@@ -53,27 +73,26 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--stacked-1-of-2 {
+    --overlay-opacity: 0.67;
+
     z-index: utilities.z('modal') - 1;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.33);
   }
 
   &.#{$block-class}--stacked-1-of-3 {
+    --overlay-opacity: 0.22;
+
     z-index: utilities.z('modal') - 2;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.11);
   }
 
   &.#{$block-class}--stacked-2-of-3 {
+    --overlay-opacity: 0.5;
+
     z-index: utilities.z('modal') - 1;
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.25);
   }
 
   &.#{$block-class}--stacked-2-of-2,
   &.#{$block-class}--stacked-3-of-3 {
-    // stylelint-disable-next-line carbon/theme-token-use
-    background-color: rgba($overlay-color, 0.25);
+    --overlay-opacity: 0.5;
   }
 
   .#{$block-class}__container {
@@ -238,12 +257,14 @@ $motion-duration: $duration-moderate-02;
   &.#{$block-class}--wide
     .#{$block-class}__header.#{$block-class}__header--with-close-icon,
   &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
-    padding-right: $spacing-11;
+    padding-inline-end: $spacing-11;
   }
 
   &.#{$block-class}--wide.#{$block-class}--has-slug
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
-    margin-right: $spacing-09;
+    /* spacing 11 plus additional space for slug/close */
+    /* stylelint-disable-next-line carbon/layout-token-use */
+    padding-inline-end: calc(#{$spacing-11 + $spacing-09});
   }
 
   &.#{$block-class}--narrow .#{$block-class}__header-description {
@@ -367,6 +388,11 @@ $motion-duration: $duration-moderate-02;
     background: $background;
   }
 
+  &.#{$block-class}--has-slug {
+    /* stylelint-disable-next-line carbon/theme-token-use */
+    --overlay-color: #{$ai-overlay};
+  }
+
   &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
     .#{$carbon-prefix}--slug {
     inset-inline-end: 0;

package/scss/components/_index-with-carbon.scss

@@ -60,7 +60,9 @@
 @use './CoachmarkOverlayElements/index-with-carbon' as *;
 @use './CoachmarkStack/index-with-carbon' as *;
 @use './DelimitedList/index-with-carbon' as *;
+@use './DescriptionList/index-with-carbon' as *;
 @use './FullPageError/index-with-carbon' as *;
 @use './SearchBar/index-with-carbon' as *;
 @use './StringFormatter/index-with-carbon' as *;
 @use './UserAvatar/index-with-carbon' as *;
+@use './StatusIndicator/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -68,7 +68,9 @@
 @use './InterstitialScreenView';
 @use './InterstitialScreenViewModule';
 @use './DelimitedList';
+@use './DescriptionList';
 @use './FullPageError';
 @use './SearchBar';
 @use './StringFormatter';
 @use './UserAvatar';
+@use './StatusIndicator';