@carbon/ibm-products 2.15.2 → 2.17.0-alpha.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.15.2",
+  "version": "2.17.0-alpha.8+db5d0bf1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -37,12 +37,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "run-s clean build-first build-all build-css-update-maps",
+    "build": "run-s clean build-all",
     "build-all": "run-p 'build:*'",
-    "build-first": "copyfiles -e 'src/config-dev.scss' 'src/**/*.scss' scss -u 1",
-    "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css",
-    "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css",
-    "build-css-update-maps": "node ../../scripts/updateSourceMaps.js",
+    "build:css": "copyfiles '../ibm-products-styles/css/**/*.*' ./ -u 2",
+    "build:scss": "copyfiles '../ibm-products-styles/scss/**/*.*' ./ -u 2",
     "build:js-esm": "cross-env BABEL_ENV=esm yarn build:js:modules -d es",
     "build:js-cjs": "cross-env BABEL_ENV=cjs yarn build:js:modules -d lib",
     "build:js:modules": "babel src --ignore '**/__tests__','**/*.test.js','**/*.stories.js','src/utils/**/*'",
@@ -76,6 +74,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
+    "@carbon/ibm-products-styles": "^2.15.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -96,5 +95,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "61217220d3b66f869e36c29d8263b1b56c756475"
+  "gitHead": "db5d0bf119aba0a96d0ded89ac54647adfba2686"
 }

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

@@ -321,6 +321,11 @@
   background-color: $background-selected-hover;
 }
 
+.#{$block-class}__grid-container
+  table.#{$block-class}__table-simple.#{c4p-settings.$carbon-prefix}--data-table.#{$block-class}__table-is-resizing {
+  overflow-y: hidden;
+}
+
 .#{$block-class}__resizableColumn {
   &.#{$block-class}__isResizing {
     .#{$block-class}__resizer {

package/scss/components/{TooltipTrigger/_storybook-styles.scss → InlineTip/_index.scss}

@@ -4,3 +4,5 @@
 // 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 './inline-tip';

package/scss/components/InlineTip/_inline-tip.scss

