Skip to content

Commit d55dfa7

Browse files
GomezIvannGomezIvann
authored
Merge pull request #2161 from dxc-technology/Mil4n0r/tokens-dropdown
Dropdown redesign
2 parents 646cad5 + 64061fd commit d55dfa7

File tree

19 files changed

+478
-1117
lines changed

19 files changed

+478
-1117
lines changed

‎apps/website/pages/components/dropdown/code.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout";
4+
import DropdownCodePage from "screens/components/dropdown/code/DropdownCodePage";
5+
6+
const Code = () => {
7+
return (
8+
<>
9+
<Head>
10+
<title>Dropdown Code — Halstack Design System</title>
11+
</Head>
12+
<DropdownCodePage />
13+
</>
14+
);
15+
};
16+
17+
Code.getLayout = (page: ReactElement) => <DropdownPageLayout>{page}</DropdownPageLayout>;
18+
19+
export default Code;

‎apps/website/pages/components/dropdown/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout";
4-
import DropdownCodePage from "screens/components/dropdown/code/DropdownCodePage";
4+
import DropdownOverviewPage from "screens/components/dropdown/overview/DropdownOverviewPage";
55

66
const Index = () => {
77
return (
88
<>
99
<Head>
1010
<title>Dropdown — Halstack Design System</title>
1111
</Head>
12-
<DropdownCodePage></DropdownCodePage>
12+
<DropdownOverviewPage />
1313
</>
1414
);
1515
};
1616

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <DropdownPageLayout>{page}</DropdownPageLayout>;
19-
};
17+
Index.getLayout = (page: ReactElement) => <DropdownPageLayout>{page}</DropdownPageLayout>;
2018

2119
export default Index;

‎apps/website/pages/components/dropdown/specifications.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/pages/components/dropdown/usage.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/screens/components/dropdown/DropdownPageLayout.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
66

77
const DropdownPageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/dropdown" },
10-
{ label: "Usage", path: "/components/dropdown/usage" },
11-
{ label: "Specifications", path: "/components/dropdown/specifications" },
9+
{ label: "Overview", path: "/components/dropdown" },
10+
{ label: "Code", path: "/components/dropdown/code" },
1211
];
1312

