[UIK-3931][typography] update margins and stories

semcore/typography/__tests__/typography.browser-test.tsx

@@ -202,4 +202,51 @@ test.describe(`${TAG.VISUAL}`, () => {
       await expect(page).toHaveScreenshot();
     });
   });
+
+  test('Verify paragraph and list margins with formatTags', {
+    tag: [TAG.PRIORITY_HIGH, '@typography'],
+  }, async ({ page }) => {
+    await loadPage(page, 'stories/components/typography/tests/examples/paragraph-and-list-margins.tsx', 'en', { formatTags: true });
+
+    await test.step('Verify size=200 paragraph margins (should be 3x = 12px)', async () => {
+      // Size 200 paragraphs are the 5th and 6th p elements (indices 4, 5)
+      const size200P = page.locator('p').nth(4);
+      await expect(size200P).toHaveCSS('margin-bottom', '12px');
+    });
+
+    await test.step('Verify size=300 paragraph margins (should be 4x = 16px)', async () => {
+      // Size 300 paragraphs are the 7th and 8th p elements (indices 6, 7)
+      const size300P = page.locator('p').nth(6);
+      await expect(size300P).toHaveCSS('margin-bottom', '16px');
+    });
+
+    await test.step('Verify ul followed by p has matching margin (4x = 16px)', async () => {
+      // The second ul (index 1) is followed by a paragraph
+      const listFollowedByP = page.locator('ul').nth(1);
+      await expect(listFollowedByP).toHaveCSS('margin-bottom', '16px');
+    });
+
+    await test.step('Verify standalone ul has default margin (2x = 8px)', async () => {
+      // The first ul (index 0) is standalone
+      const standaloneList = page.locator('ul').first();
+      await expect(standaloneList).toHaveCSS('margin-bottom', '8px');
+    });
+  });
+
+  const formattedNestedListMargins = [
+    { formatTags: true },
+    { formatTags: false },
+  ];
+
+  formattedNestedListMargins.forEach((item) => {
+    test(`Verify formatted nested list margins with formatTags=${item.formatTags}`, {
+      tag: [TAG.PRIORITY_HIGH, '@typography'],
+    }, async ({ page }) => {
+      await loadPage(page, 'stories/components/typography/tests/examples/formatted-nested-list-margins.tsx', 'en', item);
+
+      await test.step('Verify formatted nested list margins visual', async () => {
+        await expect(page).toHaveScreenshot();
+      });
+    });
+  });
 });

semcore/typography/src/style/text.shadow.css