@@ -0,0 +1,229 @@
+//
+// Copyright IBM Corp. 2023, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/**
+ * The InlineTip specifically is theme-agnostic, and so we have to
+ * use color tokens to keep the colors static instead of theme tokens
+ * that will change depending on the selected theme.
+ *
+ * We are triggering a *large* amount of linting errors.
+ * So, we're using the following "disable" rules for the entire file
+ * instead of many individual rules.
+ */
+
+/* stylelint-disable carbon/layout-token-use */
+/* stylelint-disable carbon/theme-token-use */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable function-no-unknown */
+/* stylelint-disable max-nesting-depth */
+
+// Standard imports.
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+
+$block-class: #{c4p-settings.$pkg-prefix}--inline-tip;
+// Images and animation are the same fixed size
+$media-height: to-rem(118px);
+$media-width: calc(#{$media-height} * 2);
+$purple: #7f3ae7;
+
+.#{$block-class} {
+  position: relative;
+  display: flex;
+  background: linear-gradient(90deg, $blue-90 0%, $purple-70 100%);
+}
+// layout only: wide
+.#{$block-class}__wide {
+  padding: $spacing-05 $spacing-10 $spacing-05 $spacing-09;
+}
+// layout: wide, with image
+.#{$block-class}__wide.#{$block-class}__has-media {
+  padding-right: $spacing-09;
+}
+
+.#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media {
+  padding-left: $spacing-10;
+}
+
+.#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media img {
+  display: block;
+  height: $media-height;
+}
+
+.#{$block-class}__wide.#{$block-class}__has-media .#{$block-class}__media svg {
+  // Overrides the inline CSS of "100%".
+  width: $media-width !important;
+  height: $media-height !important;
+}
+
+// layout only: narrow
+.#{$block-class}__narrow {
+  flex-direction: column-reverse;
+  padding: to-rem(52px) $spacing-07 $spacing-05 $spacing-05;
+}
+// layout: narrow, with image
+.#{$block-class}__narrow.#{$block-class}__has-media {
+  padding-top: $spacing-07;
+  padding-right: $spacing-05;
+}
+
+.#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__media {
+  padding-bottom: $spacing-05;
+
+  img {
+    width: 100%;
+  }
+}
+
+.#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__content {
+  padding-right: $spacing-05;
+}
+
+.#{$block-class}__narrow.#{$block-class}__has-media .#{$block-class}__footer {
+  justify-content: space-between;
+}
+.#{$block-class}__narrow.#{$block-class}__has-media
+  .#{$block-class}__footer
+  .#{$block-class}__close-btn {
+  margin-right: calc(-1 * $spacing-05);
+}
+
+// All links in use by this component and provided by the user must reflect the 'dark' theme.
+.#{$block-class} a {
+  color: $blue-30;
+
+  &:visited,
+  &:hover,
+  &:visited:hover {
+    color: $blue-30;
+  }
+}
+
+.#{$block-class}__title {
+  @include type-style('productive-heading-01');
+
+  color: $white-0;
+}
+
+.#{$block-class}__body {
+  @include type-style('body-short-01');
+
+  color: $gray-10;
+}
+.#{$block-class}__body p {
+  @include type-style('body-short-01');
+
+  margin-bottom: $spacing-03;
+  font-size: inherit;
+  line-height: inherit;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+.#{$block-class}__body .#{$block-class}__secondary-btn {
+  margin-top: $spacing-03;
+}
+.#{$block-class}__body
+  .#{$block-class}__secondary-btn
+  .#{$block-class}__button {
+  margin-left: calc(-1 * $spacing-05);
+  color: $blue-30;
+
+  &:active,
+  &:hover {
+    background-color: $purple;
+    color: $gray-10;
+  }
+}
+
+.#{$block-class}__footer {
+  display: flex;
+  padding-top: $spacing-05;
+
+  &:empty {
+    display: none;
+  }
+}
+
+// When 'collapsed', a text-only preview with ellipsis is shown.
+.#{$block-class}__preview-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
+.#{$block-class}__icon-idea {
+  position: absolute;
+  width: to-rem(20px);
+  color: $white-0;
+  inset: $spacing-05 0 0 $spacing-05;
+}
+
+.#{$block-class}__close-icon-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.#{$block-class} .#{$block-class}__close-icon {
+  padding: to-rem(6px) 0 0 0;
+  block-size: $spacing-07;
+  color: $white-0;
+  inline-size: $spacing-07;
+  min-block-size: $spacing-07;
+
+  &:active,
+  &:hover {
+    background-color: $purple;
+    color: $text-primary;
+  }
+
+  path {
+    margin: 0;
+    fill: $white-0;
+  }
+}
+
+.#{$block-class} .#{$block-class}__toggle-btn {
+  border: none;
+  margin: 0 $spacing-05 0 calc(-1 * $spacing-05);
+  color: $blue-30;
+
+  &:hover {
+    background-color: $purple-70-hover;
+    color: $gray-10;
+  }
+}
+
+.#{$block-class} .#{$block-class}__close-btn {
+  border: to-rem(1px) solid $white-0;
+  color: $white-0;
+
+  &:active,
+  &:hover {
+    background-color: $gray-10;
+    color: $gray-100;
+  }
+
+  // The "render icon" CSS seems to be missing in the latest Carbon button.
+  // Specifically, getting the icon to move to right-hand side of the content area.
+  // Repeating here.
+  svg {
+    position: absolute;
+    right: 1rem;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+}

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

@@ -110,10 +110,6 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     position: sticky;
     z-index: 4;
     top: 0;