1413
return (
@@ -17,12 +16,10 @@ const DropdownPageHeading = ({ children }: { children: ReactNode }) => {
1716
<DxcFlex direction="column" gap="2rem">
1817
<ComponentHeading name="Dropdown" />
1918
<DxcParagraph>
20-
The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard
21-
widget, so the users know how to interact with them. The options available in a dropdown component are
22-
static, preventing erroneous data entered by the user since it only shows a range of correct values for that
23-
input.
19+
The dropdown component is a compact, interactive element that allows users to select from a list of options,
20+
reducing clutter in the interface.
2421
</DxcParagraph>
25-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
22+
<TabsPageHeading tabs={tabs} />
2623
</DxcFlex>
2724
</PageHeading>
2825
{children}

‎apps/website/screens/components/dropdown/code/DropdownCodePage.tsx

Lines changed: 67 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -25,49 +25,33 @@ const sections = [
2525
</thead>
2626
<tbody>
2727
<tr>
28+
<td>caretHidden</td>
2829
<td>
29-
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
30-
<StatusBadge status="required" />
31-
options
32-
</DxcFlex>
30+
<TableCode>boolean</TableCode>
3331
</td>
32+
<td>Whether the arrow next to the label must be displayed or not.</td>
3433
<td>
35-
<TableCode>
36-
{
37-
"{ label?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[]"
38-
}
39-
</TableCode>
34+
<TableCode>false</TableCode>
4035
</td>
36+
</tr>
37+
<tr>
38+
<td>disabled</td>
4139
<td>
42-
An array of objects representing the options. Each object has the following properties:
43-
<ul>
44-
<li>
45-
<b>label</b>: Option display value.
46-
</li>
47-
<li>
48-
<b>icon</b>:{" "}
49-
<DxcLink newWindow href="https://fonts.google.com/icons">
50-
Material Symbol
51-
</DxcLink>{" "}
52-
name or SVG element as the icon that will be placed next to the option label. When using Material
53-
Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled
54-
prefix the symbol name with <TableCode>"filled_"</TableCode>.
55-
</li>
56-
<li>
57-
<b>value</b>: Option inner value.
58-
</li>
59-
</ul>
40+
<TableCode>boolean</TableCode>
41+
</td>
42+
<td>If true, the component will be disabled.</td>
43+
<td>
44+
<TableCode>false</TableCode>
6045
</td>
61-
<td>-</td>
6246
</tr>
6347
<tr>
64-
<td>optionsIconPosition</td>
48+
<td>expandOnHover</td>
6549
<td>
66-
<TableCode>'before' | 'after'</TableCode>
50+
<TableCode>boolean</TableCode>
6751
</td>
68-
<td>In case options include icons, whether the icon should appear after or before the label.</td>
52+
<td>If true, the options are shown when the dropdown is hovered.</td>
6953
<td>
70-
<TableCode>'before'</TableCode>
54+
<TableCode>false</TableCode>
7155
</td>
7256
</tr>
7357
<tr>
@@ -104,63 +88,79 @@ const sections = [
10488
<td>-</td>
10589
</tr>
10690
<tr>
107-
<td>caretHidden</td>
91+
<td>margin</td>
10892
<td>
109-
<TableCode>boolean</TableCode>
93+
<TableCode>
94+
'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
95+
</TableCode>
11096
</td>
111-
<td>Whether the arrow next to the label must be displayed or not.</td>
11297
<td>
113-
<TableCode>false</TableCode>
98+
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left'
99+
and 'right' properties in order to specify different margin sizes.
114100
</td>
101+
<td>-</td>
115102
</tr>
116103
<tr>
117-
<td>disabled</td>
118-
<td>
119-
<TableCode>boolean</TableCode>
120-
</td>
121-
<td>If true, the component will be disabled.</td>
122104
<td>
123-
<TableCode>false</TableCode>
105+
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
106+
<StatusBadge status="required" />
107+
onSelectOption
108+
</DxcFlex>
124109
</td>
125-
</tr>
126-
<tr>
127-
<td>expandOnHover</td>
128110
<td>
129-
<TableCode>boolean</TableCode>
111+
<TableCode>{"(value: string) => void"}</TableCode>
130112
</td>
131-
<td>If true, the options are shown when the dropdown is hovered.</td>
132113
<td>
133-
<TableCode>false</TableCode>
114+
This function will be called every time the selection changes. The value of the selected option will be
115+
passed as a parameter.
134116
</td>
117+
<td>-</td>
135118
</tr>
136119
<tr>
137120
<td>
138121
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
139122
<StatusBadge status="required" />
140-
onSelectOption
123+
options
141124
</DxcFlex>
142125
</td>
143126
<td>
144-
<TableCode>{"(value: string) => void"}</TableCode>
127+
<TableCode>
128+
{
129+
"{ label?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[]"
130+
}
131+
</TableCode>
145132
</td>
146133
<td>
147-
This function will be called every time the selection changes. The value of the selected option will be
148-
passed as a parameter.
134+
An array of objects representing the options. Each object has the following properties:
135+
<ul>
136+
<li>
137+
<b>label</b>: Option display value.
138+
</li>
139+
<li>
140+
<b>icon</b>:{" "}
141+
<DxcLink newWindow href="https://fonts.google.com/icons">
142+
Material Symbol
143+
</DxcLink>{" "}
144+
name or SVG element as the icon that will be placed next to the option label. When using Material
145+
Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled
146+
prefix the symbol name with <TableCode>"filled_"</TableCode>.
147+
</li>
148+
<li>
149+
<b>value</b>: Option inner value.
150+
</li>
151+
</ul>
149152
</td>
150153
<td>-</td>
151154
</tr>
152155
<tr>
153-
<td>margin</td>
156+
<td>optionsIconPosition</td>
154157
<td>
155-
<TableCode>
156-
'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
157-
</TableCode>
158+
<TableCode>'before' | 'after'</TableCode>
158159
</td>
160+
<td>In case options include icons, whether the icon should appear after or before the label.</td>
159161
<td>
160-
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left'
161-
and 'right' properties in order to specify different margin sizes.
162+
<TableCode>'before'</TableCode>
162163
</td>
163-
<td>-</td>
164164
</tr>
165165
<tr>
166166
<td>size</td>
@@ -223,15 +223,13 @@ const sections = [
223223
},
224224
];
225225

226-
const DropdownCodePage = () => {
227-
return (
228-
<DxcFlex direction="column" gap="4rem">
229-
<QuickNavContainerLayout>
230-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
231-
</QuickNavContainerLayout>
232-
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx" />
233-
</DxcFlex>
234-
);
235-
};
226+
const DropdownCodePage = () => (
227+
<DxcFlex direction="column" gap="4rem">
228+
<QuickNavContainerLayout>
229+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
230+
</QuickNavContainerLayout>
231+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx" />
232+
</DxcFlex>
233+
);
236234

237235
export default DropdownCodePage;

0 commit comments

Comments
 (0)