Skip to content

BulletedList redesign #2152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jialecl merged 9 commits into from
Jun 10, 2025
Merged

BulletedList redesign #2152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4f21428
First version (missing bullet height token)
Feb 3, 2025
88ee0a1
Uncomment index.ts
Feb 3, 2025
bd7bd65
Removed comments and changed symbol size
Feb 5, 2025
16f581e
Fixed preview for storybook
Feb 5, 2025
c0d8100
Fixed icon size
Feb 6, 2025
0c0b762
Changed documentation structure
May 26, 2025
b5f6e0d
Merge branch 'master' of github.com:dxc-technology/halstack-react int…
May 26, 2025
f658b65
Added documentation for bulleted list
May 26, 2025
5a527b9
Added fixes for code review
Jun 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/bulleted-list/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import BulletedListCodePage from "screens/components/bulleted-list/code/BulletedListCodePage";
import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout";

const Code = () => (
<>
<Head>
<title>Bulleted list code — Halstack Design System</title>
</Head>
<BulletedListCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <BulletedListPageLayout>{page}</BulletedListPageLayout>;

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/bulleted-list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import BulletedListPageLayout from "screens/components/bulleted-list/BulletedListPageLayout";
import BulletedListCodePage from "screens/components/bulleted-list/code/BulletedListCodePage";
import BulletedListOverviewPage from "screens/components/bulleted-list/overview/BulletedListOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Bulleted List — Halstack Design System</title>
</Head>
<BulletedListCodePage />
</>
);
};
const Index = () => (
<>
<Head>
<title>Bulleted List — Halstack Design System</title>
</Head>
<BulletedListOverviewPage />
</>
);

Index.getLayout = function getLayout(page: ReactElement) {
return <BulletedListPageLayout>{page}</BulletedListPageLayout>;
};
Index.getLayout = (page: ReactElement) => <BulletedListPageLayout>{page}</BulletedListPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/bulleted-list/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/bulleted-list/usage.tsx
View file
Open in desktop

This file was deleted.

10 changes: 3 additions & 7 deletions apps/website/screens/components/bulleted-list/BulletedListPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,16 @@ import { ReactNode } from "react";

const BulletedListPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/bulleted-list" },
{ label: "Usage", path: "/components/bulleted-list/usage" },
{
label: "Specifications",
path: "/components/bulleted-list/specifications",
},
{ label: "Overview", path: "/components/bulleted-list" },
{ label: "Code", path: "/components/bulleted-list/code" },
];
return (
<DxcFlex direction="column" gap="var(--spacing-gap-xxl)">
<PageHeading>
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
<ComponentHeading name="Bulleted List" />
<DxcParagraph>Bulleted list are used to display text items in a bulleted format.</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
44 changes: 21 additions & 23 deletions apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,19 @@ const sections = [
</thead>
<tbody>
<tr>
<td>type</td>
<td>
<TableCode>'disc' | 'circle' | 'square' | 'number' | 'icon'</TableCode>
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>Defines the style of the bullet point in the list.</td>
<td>
<Code>'disc'</Code>
<TableCode>React.ReactNode</TableCode>
</td>
<td>
Contains one or more <Code>DxcBulletedList.Item</Code>.
</td>
<td>-</td>
</tr>
<tr>
<td>icon</td>
Expand All @@ -48,19 +53,14 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>type</td>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
children
</DxcFlex>
</td>
<td>
<TableCode>React.ReactNode</TableCode>
<TableCode>'disc' | 'circle' | 'square' | 'number' | 'icon'</TableCode>
</td>
<td>Defines the style of the bullet point in the list.</td>
<td>
Contains one or more <Code>DxcBulletedList.Item</Code>.
<Code>'disc'</Code>
</td>
<td>-</td>
</tr>
</tbody>
</DxcTable>
Expand Down Expand Up @@ -117,15 +117,13 @@ const sections = [
},
];

const BulletedListCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx" />
</DxcFlex>
);
};
const BulletedListCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/code/BulletedListCodePage.tsx" />
</DxcFlex>
);