-    height: calc(
-      var(--#{$block-class}--title-container-height) -
-        var(--#{$block-class}--label-text-height)
-    );
     padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
     background-color: $layer-01;
 
@@ -169,6 +165,7 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
     position: inherit;
     z-index: 4;
+    margin-bottom: calc(-1 * var(--#{$block-class}--label-text-height));
     background-color: $layer-01;
     opacity: var(--#{$block-class}--subtitle-opacity);
     transform: translateY(var(--#{$block-class}--title-y-position));

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

@@ -17,6 +17,7 @@
 @use './CreateSidePanel/index-with-carbon' as *;
 @use './CreateTearsheetNarrow/index-with-carbon' as *;
 @use './CreateTearsheet/index-with-carbon' as *;
+@use './Datagrid/index-with-carbon' as *;
 @use './EditInPlace/index-with-carbon' as *;
 @use './EmptyStates/index-with-carbon' as *;
 @use './ExportModal/index-with-carbon' as *;

package/scss/components/_index-released-only.scss

@@ -17,6 +17,7 @@
 @use './CreateSidePanel';
 @use './CreateTearsheetNarrow';
 @use './CreateTearsheet';
+@use './Datagrid';
 @use './EditInPlace';
 @use './EmptyStates';
 @use './ExportModal';

package/scss/components/_index.scss

@@ -51,3 +51,4 @@
 @use './EditFullPage';
 @use './EditUpdateCards';
 @use './Checklist';
+@use './InlineTip';

package/scss/config-dev.scss

@@ -0,0 +1,3 @@
+@forward './global/styles/project-settings' with (
+  $pkg-prefix: 'dev-prefix--c4p'
+);

package/scss/components/APIKeyModal/_storybook-styles.scss

@@ -1,35 +0,0 @@
-//
-// 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 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
-
-.#{$block-class} .#{c4p-settings.$carbon-prefix}--radio-button-wrapper {
-  margin-bottom: $spacing-02;
-}
-
-.#{$block-class}__permissions.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: $spacing-05;
-  margin-bottom: 0;
-}
-
-.#{$block-class}__resource-toggle.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: 0;
-  margin-bottom: $spacing-05;
-}
-
-.#{$block-class}__resource-name.#{c4p-settings.$carbon-prefix}--fieldset {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.#{$block-class}__button-loading.#{c4p-settings.$carbon-prefix}--btn--primary {
-  background: $link-secondary;
-}

package/scss/components/AboutModal/_storybook-styles.scss

@@ -1,29 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 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 '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/components/ui-shell' as *;
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-$block-class: #{c4p-settings.$pkg-prefix}--about-modal;
-
-.#{$block-class}__stories--tech-logo {
-  width: $spacing-06;
-  height: $spacing-06;
-  margin-right: $spacing-03;
-  object-fit: contain;
-}
-
-.#{$block-class}__footer-label {
-  @include type.type-style('label-01');
-
-  margin-bottom: $spacing-02;
-  color: $text-secondary;
-}

package/scss/components/ActionBar/_storybook-styles.scss

@@ -1,8 +0,0 @@
-//
-// 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 '../../global/styles/display-box' as *;

package/scss/components/ActionSet/_storybook-styles.scss

@@ -1,36 +0,0 @@
-//
-// 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 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-@use '../../global/styles/display-box' as *;
-
-$block-class: #{c4p-settings.$pkg-prefix}--action-set;
-
-.#{$block-class}__story-container {
-  width: 96vw;
-  min-height: 3rem;
-}
-
-.#{$block-class}__story-container--xlg {
-  width: 75vw;
-}
-
-.#{$block-class}__story-container--lg {
-  width: 60vw;
-}
-
-.#{$block-class}__story-container--md {
-  width: 45vw;
-}
-
-.#{$block-class}__story-container--sm {
-  width: 30vw;
-}
-
-.#{$block-class}__story-container--xs {
-  width: 25vw;
-}

package/scss/components/AddSelect/_storybook-styles.scss

@@ -1,6 +0,0 @@
-//
-// 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/BreadcrumbWithOverflow/_storybook-styles.scss

@@ -1,8 +0,0 @@
-//
-// 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 '../../global/styles/display-box' as *;

package/scss/components/ButtonMenu/_storybook-styles.scss

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

package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss

@@ -1,8 +0,0 @@
-//
-// 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 '../../global/styles/display-box' as *;

package/scss/components/Card/_storybook-styles.scss

@@ -1,12 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 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.
-//
-
-// make the root full width to get a better idea of how the cards
-// look in a real grid situation
-#root {
-  width: 100%;
-}

