@carbon/ibm-products 1.50.0 → 1.52.0

package/README.md

@@ -102,7 +102,7 @@ const App = () => {
 };
 ```
 
-### Enabling Canary components
+### Enabling Canary components and flagged features
 
 Components that have not yet completed the release review process are considered
 to be canary and require the consumer to enable via a feature flag in a
@@ -121,14 +121,19 @@ pkg.component.SidePanel = true;
 // Live dangerously: enable all components!
 pkg.setAllComponents(true);
 
-// Enable all pre-release feature flags that we want to use
-pkg.flags.noneJustYet = true;
-
+// Enable a feature flagged example
+pkg.feature.nameOfFeature = true;
+pkg.feature['Component.feature'] = true;
 // Live dangerously: enable all pre-release features!
 pkg.setAllFeatures(true);
 ```
 
-**Note:** The above settings must happen before a component first renders.
+**Note:** The above settings must happen before a component first renders or a
+feature is first used.
+
+**Note: 2** In the case of features implemented via hooks the feature may
+function without enabling. In all cases features that disabled by default will
+log in the console a warning if enabled via a feature flag or an error if not.
 
 ### Building and running locally
 

package/css/index-full-carbon.css

@@ -22054,13 +22054,6 @@ button.c4p--add-select__global-filter-toggle--open {
   border-bottom: none;
 }
 
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
 .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
 .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
   /* stylelint-disable-next-line declaration-no-important */
@@ -22081,6 +22074,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
   margin-left: var(--cds-spacing-01, 0.125rem);
 }
 
