fix(live demo): update live labels and add feature flag toggle (carbon-design-system#4780)

alisonjoseph · web-flow · commit 055c96db8cb2 · 2026-01-21T13:59:36.000-06:00
diff --git a/src/pages/components/structured-list/code.mdx b/src/pages/components/structured-list/code.mdx
@@ -91,7 +91,7 @@ structured list to always be visible, even when not selected.
       variant: 'components-structuredlist--selection',
     },
     {
-      label: 'Selectable with improved accessibility (unstable)',
+      label: 'Selectable with improved accessibility (preview)',
       variant: 'components-structuredlist-feature-flag--selection',
     },
   ]}
diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx
@@ -48,7 +48,7 @@ definitions.
       variant: 'components-structuredlist--selection',
     },
     {
-      label: 'Selectable with improved accessibility (unstable)',
+      label: 'Selectable with improved accessibility (preview)',
       variant: 'components-structuredlist-feature-flag--selection',
     },
   ]}
diff --git a/src/pages/components/tile/code.mdx b/src/pages/components/tile/code.mdx
@@ -120,23 +120,23 @@ feature flags will become the default version of the component.
       variant: 'components-tile--selectable',
     },
     {
-      label: 'Clickable with improved contrast (unstable)',
+      label: 'Clickable with improved contrast (preview)',
       variant: 'components-tile-feature-flag--clickable',
     },
     {
-      label: 'Expandable with improved contrast (unstable)',
+      label: 'Expandable with improved contrast (preview)',
       variant: 'components-tile-feature-flag--expandable',
     },
     {
-      label: 'Multiselect with improved contrast (unstable)',
+      label: 'Multiselect with improved contrast (preview)',
       variant: 'components-tile-feature-flag--multi-select',
     },
     {
-      label: 'Radio with improved contrast (unstable)',
+      label: 'Radio with improved contrast (preview)',
       variant: 'components-tile-feature-flag--radio',
     },
     {
-      label: 'Selectable with improved contrast (unstable)',
+      label: 'Selectable with improved contrast (preview)',
       variant: 'components-tile-feature-flag--selectable',
     },
     {
diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx
@@ -81,23 +81,23 @@ explainability feature when AI is present in the component.
       variant: 'components-tile--selectable',
     },
     {
-      label: 'Clickable with improved contrast (unstable)',
+      label: 'Clickable with improved contrast (preview)',
       variant: 'components-tile-feature-flag--clickable',
     },
     {
-      label: 'Expandable with improved contrast (unstable)',
+      label: 'Expandable with improved contrast (preview)',
       variant: 'components-tile-feature-flag--expandable',
     },
     {
-      label: 'Multiselect with improved contrast (unstable)',
+      label: 'Multiselect with improved contrast (preview)',
       variant: 'components-tile-feature-flag--multi-select',
     },
     {
-      label: 'Radio with improved contrast (unstable)',
+      label: 'Radio with improved contrast (preview)',
       variant: 'components-tile-feature-flag--radio',
     },
     {
-      label: 'Selectable with improved contrast (unstable)',
+      label: 'Selectable with improved contrast (preview)',
       variant: 'components-tile-feature-flag--selectable',
     },
     {
diff --git a/src/pages/components/toggle/code.mdx b/src/pages/components/toggle/code.mdx
@@ -80,12 +80,16 @@ the toggle label and its container to be 8px instead of 16px.
   url="https://react.carbondesignsystem.com"
   variants={[
     {
-      label: 'Default',
+      label: 'Default toggle',
       variant: 'components-toggle--default',
     },
     {
       label: 'Small toggle',
       variant: 'components-toggle--small-toggle',
     },
+    {
+      label: 'Default toggle (preview)',
+      variant: 'components-toggle-feature-flag--toggle',
+    },
   ]}
 />
diff --git a/src/pages/components/toggle/usage.mdx b/src/pages/components/toggle/usage.mdx
@@ -39,13 +39,17 @@ commonly used for “on/off” switches.
   url="https://react.carbondesignsystem.com"
   variants={[
     {
-      label: 'Default',
+      label: 'Default toggle',
       variant: 'components-toggle--default',
     },
     {
       label: 'Small toggle',
       variant: 'components-toggle--small-toggle',
     },
+    {
+      label: 'Default toggle (preview)',
+      variant: 'components-toggle-feature-flag--toggle',
+    },
   ]}
 />
 

Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ structured list to always be visible, even when not selected.`
`91`	`91`	`variant: 'components-structuredlist--selection',`
`92`	`92`	`},`
`93`	`93`	`{`
`94`		`- label: 'Selectable with improved accessibility (unstable)',`
	`94`	`+ label: 'Selectable with improved accessibility (preview)',`
`95`	`95`	`variant: 'components-structuredlist-feature-flag--selection',`
`96`	`96`	`},`
`97`	`97`	`]}`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ definitions.`
`48`	`48`	`variant: 'components-structuredlist--selection',`
`49`	`49`	`},`
`50`	`50`	`{`
`51`		`- label: 'Selectable with improved accessibility (unstable)',`
	`51`	`+ label: 'Selectable with improved accessibility (preview)',`
