Skip to content

Commit 3bdbab6

Browse files
JialeclJialecl
authored
Merge branch 'master' into Mil4n0r/lazy-load-datagrid
2 parents 101087b + 8a920a6 commit 3bdbab6

38 files changed

+1226
-339
lines changed

‎apps/website/pages/foundations/height.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Head from "next/head";
2+
import HeightPage from "screens/foundations/height/HeightPage";
3+
4+
const Height = () => (
5+
<>
6+
<Head>
7+
<title>Height — Halstack Design System</title>
8+
</Head>
9+
<HeightPage />
10+
</>
11+
);
12+
13+
export default Height;

‎apps/website/pages/foundations/iconography.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Head from "next/head";
2+
import IconographyPage from "screens/foundations/iconography/IconographyPage";
3+
4+
const Iconography = () => (
5+
<>
6+
<Head>
7+
<title>Iconography — Halstack Design System</title>
8+
</Head>
9+
<IconographyPage />
10+
</>
11+
);
12+
13+
export default Iconography;

apps/website/pages/principles/spacing.tsx renamed to apps/website/pages/foundations/spacing.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Head from "next/head";
2-
import SpacingPage from "screens/principles/spacing/SpacingPage";
2+
import SpacingPage from "screens/foundations/spacing/SpacingPage";
33

