Fix multiline examples (#3739)

jpmorganchase · Jul 9, 2024 · 5408d88 · 5408d88
1 parent 9d6919d
commit 5408d88
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 22 deletions.
diff --git a/packages/core/stories/checkbox/checkbox.stories.tsx b/packages/core/stories/checkbox/checkbox.stories.tsx
@@ -59,7 +59,9 @@ export const WithDescription: StoryFn<typeof Checkbox> = () => {
       label={
         <StackLayout gap={0.5} align="start">
           <Text>Bonds</Text>
-          <Text color="secondary">Debt securities</Text>
+          <Text color="secondary" styleAs="label">
+            Debt securities
+          </Text>
         </StackLayout>
       }
     />
@@ -191,7 +193,9 @@ const GroupWithDescriptions: StoryFn<typeof CheckboxGroup> = (args) => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>Alternatives</Text>
-            <Text color="secondary">Other investments</Text>
+            <Text color="secondary" styleAs="label">
+              Other investments
+            </Text>
           </StackLayout>
         }
       />
@@ -200,7 +204,9 @@ const GroupWithDescriptions: StoryFn<typeof CheckboxGroup> = (args) => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>Equities</Text>
-            <Text color="secondary">Company shares</Text>
+            <Text color="secondary" styleAs="label">
+              Company shares
+            </Text>
           </StackLayout>
         }
       />
@@ -209,7 +215,9 @@ const GroupWithDescriptions: StoryFn<typeof CheckboxGroup> = (args) => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>Fixed income</Text>
-            <Text color="secondary">Interest-paying</Text>
+            <Text color="secondary" styleAs="label">
+              Interest-paying
+            </Text>
           </StackLayout>
         }
       />
@@ -218,7 +226,9 @@ const GroupWithDescriptions: StoryFn<typeof CheckboxGroup> = (args) => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>Bonds</Text>
-            <Text color="secondary">Debt securities</Text>
+            <Text color="secondary" styleAs="label">
+              Debt securities
+            </Text>
           </StackLayout>
         }
       />

diff --git a/packages/core/stories/list-box/list-box.stories.tsx b/packages/core/stories/list-box/list-box.stories.tsx
@@ -103,9 +103,7 @@ export const ComplexOptions = (): ReactElement => {
       {shortColorWithHex.slice(0, 5).map(({ color, hex }) => (
         <Option value={color} key={color}>
           <StackLayout gap={0.5} align="start">
-            <Text>
-              <strong>{color}</strong>
-            </Text>
+            <Text>{color}</Text>
             <Text styleAs="label" color="secondary">
               {hex}
             </Text>

diff --git a/packages/core/stories/radio-button/radio-button.stories.tsx b/packages/core/stories/radio-button/radio-button.stories.tsx
@@ -27,7 +27,9 @@ export const WithDescription = () => {
       label={
         <StackLayout gap={0.5} align="start">
           <Text>Bonds</Text>
-          <Text color="secondary">Debt securities</Text>
+          <Text color="secondary" styleAs="label">
+            Debt securities
+          </Text>
         </StackLayout>
       }
     />
@@ -93,7 +95,9 @@ const GroupWithDescriptions: StoryFn<typeof RadioButtonGroup> = (args) => (
       label={
         <StackLayout gap={0.5} align="start">
           <Text>NAMR</Text>
-          <Text color="secondary">North America</Text>
+          <Text color="secondary" styleAs="label">
+            North America
+          </Text>
         </StackLayout>
       }
     />
@@ -102,7 +106,9 @@ const GroupWithDescriptions: StoryFn<typeof RadioButtonGroup> = (args) => (
       label={
         <StackLayout gap={0.5} align="start">
           <Text>APAC</Text>
-          <Text color="secondary">Asia–Pacific</Text>
+          <Text color="secondary" styleAs="label">
+            Asia–Pacific
+          </Text>
         </StackLayout>
       }
     />
@@ -111,7 +117,9 @@ const GroupWithDescriptions: StoryFn<typeof RadioButtonGroup> = (args) => (
       label={
         <StackLayout gap={0.5} align="start">
           <Text>EMEA</Text>
-          <Text color="secondary">Europe, Middle East, and Africa</Text>
+          <Text color="secondary" styleAs="label">
+            Europe, Middle East, and Africa
+          </Text>
         </StackLayout>
       }
     />

diff --git a/site/src/examples/checkbox/WithDescription.tsx b/site/src/examples/checkbox/WithDescription.tsx
@@ -9,7 +9,9 @@ export const WithDescription = (): ReactElement => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>Alternatives</Text>
-            <Text color="secondary">Other investments</Text>
+            <Text color="secondary" styleAs="label">
+              Other investments
+            </Text>
           </StackLayout>
         }
       />
@@ -18,7 +20,9 @@ export const WithDescription = (): ReactElement => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>Equities</Text>
-            <Text color="secondary">Company shares</Text>
+            <Text color="secondary" styleAs="label">
+              Company shares
+            </Text>
           </StackLayout>
         }
       />
@@ -27,7 +31,9 @@ export const WithDescription = (): ReactElement => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>Fixed income</Text>
-            <Text color="secondary">Interest-paying</Text>
+            <Text color="secondary" styleAs="label">
+              Interest-paying
+            </Text>
           </StackLayout>
         }
       />
@@ -36,7 +42,9 @@ export const WithDescription = (): ReactElement => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>Bonds</Text>
-            <Text color="secondary">Debt securities</Text>
+            <Text color="secondary" styleAs="label">
+              Debt securities
+            </Text>
           </StackLayout>
         }
       />

diff --git a/site/src/examples/list-box/ComplexOptions.tsx b/site/src/examples/list-box/ComplexOptions.tsx
@@ -9,9 +9,7 @@ export const ComplexOptions = (): ReactElement => {
       {shortColorWithHex.slice(0, 5).map(({ color, hex }) => (
         <Option value={color} key={color}>
           <StackLayout gap={0.5} align="start">
-            <Text>
-              <strong>{color}</strong>
-            </Text>
+            <Text>{color}</Text>
             <Text styleAs="label" color="secondary">
               {hex}
             </Text>

diff --git a/site/src/examples/radio-button/WithDescription.tsx b/site/src/examples/radio-button/WithDescription.tsx
@@ -14,7 +14,9 @@ export const WithDescription = (): ReactElement => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>NAMR</Text>
-            <Text color="secondary">North America</Text>
+            <Text color="secondary" styleAs="label">
+              North America
+            </Text>
           </StackLayout>
         }
       />
@@ -23,7 +25,9 @@ export const WithDescription = (): ReactElement => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>APAC</Text>
-            <Text color="secondary">Asia–Pacific</Text>
+            <Text color="secondary" styleAs="label">
+              Asia–Pacific
+            </Text>
           </StackLayout>
         }
       />
@@ -32,7 +36,9 @@ export const WithDescription = (): ReactElement => {
         label={
           <StackLayout gap={0.5} align="start">
             <Text>EMEA</Text>
-            <Text color="secondary">Europe, Middle East, and Africa</Text>
+            <Text color="secondary" styleAs="label">
+              Europe, Middle East, and Africa
+            </Text>
           </StackLayout>
         }
       />