@carbon/ibm-products 2.38.0 → 2.39.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.38.0",
+  "version": "2.39.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -92,7 +92,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.36.0",
+    "@carbon/ibm-products-styles": "^2.37.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -116,5 +116,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "c3f7c28b58bf5412337cca1a1d3f98a250522294"
+  "gitHead": "90e3441d8fdfc65023988bd734089c72fba0799b"
 }

package/scss/components/GetStartedCard/_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 GetStartedCard in this file.
+// GetStartedCard uses the following Carbon components:

package/scss/components/GetStartedCard/_get-started-card.scss

@@ -0,0 +1,135 @@
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable max-nesting-depth */
+//
+// 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/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--card;
+
+.#{$block-class}__get-started {
+  border-width: 1px;
+  border-style: solid;
+  background: linear-gradient(to bottom, $purple-80 40%, $purple-70);
+  border-image: linear-gradient(to bottom, $purple-60, $purple-50) 1;
+  color: $text-on-color;
+
+  &:hover {
+    background: linear-gradient($purple-70-hover, $purple-70-hover);
+  }
+
+  &:focus {
+    border: 2px solid $focus;
+    outline: 1px solid $focus-inset;
+    outline-offset: -3px;
+  }
+
+  .#{$block-class}__sequence {
+    @include type-style('heading-05');
+
+    padding-top: $spacing-05;
+    padding-left: $spacing-05;
+  }
+
+  .#{$block-class}__status {
+    position: absolute;
+    z-index: 2;
+    top: $spacing-05;
+    right: $spacing-05;
+  }
+
+  .#{$block-class}__header-body-container {
+    display: flex;
+  }
+
+  .#{$block-class}__header {
+    padding-right: $spacing-09;
+
+    @include breakpoint-down(lg) {
+      padding-bottom: 0;
+    }
+  }
+
+  .#{$block-class}__body {
+    @include breakpoint-down(lg) {
+      padding: 0;
+    }
+  }
+  .#{$block-class}__media {
+    align-content: center;
+
+    @include breakpoint-down(lg) {
+      display: none;
+    }
+  }
+
+  .#{$block-class}__pictogram ~ .#{$block-class}__content-container {
+    .#{$block-class}__media {
+      /* stylelint-disable-next-line function-no-unknown */
+      margin-top: to-rem(-50px);
+      margin-bottom: -$spacing-09;
+    }
+  }
+
+  .#{$block-class}__sequence ~ .#{$block-class}__content-container {
+    .#{$block-class}__media {
+      /* stylelint-disable-next-line function-no-unknown */
+      margin-top: to-rem(-56px);
+      margin-bottom: -$spacing-09;
+    }
+  }
+
+  //meta-data
+  .#{$block-class}__actions {
+    padding: $spacing-05;
+    gap: $spacing-04;
+    @include type-style('label-01');
+
+    .#{$block-class}__icon {
+      display: flex;
+      padding: 0;
+      margin-right: 0;
+    }
+
+    .#{$block-class}__icon svg {
+      margin-right: $spacing-02;
+    }
+
+    .#{$block-class}__icon:hover {
+      background: none;
+    }
+  }
+
+  .#{$block-class}__footer {
+    position: relative;
+    z-index: 1;
+    justify-content: space-between;
+    border: none;
+
+    .#{$block-class}__action-icon {
+      display: flex;
+      align-self: center;
+      padding-right: $spacing-05;
+    }
+  }
+}
+.#{$block-class}__disabled:focus,
+.#{$block-class}__disabled:hover,
+.#{$block-class}__disabled {
+  border: 1px solid $border-disabled;
+  background: $layer-02;
+  color: $text-disabled;
+  cursor: default;
+}

package/scss/components/GetStartedCard/_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 './get-started-card';

package/scss/components/GetStartedCard/_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 './get-started-card';

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

@@ -9,6 +9,9 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @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';
@@ -20,15 +23,26 @@
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
+$block-class-overflow: #{$block-class}-popover;
+$block-class-modal: #{$block-class}-modal;
 
 .#{$block-class} {
   display: flex;
   width: 100%;
   min-width: $spacing-12;
   align-items: center;