44
const Spacing = () => (
55
<>

‎apps/website/screens/common/pagesList.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,15 @@ const principlesLinks: LinkDetails[] = [
3737
{ label: "Iconography", path: "/principles/iconography" },
3838
{ label: "Layout", path: "/principles/layout" },
3939
{ label: "Localization", path: "/principles/localization" },
40-
{ label: "Spacing", path: "/principles/spacing" },
4140
{ label: "Typography", path: "/principles/typography" },
4241
];
4342

44-
const foundationsLinks: LinkDetails[] = [{ label: "Color", path: "/foundations/color" }];
43+
const foundationsLinks: LinkDetails[] = [
44+
{ label: "Color", path: "/foundations/color" },
45+
{ label: "Height", path: "/foundations/height" },
46+
{ label: "Iconography", path: "/foundations/iconography" },
47+
{ label: "Spacing", path: "/foundations/spacing" },
48+
];
4549

4650
const componentsLinks = componentsList as LinkDetails[];
4751

‎apps/website/screens/foundations/height/HeightPage.tsx‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
import { DxcFlex, DxcParagraph, DxcHeading, DxcBulletedList, DxcTable } from "@dxc-technology/halstack-react";
2+
import QuickNavContainer from "@/common/QuickNavContainer";
3+
import DocFooter from "@/common/DocFooter";
4+
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
5+
import PageHeading from "@/common/PageHeading";
6+
import Code from "@/common/Code";
7+
8+
const sections = [
9+
{
10+
title: "Introduction",
11+
content: (
12+
<>
13+
<DxcParagraph>
14+
In Halstack, dimensions refer specifically to the <strong>height</strong> of UI elements such as buttons,
15+
inputs, icons, and other interactive components. While spacing controls the{" "}
16+
<strong>distance between elements</strong>, dimensions define the <strong>vertical size</strong> of the
17+
elements themselves.
18+
</DxcParagraph>
19+
<DxcParagraph>
20+
Maintaining consistent height values across the interface ensures a predictable rhythm, enhances scannability,
21+
and simplifies the construction of flexible, responsive layouts.
22+
</DxcParagraph>
23+
</>
24+
),
25+
},
26+
{
27+
title: "Purpose",
28+
content: (
29+
<>
30+
<DxcParagraph>
31+
Our scale was designed with a balance between flexibility and simplicity. It follows a loosely exponential
32+
progression that prioritizes <strong>touch accessibility</strong>, <strong>icon alignment</strong> and{" "}
33+
<strong>component density levels</strong>. Although not every element of our Design System follows a fixed
34+
height structure, keeping the system as <strong>modular and progressive</strong> as we can, designers and
35+
developers can reason more easily about vertical alignment and component consistency.
36+
</DxcParagraph>
37+
<DxcParagraph>
38+
In summary, we defined a limited set of height values that serve as our <strong>core dimension tokens</strong>
39+
. These values are chosen to:
40+
</DxcParagraph>
41+
<DxcBulletedList>
42+
<DxcBulletedList.Item>Align with our spacing scale (multiples of 4px where possible)</DxcBulletedList.Item>
43+
<DxcBulletedList.Item>Support common component patterns</DxcBulletedList.Item>
44+
<DxcBulletedList.Item>Create visual consistency and predictable touch targets</DxcBulletedList.Item>
45+
<DxcBulletedList.Item>Allow cross-platform scalability and design token standardization</DxcBulletedList.Item>
46+
</DxcBulletedList>
47+
</>
48+
),
49+
},
50+
{
51+
title: "Core height tokens",
52+
content: (
53+
<DxcTable>
54+
<thead>
55+
<tr>
56+
<th>Value</th>
57+
<th>Token</th>
58+
<th>Typical usage examples</th>
59+
</tr>
60+
</thead>
61+
<tbody>
62+
<tr>
63+
<td>12px</td>
64+
<td>
65+
<Code>dimensions/12</Code>
66+
</td>
67+
<td>Small icons, badges, or inline indicators</td>
68+
</tr>
69+
<tr>
70+
<td>16px</td>
71+
<td>
72+
<Code>dimensions/16</Code>
73+
</td>
74+
<td>Smaller icons size</td>
75+
</tr>
76+
<tr>
77+
<td>20px</td>
78+
<td>
79+
<Code>dimensions/20</Code>
80+
</td>
81+
<td>Small buttons or compact UI elements</td>
82+
</tr>
83+
<tr>
84+
<td>24px</td>
85+
<td>
86+
<Code>dimensions/24</Code>
87+
</td>
88+
<td>Standard icon size and input height for dense forms</td>
89+
</tr>
90+
<tr>
91+
<td>32px</td>
92+
<td>
93+
<Code>dimensions/32</Code>
94+
</td>
95+
<td>Default button/input height in compact UIs</td>
96+
</tr>
97+
<tr>
98+
<td>36px</td>
99+
<td>
100+
<Code>dimensions/36</Code>
101+
</td>
102+
<td>Secondary button/input variant</td>
103+
</tr>
104+
<tr>
105+
<td>40px</td>
106+
<td>
107+
<Code>dimensions/40</Code>
108+
</td>
109+
<td>Default form element height</td>
110+
</tr>
111+
<tr>
112+
<td>48px</td>
113+
<td>
114+
<Code>dimensions/48</Code>
115+
</td>
116+
<td>Primary button, larger input elements</td>
117+
</tr>
118+
<tr>
119+
<td>56px</td>
120+
<td>
121+
<Code>dimensions/56</Code>
122+
</td>
123+
<td>High emphasis elements, banners</td>
124+
</tr>
125+
</tbody>
126+
</DxcTable>
127+
),
128+
},
129+
{
130+
title: "Best practices",
131+
content: (
132+
<DxcBulletedList>
133+
<DxcBulletedList.Item>
134+
<strong>Stick to the core</strong>: when designing, try to stick as much as possible with our height tokens to
135+
create consistent layouts across products. Avoid arbitrary custom heights unless strictly necessary.
136+
</DxcBulletedList.Item>
137+
<DxcBulletedList.Item>
138+
<strong>Respect touch targets</strong>: Ensure interactive elements like buttons and inputs are at least
139+
<Code>height-40</Code> for accessibility and usability.
140+
</DxcBulletedList.Item>
141+
<DxcBulletedList.Item>
142+
<strong>Align height with layout spacing</strong>: Use the same spacing unit system (<Code>spacing-4</Code>,{" "}
143+
<Code>spacing-8</Code>, etc.) to vertically pad elements so they integrate seamlessly.
144+
</DxcBulletedList.Item>
145+
<DxcBulletedList.Item>
146+
<strong>Don't scale height independently</strong>: Avoid resizing components vertically in isolation without
147+
updating spacing or content padding.
148+
</DxcBulletedList.Item>
149+
<DxcBulletedList.Item>
150+
<strong>Use tokens in code and design</strong>: Reference tokens (e.g., <Code>height-40</Code>) directly in
151+
CSS or Figma components for consistency and easier maintenance.
152+
</DxcBulletedList.Item>
153+
<DxcBulletedList.Item>
154+
<strong>Use for more than buttons</strong>: These values apply to any vertically bound element, not just
155+
buttons and inputs, but also chips, icons, rows, and list items.
156+
</DxcBulletedList.Item>
157+
</DxcBulletedList>
158+
),
159+
},
160+
];
161+
162+
export default function HeightPage() {
163+
return (
164+
<DxcFlex direction="column" gap="4rem">
165+
<PageHeading>
166+
<DxcFlex direction="column" gap="var(--spacing-gap-xl)">
167+
<DxcHeading level={1} text="Color" />
168+
</DxcFlex>
169+
</PageHeading>
170+
<QuickNavContainerLayout>
171+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
172+
</QuickNavContainerLayout>
173+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/foundations/height/HeightPage.tsx" />
174+
</DxcFlex>
175+
);
176+
}

0 commit comments

Comments
 (0)