@carbon/ibm-products 1.51.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

@@ -23135,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;
@@ -23594,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__term-dark--open {
+.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__dark .c4p--non-linear-reading__keyword-open {
   --cds-interactive-01: #0f62fe;
   --cds-interactive-02: #6f6f6f;
   --cds-interactive-03: #ffffff;
@@ -24030,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;
@@ -24496,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 {