export default BulletedListCodePage;
175 changes: 175 additions & 0 deletions apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
import Code from "@/common/Code";
import DocFooter from "@/common/DocFooter";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import { DxcFlex, DxcBulletedList, DxcParagraph, DxcAlert } from "@dxc-technology/halstack-react";
import anatomy from "./images/bulleted_list_anatomy.png";
import Example from "@/common/example/Example";
import disc from "./examples/disc";
import circle from "./examples/circle";
import square from "./examples/square";
import number from "./examples/number";
import icon from "./examples/icon";
import Image from "@/common/Image";

const sections = [
{
title: "Introduction",
content: (
<>
<DxcParagraph>
Bulleted lists are used to present grouped information in a clear, scannable format. They help users quickly
identify key points or related items without following a specific order. In Halstack, the bulleted list
component supports customizable icon variants, and nesting levels to adapt to different content needs while
maintaining consistency and readability across the interface. Use this component to enhance clarity and break
down complex information into digestible chunks.
</DxcParagraph>
<DxcAlert
title="Use cases"
semantic="warning"
message={{
text: (
<DxcParagraph>
Disclaimer - This component is not a 1-to-1 replacement of the <Code>ul</Code> <Code>ol</Code> native
tags. These native tags have many different use-cases and the Bulleted List only covers one of them:
listing text items within a document.
</DxcParagraph>
),
}}
closable={false}
/>
</>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={anatomy} alt="Bulleted list's anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Bullet point:</strong> a small visual marker placed before each list item. It provides visual
separation and helps emphasize each individual entry within the list. The default style is a filled circle.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Label:</strong> the text content associated with each bullet point. It conveys the actual
information and should be clear, concise, and scannable for easy reading.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Types",
subSections: [
{
title: "Disc",
content: (
<>
<DxcParagraph>
Disc are the default type, represented by a filled circle. It is commonly used for the most standard lists
where content doesn't require special emphasis or categorization.
</DxcParagraph>
<Example example={disc} />
</>
),
},
{
title: "Circle",
content: (
<>
<DxcParagraph>
Showcased like an empty circle marker, they offer a lighter visual alternative. It is frequently used for
secondary or nested lists, or when a subtler design is preferred.
</DxcParagraph>
<Example example={circle} />
</>
),
},
{
title: "Square",
content: (
<>
<DxcParagraph>
Square types consist of a solid square marker that draws slightly more attention. This type is mostly used
for lists that need more visual weight, or for lists that need to be differentiated from standard content
blocks.
</DxcParagraph>
<Example example={square} />
</>
),
},
{
title: "Number",
content: (
<>
<DxcParagraph>
This type of bulleted list display items in a numbered sequence. They are used for lists that contain
ordered steps, instructions, or any content where sequence or priority is important.
</DxcParagraph>
<Example example={number} />
</>
),
},
{
title: "Icon",
content: (
<>
<DxcParagraph>
In this type of bulleted list, the visual marker is an icon instead of a standard one. They are commonly
used for lists that benefit from visual cues to reinforce meaning, such as warning icons, checkmarks or
status indicators.
</DxcParagraph>
<Example example={icon} />
</>
),
},
],
},
{
title: "Best practices",
content: (
<>
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Choose the appropriate bullet type for the context:</strong> use discs for standard lists, numbers
for sequences or steps, and icons when a visual cue adds clarity or emphasis.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Keep list items concise and scannable:</strong> lists should be easy to read at a glance. Use brief,
clear phrasing.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Maintain parallel structure:</strong> ensure that all list items follow a consistent grammatical
pattern to improve readability.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Avoid overusing nested lists:</strong> deeply nested lists can be hard to follow. Limit nesting to
one level if possible.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use punctuation consistently:</strong> if one item ends in a period, all items should, unless
they're just short phrases or single words.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Use spacing to improve legibility:</strong> ensure there is enough vertical space between items,
especially in longer lists.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
];

const BulletedListOverviewPage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/bulleted-list/overview/BulletedListOverviewPage.tsx" />
</DxcFlex>
);
};

export default BulletedListOverviewPage;
17 changes: 17 additions & 0 deletions apps/website/screens/components/bulleted-list/overview/examples/circle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { DxcBulletedList, DxcInset } from "@dxc-technology/halstack-react";
const code = `() => {
return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcBulletedList type="circle">
<DxcBulletedList.Item>Circle</DxcBulletedList.Item>
</DxcBulletedList>
</DxcInset>
);
}`;

const scope = {
DxcBulletedList,
DxcInset,
};

export default { code, scope };
Loading