package/scss/components/Cascade/_storybook-styles.scss

@@ -1,34 +0,0 @@
-//
-// Copyright IBM Corp. 20201, 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 '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-
-#storybook-docs .docs-story {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  padding: 30px 0;
-}
-
-.box {
-  display: inline-block;
-  width: 400px;
-  height: 300px;
-  margin: $spacing-04;
-  background-color: $layer-selected-inverse;
-  color: $text-on-color;
-}
-
-.grid-box {
-  display: flex;
-  width: 100%;
-  height: 300px;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: $spacing-03;
-  background-color: $layer-selected-inverse;
-  color: $text-on-color;
-}

package/scss/components/Checklist/_storybook-styles.scss

@@ -1,13 +0,0 @@
-//
-// Copyright IBM Corp. 2023, 2023
-//
-// 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/styles/scss/spacing' as *;
-
-.checklist-stories__viewport {
-  min-width: calc(2 * $spacing-13); // 320px
-  max-width: calc(2 * $spacing-13);
-}

package/scss/components/CreateFullPage/_storybook-styles.scss

@@ -1,67 +0,0 @@
-//
-// 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 '@carbon/styles/scss/theme' as *;
-@use '@carbon/styles/scss/spacing' as *;
-@use '@carbon/styles/scss/type';
-@use '@carbon/styles/scss/components/ui-shell' as *;
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-$story-class: 'create-full-page-stories';
-$block-class: #{c4p-settings.$pkg-prefix}--create-full-page;
-// cspell:disable-next-line
-.sbdocs .#{$story-class}__viewport {
-  height: 100vh;
-  background-color: $background;
-  box-shadow: 0 0 4px 1px $border-subtle-01;
-  color: $text-primary;
-  overflow-y: auto;
-}
-
-.#{$story-class}__step-fieldset--no-label
-  .#{c4p-settings.$carbon-prefix}--fieldset
-  legend {
-  position: absolute;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.#{$story-class}__tooltip {
-  position: relative;
-  // stylelint-disable-next-line carbon/layout-token-use
-  top: calc(#{$spacing-05} + #{$spacing-01});
-  left: $spacing-11;
-}
-
-.#{$block-class}__step-fieldset.#{$story-class}__step-fieldset--label.#{c4p-settings.$carbon-prefix}--label {
-  position: absolute;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.#{c4p-settings.$carbon-prefix}--form-item {
-  margin-bottom: $spacing-05;
-}
-
-.#{$story-class}__error--text {
-  @include type.type-style('label-01');
-
-  margin-bottom: $spacing-05;
-}
-
-.#{$block-class}
-  .#{$block-class}__step-description.#{$story-class}__step-description {
-  padding-left: 0;
-}

package/scss/components/CreateModal/_storybook-styles.scss

@@ -1,54 +0,0 @@
-//
-// 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 '@carbon/react/scss/components/number-input';
-@use '@carbon/react/scss/components/text-area';
-@use '@carbon/react/scss/components/text-input';
-@use '@carbon/react/scss/components/dropdown';
-@use '@carbon/react/scss/components/date-picker';
-@use '@carbon/react/scss/components/radio-button';
-@use '@carbon/react/scss/components/progress-indicator';
-@use '@carbon/react/scss/components/tooltip';
-@use '@carbon/react/scss/components/modal';
-@use '@carbon/styles/scss/spacing';
-@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings;
-
-.#{c4p-settings.$carbon-prefix}--number {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--number__control-btn::before {
-  background-color: transparent;
-}
-
-.#{c4p-settings.$carbon-prefix}--number__control-btn::after {
-  background-color: transparent;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker-container {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
-  .#{c4p-settings.$carbon-prefix}--date-picker__input {
-  min-width: 100%;
-}
-
-.#{c4p-settings.$carbon-prefix}--list-box__menu-icon {
-  /* stylelint-disable-next-line carbon/layout-token-use */
-  top: spacing.$spacing-03;
-}
-
-.example-wrapper {
-  display: grid;
-  grid-gap: spacing.$spacing-05;
-  grid-template-columns: 1fr 1fr;
-}