+  justify-content: flex-start;
   white-space: nowrap;
 }
 
+.#{$block-class}--align-end {
+  justify-content: flex-end;
+}
+
+.#{$block-class}--align-center {
+  justify-content: center;
+}
+
 .#{$block-class}--multiline {
   flex-wrap: wrap;
 }
@@ -53,3 +67,146 @@ $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow;
   display: inline-block;
   max-width: $spacing-09;
 }
+
+.#{$block-class-overflow} {
+  display: inline-block;
+  vertical-align: bottom;
+  .#{c4p-settings.$carbon-prefix}--tag.#{c4p-settings.$carbon-prefix}--tag--interactive {
+    border: 0;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--popover
+    .#{c4p-settings.$carbon-prefix}--popover-content {
+    padding: $spacing-05;
+  }
+}
+
+.#{$block-class-overflow}--hidden {
+  overflow: hidden;
+  max-width: 0;
+  visibility: hidden;
+}
+
+@include mixins.block-wrap('#{$block-class-overflow}__el') {
+  &.#{$block-class-overflow}__el {
+    // removes the min width in Carbon
+    min-width: initial;
+    text-align: left;
+  }
+
+  .#{$block-class-overflow}__trigger {
+    font-family: inherit;
+  }
+
+  .#{$block-class-overflow}__show-all-tags-link.#{c4p-settings.$carbon-prefix}--link:visited {
+    display: inline-block;
+    margin: $spacing-03 0 $spacing-02; // to match the tags
+    color: $link-inverse;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--link:active,
+  .#{c4p-settings.$carbon-prefix}--link:active:visited,
+  .#{c4p-settings.$carbon-prefix}--link:active:visited:hover {
+    color: $text-inverse;
+  }
+
+  .#{$block-class-overflow}__tag-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .#{$block-class-overflow}__show-all-tags-link {
+    margin-top: $spacing-03;
+    color: $link-inverse;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--tag
+    .#{c4p-settings.$carbon-prefix}--tag {
+    background-color: $background-inverse-hover;
+  }
+
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default,
+  .#{$block-class-overflow}__tag-item.#{$block-class-overflow}__tag-item--default
+    .#{c4p-settings.$carbon-prefix}--tag {
+    @include type.type-style('body-compact-01');
+
+    display: block;
+    overflow: hidden;
+    min-width: initial;
+    min-height: initial;
+    padding: 0;
+    border-radius: 0;
+    margin: 0;
+    background-color: inherit;
+    color: inherit;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag__close-icon {
+    // undo override by .#{c4p-settings.$carbon-prefix}--tooltip button
+    padding: 0;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag--high-contrast {
+    background-color: $background;
+    color: $text-primary;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$carbon-prefix}--tag__close-icon:hover {
+    background-color: $background-hover;
+  }
+
+  .#{$block-class-overflow}__tag
+    .#{c4p-settings.$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) {
+      height: 90%;
+      max-height: 450px;
+    }
+  }
+
+  .#{$block-class-modal}__search {
+    margin-top: $spacing-05;
+    margin-bottom: 0;
+  }
+
+  &.#{$block-class-modal} .#{$block-class-modal}__fade {
+    position: relative;
+    margin-right: $spacing-05;
+    margin-left: $spacing-05;
+  }
+
+  .#{$block-class-modal}__body {
+    padding-bottom: $spacing-06;
+  }
+
+  .#{$block-class-modal}__header {
+    padding-right: 0;
+    margin-right: $spacing-05;
+  }
+
+  &.#{$block-class-modal} .#{$block-class-modal}__fade::after {
+    position: absolute;
+    top: calc(-1 * #{$spacing-11});
+    left: 0;
+    width: 100%;
+    height: $spacing-07;
+    background: linear-gradient(to bottom, transparent, $layer-01);
+    content: '';
+  }
+}

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

@@ -76,3 +76,4 @@
 @use './TagOverflow/index-with-carbon' as *;
 @use './FilterPanel/index-with-carbon' as *;
 @use './ConditionBuilder/index-with-carbon' as *;
+@use './GetStartedCard/index-with-carbon' as *;

package/scss/components/_index.scss

