@carbon/ibm-products 2.30.0 → 2.31.0-alpha.5

package/lib/node_modules/@carbon/icons-react/es/iconPropTypes-4cbeb95d.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2020, 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 strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../../../prop-types/index.js');
+
+var iconPropTypes = {
+  size: index["default"].oneOfType([index["default"].number, index["default"].string])
+};
+
+exports.i = iconPropTypes;

package/lib/settings.d.ts

@@ -61,6 +61,7 @@ export const pkg: {
         EditTearsheetNarrow: boolean;
         EditFullPage: boolean;
         EditUpdateCards: boolean;
+        Nav: boolean;
         BigNumbers: boolean;
         TruncatedList: boolean;
         DelimitedList: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.30.0",
+  "version": "2.31.0-alpha.5+ce1358ad0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -90,7 +90,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.29.0",
+    "@carbon/ibm-products-styles": "^2.30.0-alpha.5+ce1358ad0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -114,5 +114,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "22c6158e668aae407dd00a771029beadd4e30779"
+  "gitHead": "ce1358ad0493a21f742e455f5b11c3540592c78f"
 }

package/scss/components/ComboButton/_combo-button.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 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.
@@ -10,67 +10,65 @@
 @use '@carbon/styles/scss/components/button/tokens' as *;
 @use '../../global/styles/project-settings' as c4p-settings;
 
-$security--prefix: security;
-
-.#{$security--prefix}--combo-button {
+.#{c4p-settings.$pkg-prefix}--combo-button {
   position: relative;
   display: inline-flex;
 }
 
-.#{$security--prefix}--combo-button__action {
+.#{c4p-settings.$pkg-prefix}--combo-button__action {
   display: block;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.#{$security--prefix}--combo-button
-  .#{$security--prefix}--combo-button__overflow-menu {
+.#{c4p-settings.$pkg-prefix}--combo-button
+  .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu {
   width: $spacing-09;
-  height: auto;
+  height: $spacing-09;
   border-left: $spacing-01 solid $border-subtle-01;
   background-color: $background-brand;
 }
 
-.#{$security--prefix}--combo-button
-  .#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:hover,
-.#{$security--prefix}--combo-button
-  .#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open,
-.#{$security--prefix}--combo-button
+.#{c4p-settings.$pkg-prefix}--combo-button
+  .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:hover,
+.#{c4p-settings.$pkg-prefix}--combo-button
+  .#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open,
+.#{c4p-settings.$pkg-prefix}--combo-button
   .#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open:hover,
-.#{$security--prefix}--combo-button
+.#{c4p-settings.$pkg-prefix}--combo-button
   .#{c4p-settings.$carbon-prefix}--overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu--open {
   background-color: $button-primary-hover;
 }
 
-.#{$security--prefix}--combo-button
+.#{c4p-settings.$pkg-prefix}--combo-button
   .cds--overflow-menu--flip.cds--overflow-menu-options[data-floating-menu-direction='bottom']::after {
   width: 0;
   height: 0;
 }
 
-.#{$security--prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:active {
+.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu.#{c4p-settings.$carbon-prefix}--overflow-menu:active {
   background-color: $button-primary-active;
 }
 
-.#{$security--prefix}--combo-button__overflow-menu__icon {
+.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__icon {
   fill: $icon-on-color;
   pointer-events: none;
 }
 
-.#{$security--prefix}--combo-button__overflow-menu__list.#{c4p-settings.$carbon-prefix}--overflow-menu-options {
+.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__list.#{c4p-settings.$carbon-prefix}--overflow-menu-options {
   left: 0;
   width: 100%;
 }
 
-.#{$security--prefix}--combo-button__overflow-menu__list:after {
+.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__list:after {
   display: none;
 }
 
-.#{$security--prefix}--combo-button__overflow-menu__item.#{c4p-settings.$carbon-prefix}--overflow-menu-options__btn {
+.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__item.#{c4p-settings.$carbon-prefix}--overflow-menu-options__btn {
   max-width: 100%;
 }
 
-.#{$security--prefix}--combo-button__overflow-menu__item__icon {
+.#{c4p-settings.$pkg-prefix}--combo-button__overflow-menu__item__icon {
   margin-left: auto;
 }

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

package/scss/components/Nav/_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 './nav';

package/scss/components/Nav/_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 './nav';

package/scss/components/Nav/_nav.scss

