@carbon/ibm-products-styles 2.77.0-rc.0 → 2.78.0-rc.0

package/scss/components/SingleAddSelect/_index.scss

@@ -0,0 +1,8 @@
+//
+// 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 './single-add-select';

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -0,0 +1,8 @@
+//
+// 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 '../AddSelect/add-select' as *;

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

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2022, 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.
+//

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

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

package/scss/components/StatusIcon/_index.scss

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

package/scss/components/StatusIcon/_status-icon.scss

@@ -0,0 +1,146 @@
+//
+// Copyright IBM Corp. 2021, 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 'sass:map';
+
+// Standard imports.
+@use '@carbon/styles/scss/colors' as *;
+@use '../../global/styles/project-settings' as *;
+
+$colors: (
+  fatal: (
+    light: $black-100,
+    dark: $gray-50,
+  ),
+  critical: (
+    light: $red-60,
+    dark: $red-50,
+  ),
+  major-warning: (
+    light: $orange-40,
+    dark: $orange-40,
+  ),
+  minor-warning: (
+    light: $yellow-20,
+    dark: $yellow-20,
+  ),
+  undefined: (
+    light: $purple-60,
+    dark: $purple-50,
+  ),
+  unknown: (
+    light: $gray-60,
+    dark: $gray-50,
+  ),
+  normal: (
+    light: $green-60,
+    dark: $green-50,
+  ),
+  info: (
+    light: $blue-60,
+    dark: $blue-50,
+  ),
+  in-progress: (
+    light: $blue-60,
+    dark: $blue-50,
+  ),
+  running: (
+    light: $green-60,
+    dark: $green-50,
+  ),
+  pending: (
+    light: $gray-60,
+    dark: $gray-50,
+  ),
+);
+
+$icons: (
+  'fatal',
+  'critical',
+  'major-warning',
+  'minor-warning',
+  'undefined',
+  'unknown',
+  'normal',
+  'info',
+  'in-progress',
+  'running',
+  'pending'
+);
+$themes: ('light', 'dark');
+
+$block-class: #{$pkg-prefix}--status-icon;
+
+@function carbon-clr($name, $theme: light) {
+  // stylelint-disable-next-line carbon/theme-use
+  $color: map.get(map.get($colors, $name), $theme);
+  @return $color;
+}
+
+@keyframes rotating {
+  0% {
+    transform: scaleY(-1) rotate(360deg);
+  }
+
+  100% {
+    transform: scaleY(-1) rotate(0deg);
+  }
+}
+
+.#{$block-class} {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.#{$block-class}--light.#{$block-class}--light-minor-warning,
+.#{$block-class}--dark.#{$block-class}--dark-minor-warning {
+  // stylelint-disable-next-line carbon/theme-use
+  fill: $yellow-20;
+}
+
+.#{$block-class}--light.#{$block-class}--light-major-warning
+  path:nth-of-type(1),
+.#{$block-class}--dark.#{$block-class}--dark-major-warning path:nth-of-type(1),
+.#{$block-class}--light.#{$block-class}--light-minor-warning
+  path:nth-of-type(1),
+.#{$block-class}--dark.#{$block-class}--dark-minor-warning path:nth-of-type(1) {
+  // stylelint-disable-next-line carbon/theme-use
+  fill: $gray-100;
+}
+
+@each $theme in $themes {
+  @each $icon in $icons {
+    @each $theme-key in $themes {
+      .#{$carbon-prefix}--btn--ghost:not([disabled])
+        .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
+      .#{$carbon-prefix}--btn.#{$carbon-prefix}--btn--icon-only.#{$carbon-prefix}--tooltip__trigger
+        .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon},
+      .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-#{$icon} {
+        @if $icon == in-progress {
+          @media (prefers-reduced-motion: reduce) {
+            animation: none;
+          }
+          // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+          animation: rotating 8000ms infinite linear;
+          // stylelint-disable-next-line carbon/theme-use
+          fill: carbon-clr($icon, $theme);
+        } @else if $icon == running {
+          // stylelint-disable-next-line carbon/theme-use
+          fill: carbon-clr($icon, $theme);
+        } @else {
+          // stylelint-disable-next-line carbon/theme-use
+          fill: carbon-clr($icon, $theme);
+          @media (prefers-reduced-motion) {
+            .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
+              animation: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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/styles/scss/components/inline-loading';
+@use '@carbon/styles/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-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-block-end: $spacing-02;
+}
+.#{$block-class-step}__details {
+  display: flex;
+  align-items: center;
+  min-block-size: $spacing-07;
+}
+.#{$block-class-step}__icon {
+  position: relative;
+  display: flex;
+  inline-size: $spacing-06;
+}
+.#{$block-class-step}__text {
+  @include type-style('body-compact-01');
+
+  color: $text-primary;
+}
+.#{$block-class} .#{$block-class}__button {
+  align-items: center;
+  margin-block-start: $spacing-01;
+  margin-inline-start: $spacing-03;
+}
+.#{$block-class} .#{$block-class}__button:not([disabled]) svg {
+  fill: currentColor;
+  margin-inline-start: $spacing-03;
+}
+
+// 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-inline-end: 0;
+}
+.#{$block-class-step}--active
+  .#{c4p-settings.$carbon-prefix}--inline-loading__animation {
+  margin-inline-end: 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');
+
+  color: $text-error;
+
+  margin-block: to-rem(-2px) to-rem(6px);
+  margin-inline-start: $spacing-06;
+}

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