@@ -83,3 +83,4 @@
 @use './TagOverflow';
 @use './FilterPanel';
 @use './ConditionBuilder';
+@use './GetStartedCard';

package/telemetry.yml

@@ -17,6 +17,8 @@ collect:
         - align
         - allTagsModalSearchLabel
         - allTagsModalSearchPlaceholderText
+        - allTagsModalSearchThreshold
+        - allTagsModalTarget
         - allTagsModalTitle
         - alt
         - apiKey
@@ -48,6 +50,7 @@ collect:
         - conditionBuilderRef
         - conditionState
         - config
+        - containingElementRef
         - count
         - currentMatcher
         - currentStep
@@ -72,6 +75,7 @@ collect:
         - filterString
         - findColumnPlaceholderLabel
         - firstFocusElement
+        - footerActionIcon
         - formDescription
         - formTitle
         - getConditionState
@@ -133,9 +137,11 @@ collect:
         - links
         - loading
         - maxVisible
+        - measurementOffset
         - media
         - mediaPosition
         - menuOptionsClass
+        - metadata
         - metaIconDescription
         - metaPanelTitle
         - modifiers
@@ -167,6 +173,7 @@ collect:
         - onDataUpdate
         - onMount
         - onNext
+        - onOverflowTagChange
         - onPrimaryButtonClick
         - onRemove
         - onRequestClose
@@ -175,6 +182,7 @@ collect:
         - onSecondaryButtonClick
         - onSelectColumn
         - onSelectionAreaChange
+        - onShowAllClick
         - onSubmit
         - onSubmitButtonText
         - onToggle
@@ -184,12 +192,15 @@ collect:
         - overflowActions
         - overflowAlign
         - overflowAriaLabel
+        - overflowClassName
+        - overflowTags
         - overflowType
         - parentId
         - path
         - pictogram
         - placeholder
         - placement
+        - popoverOpen
         - popOverSearchThreshold
         - portalTarget
         - preventCloseOnClickOutside
@@ -226,6 +237,7 @@ collect:
         - selectionAreas
         - selectorPageContent
         - selectorPrimaryFocus
+        - sequence
         - setActiveCellCoordinates
         - setAllFilters
         - setColumnsObject
@@ -235,6 +247,7 @@ collect:
         - setIsTearsheetOpen
         - setLabelTitle
         - setMultiSelection
+        - setPopoverOpen
         - setSelectionAreaData
         - setSelectionAreas
         - showAllTagsLabel
@@ -383,6 +396,7 @@ collect:
         # Canary
         - componentName
         # Card
+        - getStarted
         - onKeyDown
         # CardFooter
         - hasButton
@@ -759,18 +773,6 @@ collect:
         - width
         # TagOverflow
         - tagComponent
-        # TagSet
-        - allTagsModalTarget
-        - containingElementRef
-        - measurementOffset
-        - onOverflowTagChange
-        - overflowClassName
-        # TagSetOverflow
-        - allTagsModalSearchThreshold
-        - onShowAllClick
-        - overflowTags
-        - popoverOpen
-        - setPopoverOpen
         # TearsheetShell
         - headerActions
         # Toolbar
@@ -867,19 +869,21 @@ collect:
         # General - kind
         - "403"
         - "404"
-        - checked
         - critical
         - custom
         - default
-        - disabled
         - dual-button
         - error
         - fatal
         - ghost
         - group
         - in-progress
-        - indeterminate
         - info
+        - Kinds.checked
+        - Kinds.disabled
+        - Kinds.error
+        - Kinds.indeterminate
+        - Kinds.unchecked
         - link
         - major-warning
         - minor-warning
@@ -894,7 +898,6 @@ collect:
         - single-button
         - tertiary
         - unauthorized
-        - unchecked
         - undefined
         - unknown
         - user
@@ -949,16 +952,20 @@ collect:
         - xs
         # General - status
         - active
+        - complete
         - default
         - error
         - fail
         - finished
         - in-progress
         - inactive
+        - incomplete
         - success
         # General - theme
         - dark
         - light
+        - Themes.dark
+        - Themes.light
         # General - titleSize
         - default
         - large