@@ -0,0 +1,259 @@
+//
+// 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 '@carbon/styles/scss/theme' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/type/scss/font-family';
+@use '../../global/styles/project-settings' as c4p-settings;
+@use '../../global/styles/mixins';
+@use '@carbon/styles/scss/utilities';
+
+$block-class: #{c4p-settings.$pkg-prefix}--nav;
+$nav-list-block-class: #{c4p-settings.$pkg-prefix}--nav-list;
+$nav-item-block-class: #{c4p-settings.$pkg-prefix}--nav-item;
+
+$nav__heading: '#{&}__heading';
+$nav__wrapper: '#{&}__wrapper';
+
+/// Icon position.
+/// @type Length
+$nav__icon__position: translate3d(-50%, 0, 0);
+
+@mixin rtl {
+  $rtl: '[dir="rtl"]';
+
+  &#{$rtl},
+  #{$rtl} & {
+    @content;
+  }
+}
+
+.#{$block-class} {
+  position: relative;
+}
+
+.#{$block-class}:not(:first-of-type) {
+  padding-top: $spacing-05;
+}
+
+.#{$block-class}:not(:last-of-type) {
+  padding-bottom: $spacing-05;
+}
+
+.#{$block-class}:last-of-type {
+  padding-bottom: $spacing-07;
+}
+
+.#{$block-class} + .#{$block-class} > .#{$nav__heading} {
+  padding-top: $spacing-02;
+}
+
+.#{$block-class}::before {
+  position: absolute;
+  right: $spacing-07;
+  bottom: 0;
+  left: $spacing-07;
+  display: inline-block;
+  width: auto;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  border-bottom: to-rem(1px) solid $layer-02;
+  content: '';
+}
+
+.#{$block-class}:last-of-type::before {
+  border-width: 0;
+}
+
+.#{$block-class}__wrapper {
+  padding-left: initial;
+  margin-top: initial;
+  margin-bottom: initial;
+  list-style: none;
+
+  @include rtl {
+    padding-right: initial;
+  }
+}
+
+.#{$block-class}__heading {
+  @include type.type-style('caption-01');
+
+  padding: $spacing-04 $spacing-08;
+  margin-top: initial;
+  margin-bottom: initial;
+  color: $text-secondary;
+}
+
+// Navigation lists.
+.#{$nav-list-block-class} {
+  @include type.type-style('body-short-01');
+
+  display: flex;
+  flex-direction: column;
+  margin-bottom: $spacing-01;
+  list-style: none;
+}
+
+.#{$nav-list-block-class}:focus {
+  outline: 0;
+  outline-width: 0;
+
+  > .#{$nav-item-block-class}__link {
+    @include utilities.focus-outline('outline');
+  }
+}
+
+.#{$nav-list-block-class}__icon {
+  margin-top: $spacing-01;
+  margin-left: auto;
+  transform: $nav__icon__position rotate(0deg);
+  transition-duration: $duration-moderate-02;
+  transition-property: transform;
+  transition-timing-function: $standard-easing;
+  @include rtl {
+    right: $spacing-02;
+    transform: $nav__icon__position rotate(180deg);
+  }
+}
+
+.#{$nav-list-block-class}--nested {
+  overflow: hidden;
+  max-height: 0;
+  padding-left: 0;
+  margin-bottom: 0;
+  opacity: 0;
+  transition-duration: $duration-moderate-02;
+  $transition-property: (max-height, opacity);
+  @include rtl {
+    padding-right: 0;
+    padding-left: initial;
+  }
+
+  > .#{$nav-item-block-class}:last-of-type {
+    margin-bottom: $spacing-03;
+  }
+}
+
+// Navigation items.
+.#{$nav-item-block-class} {
+  @include type.type-style('body-short-01');
+
+  position: relative;
+  margin-bottom: $spacing-01;
+}
+
+// Content including text and sometimes a product icon.
+.#{$nav-item-block-class}__content {
+  display: flex;
+}
+
+.#{$nav-item-block-class}::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  width: to-rem(4px);
+  height: 100%;
+  background-color: transparent;
+  content: '';
+  transform: translate3d(-100%, 0, 0);
+  transition-property: transform;
+}
+
+.#{$nav-item-block-class}--disabled {
+  pointer-events: none;
+
+  > #{$nav-item-block-class}__link {
+    color: $text-on-color-disabled;
+  }
+}
+
+.#{$nav-item-block-class}--active {
+  @include font-family.font-weight('semibold');
+
+  @include rtl {
+    &::before {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+}
+
+.#{$nav-item-block-class}--active::before {
+  z-index: 100;
+  background-color: $background-brand;
+  transform: translate3d(0, 0, 0);
+}
+
+// Expanded navigation list.
+.#{$nav-item-block-class}--expanded {
+  margin-bottom: $spacing-03;
+
+  > .#{$nav-list-block-class}--nested {
+    /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+    max-height: to-rem(320px);
+    opacity: 1;
+    transition-timing-function: $ease-in;
+  }
+
+  > .#{$nav-item-block-class}__link > .#{$nav-list-block-class}__icon {
+    transform: $nav__icon__position rotate(180deg);
+
+    @include rtl {
+      transform: $nav__icon__position rotate(0);
+    }
+  }
+}
+
+// Navigation item link.
+.#{$nav-item-block-class}__link {
+  position: relative;
+  display: flex;
+  padding: $spacing-03 $spacing-02 $spacing-03 $spacing-08;
+  color: $text-primary;
+  cursor: pointer;
+  text-decoration: none;
+  transition-property: background-color;
+}
+
+.#{$nav-item-block-class}__link:hover,
+.#{$nav-item-block-class}__link:focus {
+  background-color: $layer-02;
+}
+
+.#{$nav-item-block-class}__link:focus {
+  @include utilities.focus-outline('outline');
+}
+
+.#{$nav-item-block-class}__img {
+  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+  height: to-rem(20px);
+  margin-right: $spacing-04;
+  margin-left: -$spacing-07;
+}
+
+//nav-item__link--external__icon
+
+// External link icon selector.
+.#{$nav-item-block-class}__link--external__icon {
+  flex-shrink: 0;
+  align-self: center;
+  margin-left: $spacing-02;
+  fill: $text-primary;
+  opacity: 0;
+}
+
+.#{$nav-item-block-class}__link--external:hover,
+.#{$nav-item-block-class}__link--external:focus {
+  > .#{$nav-item-block-class}__link--external__icon {
+    opacity: 1;
+  }
+}