@@ -0,0 +1,10 @@
+//
+// 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 StringFormatter in this file.
+// StringFormatter uses the following Carbon components:
+@use '@carbon/styles/scss/components/tooltip';

package/scss/components/StringFormatter/_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 './string-formatter';

package/scss/components/StringFormatter/_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 './string-formatter';

package/scss/components/StringFormatter/_string-formatter.scss

@@ -0,0 +1,112 @@
+//
+// 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/type';
+@use '@carbon/styles/scss/spacing' as *;
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/styles/scss/grid';
+
+// StringFormatter uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by StringFormatter
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--string-formatter;
+$popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
+
+.#{$block-class} {
+  display: inline-block;
+
+  &--truncate {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    line-height: inherit;
+    text-overflow: ellipsis;
+    word-break: break-word;
+  }
+
+  button.cds--definition-term {
+    border-block-end: none;
+    letter-spacing: inherit;
+  }
+
+  .cds--popover-container {
+    display: flex;
+  }
+}
+
+.#{$block-class}--content {
+  display: inline-block;
+  text-align: start;
+}
+
+.#{$block-class}--truncate {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.#{$block-class}__tooltip > button {
+  border-width: 0;
+  color: currentColor;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.#{$block-class} .#{$popover-block-class} {
+  margin: 0 auto;
+  max-inline-size: $spacing-05;
+}
+
+.#{$block-class} .#{$popover-block-class}-content {
+  max-inline-size: 20rem;
+}
+
+.#{$block-class} .#{$popover-block-class}--left .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--left-bottom .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--left-top .#{$popover-block-class} {
+  margin: 0;
+}
+
+.#{$block-class} .#{$popover-block-class}--right .#{$popover-block-class},
+.#{$block-class}
+  .#{$popover-block-class}--right-bottom
+  .#{$popover-block-class},
+.#{$block-class} .#{$popover-block-class}--right-top .#{$popover-block-class} {
+  margin-inline: auto 0;
+}
+
+.#{$block-class} .#{$popover-block-class}--top .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--top-left
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--top-right
+  .#{$popover-block-class}-caret {
+  /* stylelint-disable-next-line */
+  inset-block-start: -1px !important;
+}
+
+.#{$block-class}
+  .#{$popover-block-class}--bottom
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--bottom-left
+  .#{$popover-block-class}-caret,
+.#{$block-class}
+  .#{$popover-block-class}--bottom-right
+  .#{$popover-block-class}-caret {
+  /* stylelint-disable-next-line */
+  inset-block-end: -1px !important;
+}

package/scss/components/TagOverflow/_carbon-imports.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.
+//
+
+// Import any Carbon component styles used from TagOverflow in this file.
+// TagOverflow uses the following Carbon components:

package/scss/components/TagOverflow/_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 './tag-overflow';