`52`	`52`	`variant: 'components-structuredlist-feature-flag--selection',`
`53`	`53`	`},`
`54`	`54`	`]}`
Original file line number	Diff line number	Diff line change
`@@ -120,23 +120,23 @@ feature flags will become the default version of the component.`
`120`	`120`	`variant: 'components-tile--selectable',`
`121`	`121`	`},`
`122`	`122`	`{`
`123`		`- label: 'Clickable with improved contrast (unstable)',`
	`123`	`+ label: 'Clickable with improved contrast (preview)',`
`124`	`124`	`variant: 'components-tile-feature-flag--clickable',`
`125`	`125`	`},`
`126`	`126`	`{`
`127`		`- label: 'Expandable with improved contrast (unstable)',`
	`127`	`+ label: 'Expandable with improved contrast (preview)',`
`128`	`128`	`variant: 'components-tile-feature-flag--expandable',`
`129`	`129`	`},`
`130`	`130`	`{`
`131`		`- label: 'Multiselect with improved contrast (unstable)',`
	`131`	`+ label: 'Multiselect with improved contrast (preview)',`
`132`	`132`	`variant: 'components-tile-feature-flag--multi-select',`
`133`	`133`	`},`
`134`	`134`	`{`
`135`		`- label: 'Radio with improved contrast (unstable)',`
	`135`	`+ label: 'Radio with improved contrast (preview)',`
`136`	`136`	`variant: 'components-tile-feature-flag--radio',`
`137`	`137`	`},`
`138`	`138`	`{`
`139`		`- label: 'Selectable with improved contrast (unstable)',`
	`139`	`+ label: 'Selectable with improved contrast (preview)',`
`140`	`140`	`variant: 'components-tile-feature-flag--selectable',`
`141`	`141`	`},`
`142`	`142`	`{`
Original file line number	Diff line number	Diff line change
`@@ -81,23 +81,23 @@ explainability feature when AI is present in the component.`
`81`	`81`	`variant: 'components-tile--selectable',`
`82`	`82`	`},`
`83`	`83`	`{`
`84`		`- label: 'Clickable with improved contrast (unstable)',`
	`84`	`+ label: 'Clickable with improved contrast (preview)',`
`85`	`85`	`variant: 'components-tile-feature-flag--clickable',`
`86`	`86`	`},`
`87`	`87`	`{`
`88`		`- label: 'Expandable with improved contrast (unstable)',`
	`88`	`+ label: 'Expandable with improved contrast (preview)',`
`89`	`89`	`variant: 'components-tile-feature-flag--expandable',`
`90`	`90`	`},`
`91`	`91`	`{`
`92`		`- label: 'Multiselect with improved contrast (unstable)',`
	`92`	`+ label: 'Multiselect with improved contrast (preview)',`
`93`	`93`	`variant: 'components-tile-feature-flag--multi-select',`
`94`	`94`	`},`
`95`	`95`	`{`
`96`		`- label: 'Radio with improved contrast (unstable)',`
	`96`	`+ label: 'Radio with improved contrast (preview)',`
`97`	`97`	`variant: 'components-tile-feature-flag--radio',`
`98`	`98`	`},`
`99`	`99`	`{`
`100`		`- label: 'Selectable with improved contrast (unstable)',`
	`100`	`+ label: 'Selectable with improved contrast (preview)',`
`101`	`101`	`variant: 'components-tile-feature-flag--selectable',`
`102`	`102`	`},`
`103`	`103`	`{`