+.c4p--datagrid__select-all-toggle-overflow.bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
+  width: var(--cds-spacing-13, 10rem);
+}
+
 /*
 * Licensed Materials - Property of IBM
 * 5724-Q36
@@ -23010,6 +23007,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
 }
 
 .c4p--inline-edit-v2 {
+  --c4p--inline-edit-v2--size: var(--cds-spacing-07, 2rem);
   display: flex;
   align-items: center;
   background: transparent;
@@ -23018,15 +23016,28 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--inline-edit-v2-readonly {
   cursor: not-allowed;
 }
+.c4p--inline-edit-v2--sm {
+  --c4p--inline-edit-v2--size: var(--cds-spacing-07, 2rem);
+}
+.c4p--inline-edit-v2--md {
+  --c4p--inline-edit-v2--size: var(--cds-spacing-08, 2.5rem);
+}
+.c4p--inline-edit-v2--lg {
+  --c4p--inline-edit-v2--size: var(--cds-spacing-09, 3rem);
+}
 .c4p--inline-edit-v2:hover {
   background: var(--cds-field-01, #f4f4f4);
 }
-.c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
+.c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit,
+.c4p--inline-edit-v2 .c4p--inline-edit-v2__btn-edit.c4p--inline-edit-v2__btn-edit--always-visible {
   visibility: visible;
 }
 .c4p--inline-edit-v2__btn-edit {
   visibility: hidden;
 }
+.c4p--inline-edit-v2--invalid {
+  outline: 2px solid var(--cds-support-01, #da1e28);
+}
 .c4p--inline-edit-v2--focused {
   background: var(--cds-field-01, #f4f4f4);
   outline: 2px solid var(--cds-focus, #0f62fe);
@@ -23034,11 +23045,27 @@ th.c4p--datagrid__select-all-toggle-on.button {
 .c4p--inline-edit-v2__text-input {
   flex: 1;
 }
+.c4p--inline-edit-v2--inherit-type .c4p--inline-edit-v2__text-input {
+  /* match font of container */
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+.c4p--inline-edit-v2__ellipsis {
+  position: relative;
+  margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
+  opacity: 0;
+}
+.c4p--inline-edit-v2--overflows:not(.c4p--inline-edit-v2--focused) .c4p--inline-edit-v2__ellipsis {
+  opacity: 1;
+}
 .c4p--inline-edit-v2__text-input-label {
   display: none;
 }
 .c4p--inline-edit-v2__warning-icon {
-  margin: var(--cds-spacing-03, 0.5rem);
+  width: var(--cds-spacing-05, 1rem);
+  margin: auto var(--cds-spacing-03, 0.5rem) auto auto;
   color: var(--cds-support-01, #da1e28);
 }
 .c4p--inline-edit-v2__warning-text {
@@ -23057,27 +23084,24 @@ th.c4p--datagrid__select-all-toggle-on.button {
   outline: none;
 }
 
-.c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.bx--text-input,
-.c4p--inline-edit-v2-readonly .bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
-  cursor: not-allowed;
-}
-
 .c4p--inline-edit-v2__text-input.bx--text-input:focus,
 .c4p--inline-edit-v2__text-input.bx--text-input:active {
   outline: none;
 }
 
 .c4p--inline-edit-v2__toolbar {
-  --toolbar-width: var(--cds-spacing-07, 2rem);
-  --toolbar-width-focussed: var(--cds-spacing-10, 4rem);
+  --toolbar-width: var(--c4p--inline-edit-v2--size);
+  --toolbar-width-focussed: calc(2 * var(--c4p--inline-edit-v2--size));
   display: inline-flex;
   overflow: hidden;
   width: var(--toolbar-width);
 }
 
 .c4p--inline-edit-v2--invalid .c4p--inline-edit-v2__toolbar {
-  --toolbar-width: var(--cds-spacing-07, 2rem);
-  --toolbar-width-focussed: var(--cds-spacing-12, 6rem);
+  --toolbar-width: calc(var(--c4p--inline-edit-v2--size) + var(--cds-spacing-07, 2rem));
+  --toolbar-width-focussed: calc(
+    2 * var(--c4p--inline-edit-v2--size) + var(--cds-spacing-07, 2rem)
+  );
 }
 
 @keyframes slide-in {
@@ -23111,45 +23135,70 @@ th.c4p--datagrid__select-all-toggle-on.button {
     opacity: 1;
   }
 }
-.c4p--non-linear-reading__term-light--closed {
-  padding: 0.0625rem var(--cds-spacing-03, 0.5rem) 0.0625rem var(--cds-spacing-03, 0.5rem);
-  border: none;
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed {
+  height: 1.25rem;
+  padding-top: 0;
+  padding-right: 0.1875rem;
+  border-width: 0.0625rem;
+  border-style: solid;
   border-radius: var(--cds-spacing-04, 0.75rem);
-  background-color: var(--cds-interactive-02, #393939);
   white-space: nowrap;
-  background-color: var(--cds-interactive-02, #393939);
-  color: var(--cds-inverse-01, #ffffff);
+  border-color: var(--cds-interactive-03, #0f62fe);
+  background-color: transparent;
+  color: var(--cds-interactive-03, #0f62fe);
 }
-.c4p--non-linear-reading__term-light--closed:hover {
-  background-color: var(--cds-hover-secondary, #4c4c4c);
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
   cursor: pointer;
 }
-.c4p--non-linear-reading__term-light--closed:hover {
-  background-color: var(--cds-hover-secondary, #4c4c4c);
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed svg {
+  margin: 0.0625rem 0 0 0;
+  vertical-align: text-top;
 }
-.c4p--non-linear-reading__term-light--open {
-  padding: 0.0625rem var(--cds-spacing-03, 0.5rem) 0.0625rem var(--cds-spacing-03, 0.5rem);
-  border: none;
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-closed:hover {
+  background-color: var(--cds-interactive-03, #0f62fe);
+  color: var(--cds-inverse-01, #ffffff);
+}
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open {
+  height: 1.25rem;
+  padding-top: 0;
+  padding-right: 0.1875rem;
+  border-width: 0.0625rem;
+  border-style: solid;
   border-radius: var(--cds-spacing-04, 0.75rem);
-  background-color: var(--cds-interactive-02, #393939);
   white-space: nowrap;
-  padding-right: 0;
-  background-color: #e8daff;
-  color: var(--cds-text-01, #161616);
+  border-color: var(--cds-interactive-03, #0f62fe);
+  background-color: var(--cds-interactive-03, #0f62fe);
+  color: var(--cds-inverse-01, #ffffff);
 }
-.c4p--non-linear-reading__term-light--open:hover {
-  background-color: var(--cds-hover-secondary, #4c4c4c);
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
   cursor: pointer;
 }
-.c4p--non-linear-reading__term-light--open svg {
-  padding-top: 0.0625rem;
-  margin: 0 var(--cds-spacing-02, 0.25rem) 0 var(--cds-spacing-01, 0.125rem);
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
+  margin: 0.0625rem 0 0 0;
   vertical-align: text-top;
 }
-.c4p--non-linear-reading__term-light--open:hover {
-  background-color: #dcc7ff;
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open svg {
+  transform: rotate(180deg);
 }
-.c4p--non-linear-reading__term-dark--closed {
+.c4p--non-linear-reading__light .c4p--non-linear-reading__keyword-open:hover {
+  background-color: transparent;
+  color: var(--cds-interactive-03, #0f62fe);
+}
+.c4p--non-linear-reading__light .c4p--non-linear-reading__body {
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+  display: block;
+  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
+  border-left-width: 0.078125rem;
+  border-left-style: solid;
+  margin: var(--cds-spacing-02, 0.25rem) 0;
+  animation: fade 600ms;
+  border-left-color: var(--cds-text-01, #161616);
+}
+
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed {
   --cds-interactive-01: #0f62fe;
   --cds-interactive-02: #6f6f6f;
   --cds-interactive-03: #ffffff;
@@ -23570,22 +23619,29 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-size-2XLarge: 5rem;
   --cds-icon-size-01: 1rem;
   --cds-icon-size-02: 1.25rem;
-  padding: 0.0625rem var(--cds-spacing-03, 0.5rem) 0.0625rem var(--cds-spacing-03, 0.5rem);
-  border: none;
+  height: 1.25rem;
+  padding-top: 0;
+  padding-right: 0.1875rem;
+  border-width: 0.0625rem;
+  border-style: solid;
   border-radius: var(--cds-spacing-04, 0.75rem);
-  background-color: var(--cds-interactive-02, #393939);
   white-space: nowrap;
-  background-color: var(--cds-interactive-02, #393939);
-  color: var(--cds-text-04, #ffffff);
+  border-color: var(--cds-icon-03, #ffffff);
+  background-color: transparent;
+  color: var(--cds-text-01, #161616);
 }
-.c4p--non-linear-reading__term-dark--closed:hover {
-  background-color: var(--cds-hover-secondary, #4c4c4c);
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
   cursor: pointer;
 }
-.c4p--non-linear-reading__term-dark--closed:hover {
-  background-color: var(--cds-hover-secondary, #4c4c4c);
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed svg {
+  margin: 0.0625rem 0 0 0;
+  vertical-align: text-top;
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-closed:hover {
+  background-color: var(--cds-icon-03, #ffffff);
+  color: var(--cds-inverse-01, #ffffff);
 }
-.c4p--non-linear-reading__term-dark--open {
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open {
   --cds-interactive-01: #0f62fe;
   --cds-interactive-02: #6f6f6f;
   --cds-interactive-03: #ffffff;
@@ -24006,42 +24062,32 @@ th.c4p--datagrid__select-all-toggle-on.button {
   --cds-size-2XLarge: 5rem;
   --cds-icon-size-01: 1rem;
   --cds-icon-size-02: 1.25rem;
-  padding: 0.0625rem var(--cds-spacing-03, 0.5rem) 0.0625rem var(--cds-spacing-03, 0.5rem);
-  border: none;
+  height: 1.25rem;
+  padding-top: 0;
+  padding-right: 0.1875rem;
+  border-width: 0.0625rem;
+  border-style: solid;
   border-radius: var(--cds-spacing-04, 0.75rem);
-  background-color: var(--cds-interactive-02, #393939);
   white-space: nowrap;
-  padding-right: 0;
-  background-color: #491d8b;
-  color: var(--cds-text-04, #ffffff);
+  border-color: var(--cds-icon-03, #ffffff);
+  background-color: var(--cds-icon-03, #ffffff);
+  color: var(--cds-inverse-01, #ffffff);
 }
-.c4p--non-linear-reading__term-dark--open:hover {
-  background-color: var(--cds-hover-secondary, #4c4c4c);
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
   cursor: pointer;
 }
-.c4p--non-linear-reading__term-dark--open svg {
-  padding-top: 0.0625rem;
-  margin: 0 var(--cds-spacing-02, 0.25rem) 0 var(--cds-spacing-01, 0.125rem);
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
+  margin: 0.0625rem 0 0 0;
   vertical-align: text-top;
 }
-.c4p--non-linear-reading__term-dark--open:hover {
-  background-color: #7f3ae7;
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open svg {
+  transform: rotate(180deg);
 }
-.c4p--non-linear-reading--body-light {
-  font-size: var(--cds-body-long-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-long-01-font-weight, 400);
-  line-height: var(--cds-body-long-01-line-height, 1.42857);
-  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
-  display: block;
-  padding: var(--cds-spacing-03, 0.5rem) var(--cds-spacing-04, 0.75rem);
-  border-left-width: 0.078125rem;
-  border-left-style: solid;
-  margin: var(--cds-spacing-02, 0.25rem) 0;
-  animation: fade 600ms;
-  border-left-color: #6929c4;
-  color: #6929c4;
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__keyword-open:hover {
+  background-color: transparent;
+  color: var(--cds-text-01, #161616);
 }
-.c4p--non-linear-reading--body-dark {
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__body {
   --cds-interactive-01: #0f62fe;
   --cds-interactive-02: #6f6f6f;
   --cds-interactive-03: #ffffff;
@@ -24472,8 +24518,11 @@ th.c4p--datagrid__select-all-toggle-on.button {
   border-left-style: solid;
   margin: var(--cds-spacing-02, 0.25rem) 0;
   animation: fade 600ms;
-  border-left-color: #d4bbff;
-  color: #d4bbff;
+  border-left-color: var(--cds-text-01, #161616);
+  color: var(--cds-text-01, #161616);
+}
+.c4p--non-linear-reading__dark .c4p--non-linear-reading__body a {
+  color: var(--cds-link-01, #0f62fe);
 }
 
 @font-face {