package/scss/components/TagOverflow/_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 './tag-overflow';

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -0,0 +1,197 @@
+//
+// 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 *;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+
+// Other Carbon settings if needed
+// TODO: @use '@carbon/styles/scss/grid';
+// or
+// TODO: @use '@carbon/styles/scss/grid';
+
+// TagOverflow uses the following Carbon for IBM Products components:
+// TODO: @use(s) of IBM Products component styles used by TagOverflow
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{$pkg-prefix}--tag-overflow;
+$block-class-popover: #{$block-class}-popover;
+$block-class-modal: #{$block-class}-modal;
+
+.#{$block-class}__visible-tags {
+  display: flex;
+}
+
+.#{$block-class}--align-end {
+  justify-content: flex-end;
+}
+
+.#{$block-class}--align-center {
+  justify-content: center;
+}
+
+.#{$block-class}--multiline {
+  flex-wrap: wrap;
+}
+
+.#{$block-class}__item--tag {
+  border: none;
+  margin-block-end: $spacing-03;
+  margin-inline-end: $spacing-03;
+}
+
+.#{$block-class}__item--tag span {
+  display: inline-block;
+  overflow: hidden;
+  max-inline-size: $spacing-12;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{$block-class}__indicator {
+  display: inline-block;
+  max-inline-size: $spacing-09;
+}
+
+.#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
+  white-space: normal;
+}
+
+.#{$block-class-popover} {
+  display: inline-block;
+  vertical-align: bottom;
+
+  .#{$carbon-prefix}--tag.#{$carbon-prefix}--tag--interactive {
+    border: 0;
+  }
+
+  .#{$carbon-prefix}--popover .#{$carbon-prefix}--popover-content {
+    padding: $spacing-05;
+  }
+}
+
+.#{$block-class-popover}--hidden {
+  overflow: hidden;
+  max-inline-size: 0;
+  visibility: hidden;
+}
+
+@include mixins.block-wrap('#{$block-class-popover}__el') {
+  &.#{$block-class-popover}__el {
+    // removes the min width in Carbon
+    min-inline-size: initial;
+    text-align: start;
+  }
+
+  .#{$block-class-popover}__trigger {
+    /* stylelint-disable-next-line declaration-no-important */
+    border: none !important;
+    font-family: inherit;
+  }
+
+  .#{$carbon-prefix}--link:active,
+  .#{$carbon-prefix}--link:active:visited,
+  .#{$carbon-prefix}--link:active:visited:hover {
+    color: $text-inverse;
+  }
+
+  .#{$block-class-popover}__tag-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$block-class-popover}__show-all-tags-link {
+    color: $link-inverse;
+
+    &:hover,
+    &:visited:hover {
+      color: $link-inverse-hover;
+    }
+
+    &:focus {
+      color: $focus-inverse;
+    }
+
+    &:visited {
+      color: $link-inverse;
+    }
+  }
+
+  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--tag
+    .#{$carbon-prefix}--tag {
+    background-color: $background-inverse-hover;
+  }
+
+  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--default,
+  .#{$block-class-popover}__tag-item.#{$block-class-popover}__tag-item--default
+    .#{$carbon-prefix}--tag {
+    @include type.type-style('body-compact-01');
+
+    display: block;
+    overflow: hidden;
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    background-color: inherit;
+    color: inherit;
+    min-block-size: initial;
+    min-inline-size: initial;
+  }
+
+  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon {
+    // undo override by .#{$carbon-prefix}--tooltip button
+    padding: 0;
+  }
+
+  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag--high-contrast {
+    background-color: $background;
+    color: $text-primary;
+  }
+
+  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon:hover {
+    background-color: $background-hover;
+  }
+
+  .#{$block-class-popover}__tag .#{$carbon-prefix}--tag__close-icon:focus {
+    box-shadow: inset 0 0 0 $spacing-01 $focus;
+  }
+}
+
+@include mixins.block-wrap('#{$block-class-modal}') {
+  &.#{$block-class-modal} {
+    // not to be overridden by use in tag set
+    text-align: initial;
+    white-space: initial;
+  }
+
+  .#{$block-class-modal}__container {
+    @include breakpoint(md) {
+      block-size: 90%;
+      max-block-size: 450px;
+    }
+  }
+
+  .#{$block-class-modal}__search {
+    margin-block: $spacing-05 0;
+  }
+
+  .#{$block-class-modal}__header {
+    margin-inline-end: $spacing-05;
+    padding-inline-end: 0;
+  }
+
+  .#{$block-class-modal}__body {
+    .#{$carbon-prefix}--tag {
+      margin-block-end: $spacing-03;
+      margin-inline-end: $spacing-03;
+    }
+  }
+}