@@ -106,6 +106,11 @@ SText {
       background-color: var(--intergalactic-icon-primary-neutral, #6c6e79);
     }
 
+    & ol:not(ol[start], ol[reversed], ol[type]):has(+ p),
+    & ul:not(ul[start], ul[reversed], ul[type]):has(+ p) {
+      margin-bottom: var(--intergalactic-spacing-4x, 16px);
+    }
+
     & h1 {
       font-size: var(--intergalactic-fs-800, 48px);
       line-height: var(--intergalactic-lh-800, 117%);
@@ -192,7 +197,7 @@ SText {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
+      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -298,7 +303,7 @@ SText[size='200'] {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-5x, 20px) 0;
+      margin: 0 0 var(--intergalactic-spacing-3x, 12px) 0;
 
       &:last-child {
         margin-bottom: 0;
@@ -340,7 +345,7 @@ SText[size='300'] {
     }
 
     & p {
-      margin: 0 0 var(--intergalactic-spacing-6x, 24px) 0;
+      margin: 0 0 var(--intergalactic-spacing-4x, 16px) 0;
 
       &:last-child {
         margin-bottom: 0;

stories/components/typography/docs/examples/basic-usage.tsx

@@ -39,7 +39,7 @@ const Demo = () => (
     <Text size={200} tag='p' mb={3} mt={0}>
       Paragraph example.
     </Text>
-    <Text tag='p' mb={2} mt={10}>
+    <Text tag='p' mb={3} mt={10}>
       Paragraph example, 16px, --fs-300
     </Text>
     <Text size={200} tag='p' mb={3} mt={0}>

stories/components/typography/docs/examples/list-with-custom-bullets.tsx

@@ -5,12 +5,24 @@ import React from 'react';
 
 const Demo = () => (
   <div>
-    <List size={300} marker={<Box tag={CheckM} color='icon-secondary-success' mt={1} />}>
+    <List mb={4} size={300} marker={<Box tag={CheckM} color='icon-secondary-success' mt={1} />}>
       <List.Item>List item with custom bullet.</List.Item>
       <List.Item marker={<Box tag={CheckM} color='icon-secondary-neutral' mt={1} />}>
         List item with other custom bullet.
       </List.Item>
     </List>
+    <List mb={4} size={200} marker={<Box tag={CheckM} color='icon-secondary-success' />}>
+      <List.Item>List item with custom bullet.</List.Item>
+      <List.Item marker={<Box tag={CheckM} color='icon-secondary-neutral' />}>
+        List item with other custom bullet.
+      </List.Item>
+    </List>
+    <List mb={4} size={100} marker={<Box tag={CheckM} color='icon-secondary-success' />}>
+      <List.Item>List item with custom bullet.</List.Item>
+      <List.Item marker={<Box tag={CheckM} color='icon-secondary-neutral' />}>
+        List item with other custom bullet.
+      </List.Item>
+    </List>
   </div>
 );
 

stories/components/typography/tests/examples/formatted-nested-list-margins.tsx

@@ -0,0 +1,55 @@
+import { Text } from '@semcore/ui/typography';
+import type { TextProps } from '@semcore/ui/typography';
+import React from 'react';
+
+const Demo = (props: TextProps) => (
+  <div>
+    <Text size={100} formatTags={props.formatTags}>
+      <ol start={1}>
+        <li>List item one</li>
+        <li>
+          List item two with subitems:
+          <ul>
+            <li>Subitem 1</li>
+            <li>Subitem 2</li>
+          </ul>
+        </li>
+        <li>Final list item</li>
+      </ol>
+    </Text>
+    <Text size={200} formatTags={props.formatTags}>
+      <ol start={1}>
+        <li>List item one</li>
+        <li>
+          List item two with subitems:
+          <ul>
+            <li>Subitem 1</li>
+            <li>Subitem 2</li>
+          </ul>
+        </li>
+        <li>Final list item</li>
+      </ol>
+    </Text>
+    <Text size={300} formatTags={props.formatTags}>
+      <ol start={1}>
+        <li>List item one</li>
+        <li>
+          List item two with subitems:
+          <ul>
+            <li>Subitem 1</li>
+            <li>Subitem 2</li>
+          </ul>
+        </li>
+        <li>Final list item</li>
+      </ol>
+    </Text>
+  </div>
+);
+
+export const defaultProps: TextProps = {
+  formatTags: true,
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;

stories/components/typography/tests/examples/paragraph-and-list-margins.tsx

@@ -0,0 +1,73 @@
+import { Text } from '@semcore/ui/typography';
+import type { TextProps } from '@semcore/ui/typography';
+import React from 'react';
+
+const Demo = (props: TextProps) => (
+  <div>
+    {/* Default size paragraphs */}
+    <Text formatTags={props.formatTags}>
+      <p>Default paragraph with 4x bottom margin (16px)</p>
+      <p>Another default paragraph</p>
+    </Text>
+
+    {/* size=100 paragraphs */}
+    <Text size={100} formatTags={props.formatTags}>
+      <p>Size 100 paragraph with 4.5x bottom margin (18px)</p>
+      <p>Another size 100 paragraph</p>
+    </Text>
+
+    {/* size=200 paragraphs - should be 3x (12px) */}
+    <Text size={200} formatTags={props.formatTags}>
+      <p>Size 200 paragraph with 3x bottom margin (12px)</p>
+      <p>Another size 200 paragraph</p>
+    </Text>
+
+    {/* size=300 paragraphs - should be 4x (16px) */}
+    <Text size={300} formatTags={props.formatTags}>
+      <p>Size 300 paragraph with 4x bottom margin (16px)</p>
+      <p>Another size 300 paragraph</p>
+    </Text>
+
+    {/* ul with default 2x margins */}
+    <Text formatTags={props.formatTags}>
+      <ul>
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li>List item 3</li>
+      </ul>
+    </Text>
+
+    {/* ul followed by p - list should have 4x bottom margin (16px) to match p */}
+    <Text formatTags={props.formatTags}>
+      <ul>
+        <li>List item 1</li>
+        <li>List item 2</li>
+        <li>List item 3</li>
+      </ul>
+      <p>This paragraph follows the list. The list above should have 4x (16px) bottom margin.</p>
+    </Text>
+
+    {/* Multiple lists and paragraphs */}
+    <Text formatTags={props.formatTags}>
+      <p>Paragraph before list</p>
+      <ul>
+        <li>List item 1</li>
+        <li>List item 2</li>
+      </ul>
+      <p>Paragraph after list</p>
+      <ul>
+        <li>Another list item 1</li>
+        <li>Another list item 2</li>
+      </ul>
+      <p>Final paragraph</p>
+    </Text>
+  </div>
+);
+
+export const defaultProps: TextProps = {
+  formatTags: true,
+};
+
+Demo.defaultProps = defaultProps;
+
+export default Demo;

stories/components/typography/tests/examples/text-font-size-and-weight-headers-and-paragrapsh.tsx

@@ -44,7 +44,7 @@ const Demo = () => (
       <Text size={200} tag='p' mb={3} mt={0}>
         Paragraph, 14px, --fs-200
       </Text>
-      <Text tag='p' mb={2} mt={10}>
+      <Text tag='p' mb={3} mt={10}>
         Paragraph example, 16px, --fs-300
       </Text>
       <Text size={200} tag='p' mb={3} mt={0}>

stories/components/typography/tests/typography.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import BloquoteExample, { defaultProps as BloquoteProps } from './examples/blockquote';
+import FormattedNestedListMarginsExample, { defaultProps as FormattedNestedListMarginsProps } from './examples/formatted-nested-list-margins';
 import ListAxeExample from './examples/list-axe-test';
 import ListNestedExample, { defaultProps as ListNestedProps } from './examples/nested-list';
 import TextFontAndSizeExample from './examples/text-font-size-and-weight-headers-and-paragrapsh';
@@ -101,3 +102,11 @@ export const TextFontAndSize: Story = {
 export const ListExampleAxe: Story = {
   render: ListAxeExample,
 };
+
+export const FormattedNestedListMargins: StoryObj<typeof FormattedNestedListMarginsProps> = {
+  render: FormattedNestedListMarginsExample,
+  argTypes: {
+    ...getCommonArgTypes(),
+  },
+  args: FormattedNestedListMarginsProps,
+};