@carbon/ibm-products 2.22.0 → 2.24.0

package/scss/components/CoachmarkBeacon/_coachmark-beacon.scss

@@ -0,0 +1,166 @@
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/motion-easing-use */
+/* stylelint-disable max-nesting-depth */
+//
+// Copyright IBM Corp. 2023, 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/colors' as *;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/motion' as *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// CoachmarkBeacon uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by CoachmarkBeacon
+$beaconAnimationTime: 2s;
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-beacon;
+
+.#{$block-class} {
+  position: relative;
+
+  &-default {
+    .#{$block-class}__target {
+      &::before {
+        display: none;
+      }
+      // the blue dot
+      &::after {
+        position: absolute;
+        top: calc($spacing-01 + $spacing-03);
+        left: calc($spacing-01 + $spacing-03);
+        width: $spacing-04;
+        height: $spacing-04;
+        border-radius: 50%;
+        /* stylelint-disable-next-line carbon/theme-token-use */
+        background-color: $blue-50;
+        content: '';
+      }
+
+      &:focus {
+        outline: transparent;
+
+        &::before {
+          position: absolute;
+          top: 7px;
+          left: 7px;
+          display: block;
+          width: 18px;
+          height: 18px;
+          border-radius: 100%;
+          content: '';
+          /* stylelint-disable-next-line carbon/theme-token-use */
+          outline: $spacing-01 $focus solid;
+        }
+      }
+    }
+  }
+  .#{$block-class}__target {
+    // the hit area
+    position: absolute;
+    top: calc(-1 * $spacing-05);
+    left: calc(-1 * $spacing-05);
+    width: $spacing-07;
+    height: $spacing-07;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+
+    &[aria-expanded='true'] {
+      circle {
+        animation: none;
+      }
+    }
+  }
+
+  &__center {
+    position: absolute;
+    z-index: 6900;
+    top: calc(($spacing-06 - $spacing-01) * -1);
+    left: calc(($spacing-06 - $spacing-01) * -1);
+    width: $spacing-11;
+    height: $spacing-11;
+    pointer-events: none;
+
+    circle {
+      /* stylelint-disable-next-line carbon/motion-duration-use */
+      animation: ripple $beaconAnimationTime infinite;
+      fill: $support-info;
+      fill-opacity: 0;
+      -webkit-mask-image: none;
+      mask-image: none;
+      stroke: $support-info;
+      stroke-opacity: 0;
+      stroke-width: 1px;
+      transition-timing-function: motion (exit, productive);
+      @media (prefers-reduced-motion) {
+        animation: none;
+      }
+    }
+  }
+}
+@keyframes ripple {
+  0% {
+    fill-opacity: 0;
+    r: 1px;
+    stroke-opacity: 0;
+    transition-timing-function: motion(entrance, productive);
+  }
+
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}
+
+@keyframes ring-ripple {
+  0% {
+    fill-opacity: 0;
+    r: 12px;
+    stroke-opacity: 0;
+    transition-timing-function: motion(entrance, productive);
+  }
+
+  31% {
+    fill-opacity: 0.2;
+    stroke-opacity: 1;
+  }
+
+  62% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+
+  100% {
+    fill-opacity: 0;
+    r: 32px;
+    stroke-opacity: 0;
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-beacon';

package/scss/components/CoachmarkBeacon/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-beacon';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 CoachmarkButton in this file.
+// CoachmarkButton uses the following Carbon components:

package/scss/components/CoachmarkButton/_coachmark-button.scss

@@ -0,0 +1,25 @@
+//
+// Copyright IBM Corp. 2023, 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';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// CoachmarkButton uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by CoachmarkButton
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-button;
+
+// .#{$block-class} {
+//   // TODO: Styles.
+// }

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-button';

package/scss/components/CoachmarkButton/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-button';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 CoachmarkFixed in this file.
+// CoachmarkFixed uses the following Carbon components:

package/scss/components/CoachmarkFixed/_coachmark-fixed.scss

@@ -0,0 +1,25 @@
+//
+// Copyright IBM Corp. 2023, 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';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// CoachmarkFixed uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by CoachmarkFixed
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-fixed;
+
+// .#{$block-class} {
+//   // TODO: Styles.
+// }

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-fixed';

package/scss/components/CoachmarkFixed/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-fixed';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 CoachmarkOverlayElement in this file.
+// CoachmarkOverlayElement uses the following Carbon components:

package/scss/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss

@@ -0,0 +1,52 @@
+/* stylelint-disable max-nesting-depth */
+//
+// Copyright IBM Corp. 2023, 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 *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// CoachmarkOverlayElement uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by CoachmarkOverlayElement
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-element;
+$carousel-item-class: #{c4p-settings.$pkg-prefix}--carousel__item;
+.#{$block-class} {
+  padding: $spacing-01 $spacing-05 0;
+
+  &__content {
+    padding-bottom: $spacing-05;
+  }
+
+  &__title {
+    @include type-style('productive-heading-02');
+
+    margin: 0 0 $spacing-03;
+  }
+
+  &__body {
+    @include type-style('body-long-01');
+  }
+
+  &__button {
+    margin-bottom: 0;
+  }
+}
+.#{$carousel-item-class} {
+  .#{$block-class} {
+    &__button {
+      margin-bottom: $spacing-05;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-overlay-element';

package/scss/components/CoachmarkOverlayElement/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-overlay-element';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 CoachmarkOverlayElements in this file.
+// CoachmarkOverlayElements uses the following Carbon components:

package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss

@@ -0,0 +1,47 @@
+/* stylelint-disable max-nesting-depth */
+//
+// Copyright IBM Corp. 2023, 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/layout/scss/convert' as *;
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing' as *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// CoachmarkOverlayElements uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by CoachmarkOverlayElements
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay-elements;
+
+.#{$block-class} {
+  &__element-stepped-media {
+    /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
+    height: to-rem(128px);
+    margin-bottom: $spacing-05;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 $spacing-05 $spacing-05;
+  }
+
+  &--controls-progress {
+    margin-right: auto;
+    justify-self: flex-start;
+    @include type.type-style('helper-text-01');
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-overlay-elements';

package/scss/components/CoachmarkOverlayElements/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-overlay-elements';

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 CoachmarkStack in this file.
+// CoachmarkStack uses the following Carbon components:

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -0,0 +1,95 @@
+//
+// Copyright IBM Corp. 2023, 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 max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/react/scss/motion' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/react/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/react/scss/grid';
+
+// CoachmarkStack uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by CoachmarkStack
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+
+$elements-block-class: #{c4p-settings.$pkg-prefix}--coachmark-stack-element;
+$overlay-class: #{c4p-settings.$pkg-prefix}--coachmark-overlay;
+$stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
+
+.#{$elements-block-class} {
+  $block: &;
+
+  position: fixed;
+  z-index: 5901;
+  right: $spacing-05;
+  bottom: -100%;
+  //opacity: 0;
+  transform: translateY(100%);
+  visibility: hidden;
+
+  &--is-mounted {
+    bottom: 0;
+    /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
+    transition: transform $duration-moderate-02 motion(exit, productive);
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+
+  &--is-visible {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+
+  // Stack the level-one item behind the level-two item.
+  &--is-stacked {
+    bottom: 0;
+    overflow: hidden;
+    pointer-events: none;
+    transform: perspective(carbon--mini-units(18))
+      translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
+    transform-origin: top center;
+    visibility: visible;
+
+    &__light {
+      /* stylelint-disable-next-line carbon/theme-token-use */
+      background-color: $gray-90;
+    }
+
+    &__dark {
+      /* stylelint-disable-next-line carbon/theme-token-use */
+      background-color: $button-tertiary-active;
+    }
+  }
+}
+
+// ALL SUBSEQUENT ITEMS ARE THE "CHILD" STACK ITEMS
+.#{$elements-block-class} ~ .#{$elements-block-class} {
+  z-index: 5902;
+}
+
+// SPECIFIC TO THE HOME ELEMENT
+.#{$stack-home-class} {
+  &__nav-links {
+    margin-top: $spacing-04;
+    margin-left: calc(-1 * $spacing-05);
+  }
+
+  &__icon-idea {
+    margin-bottom: $spacing-03;
+  }
+}

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

@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-stack';

package/scss/components/CoachmarkStack/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2023, 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 './coachmark-stack';

package/scss/components/CreateSidePanel/_create-side-panel.scss

@@ -24,25 +24,6 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
   padding-right: calc(20% - #{$spacing-05});
 }
 
-@each $size, $value in side-panel-vars.$side-panel-sizes {
-  .#{$create-side-panel-block-class}.#{$side-panel-block-class}__container--#{$size}
-    .#{$side-panel-block-class}__title-text {
-    width: calc(#{$value} - #{$spacing-05});
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
-    margin-bottom: $spacing-02;
-  }
-  .#{$create-side-panel-block-class}.#{$side-panel-block-class}__container--#{$size}
-    .#{$side-panel-block-class}__subtitle-text {
-    width: calc(#{$value} - #{$spacing-05});
-    // stylelint-disable-next-line carbon/layout-token-use
-    padding-right: calc((#{$value} * 0.2) - #{$spacing-05});
-    padding-bottom: $spacing-05;
-    border-bottom: 1px solid $layer-accent-01;
-    color: $text-secondary;
-  }
-}
-
 .#{c4p-settings.$carbon-prefix}--form.#{$create-side-panel-block-class}__form {
   padding-top: $spacing-05;
 }
@@ -70,24 +51,6 @@ $side-panel-block-class: #{c4p-settings.$pkg-prefix}--side-panel;
   display: none;
 }
 
-.#{$create-side-panel-block-class}__title {
-  @include type.type-style('heading-03');
-
-  margin-bottom: $spacing-02;
-}
-
-.#{$create-side-panel-block-class}__subtitle {
-  @include type.type-style('body-compact-01');
-
-  margin-bottom: $spacing-03;
+.#{$create-side-panel-block-class} .#{$side-panel-block-class}__subtitle-text {
   color: $text-secondary;
 }
-.#{$side-panel-block-class}
-  .#{$create-side-panel-block-class}__actions-container {
-  position: absolute;
-  z-index: 4;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  margin-bottom: 0;
-}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -6,6 +6,7 @@
 //
 
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
 @use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/react/scss/components/button/tokens' as *;
@@ -157,6 +158,16 @@
   background-color: $background;
 }
 
+.#{$block-class} th.#{$block-class}__with-slug {
+  @include ai-gradient('top', 100%);
+}
+
+.#{$block-class}
+  th.#{$block-class}__with-slug
+  .#{c4p-settings.$carbon-prefix}--slug {
+  margin-left: $spacing-03;
+}
+
 .#{$block-class}__grid-container {
   display: block;
   width: 100%;
@@ -243,6 +254,10 @@
     white-space: initial;
   }
 
+  .#{$block-class}__defaultStringRenderer.#{$block-class}__defaultStringRenderer--slug {
+    width: fit-content;
+  }
+
   .#{$block-class}__expanded-row {
     display: flex;
     overflow: hidden;