package/scss/components/Tearsheet/_tearsheet.scss

@@ -131,12 +131,21 @@ $motion-duration: $duration-moderate-02;
       max-height $motion-duration motion(entrance, expressive);
   }
 
-  &.#{$block-class}--stacked-1-of-2 .#{$block-class}__container,
-  &.#{$block-class}--stacked-2-of-3 .#{$block-class}__container {
+  &.#{$block-class}--stacked-1-of-2
+    .#{$block-class}__container:not(
+      .#{$block-class}__container--mixed-size-stacking
+    ),
+  &.#{$block-class}--stacked-2-of-3
+    .#{$block-class}__container:not(
+      .#{$block-class}__container--mixed-size-stacking
+    ) {
     max-height: calc(100% - #{$spacing-09} + #{$spacing-05});
   }
 
-  &.#{$block-class}--stacked-1-of-3 .#{$block-class}__container {
+  &.#{$block-class}--stacked-1-of-3
+    .#{$block-class}__container:not(
+      .#{$block-class}__container--mixed-size-stacking
+    ) {
     max-height: calc(100% - #{$spacing-09} + (2 * #{$spacing-05}));
   }
 
@@ -144,12 +153,21 @@ $motion-duration: $duration-moderate-02;
     max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}));
   }
 
-  &.#{$block-class}--stacked-1-of-2 .#{$block-class}__container--lower,
-  &.#{$block-class}--stacked-2-of-3 .#{$block-class}__container--lower {
+  &.#{$block-class}--stacked-1-of-2
+    .#{$block-class}__container--lower:not(
+      .#{$block-class}__container--mixed-size-stacking
+    ),
+  &.#{$block-class}--stacked-2-of-3
+    .#{$block-class}__container--lower:not(
+      .#{$block-class}__container--mixed-size-stacking
+    ) {
     max-height: calc(100% - (#{$spacing-09} + #{$spacing-08}) + #{$spacing-05});
   }
 
-  &.#{$block-class}--stacked-1-of-3 .#{$block-class}__container--lower {
+  &.#{$block-class}--stacked-1-of-3
+    .#{$block-class}__container--lower:not(
+      .#{$block-class}__container--mixed-size-stacking
+    ) {
     max-height: calc(
       100% - (#{$spacing-09} + #{$spacing-08}) + (2 * #{$spacing-05})
     );

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

@@ -64,6 +64,7 @@
 @use './DescriptionList/index-with-carbon' as *;
 @use './FullPageError/index-with-carbon' as *;
 @use './SearchBar/index-with-carbon' as *;
+@use './Nav/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

@@ -72,6 +72,7 @@
 @use './DescriptionList';
 @use './FullPageError';
 @use './SearchBar';
+@use './Nav';
 @use './StringFormatter';
 @use './UserAvatar';
 @use './StatusIndicator';