Skip to content

Commit 743759c

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2042 from dxc-technology/rarrojolopez/buttons-semantic
Semantic buttons and button size changes
2 parents eaf0f8b + 58ccd31 commit 743759c

File tree

29 files changed

+8009
-811
lines changed

29 files changed

+8009
-811
lines changed

‎apps/website/screens/common/example/Example.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,11 @@ const Example = ({ actionsVisible = true, defaultIsVisible = false, example }: E
7676
</StyledPreview>
7777
{actionsVisible && (
7878
<CodeActionsContainer isCodeVisible={isCodeVisible}>
79-
{isCodeVisible && <DxcButton label={"Copy code"} icon={icons.copy} mode="text" onClick={copyCode} />}
79+
{isCodeVisible && <DxcButton label="Copy code" icon={icons.copy} mode="tertiary" onClick={copyCode} />}
8080
<DxcButton
8181
label={isCodeVisible ? "Hide code" : "View code"}
8282
icon={icons.code}
83-
mode="text"
83+
mode="tertiary"
8484
onClick={handleCodeOnClick}
8585
/>
8686
</CodeActionsContainer>

‎apps/website/screens/common/themes/advanced-theme.json‎

Lines changed: 146 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -118,50 +118,160 @@
118118
"button": {
119119
"labelFontLineHeight": "1.5em",
120120
"labelLetterSpacing": "0.025em",
121-
"paddingLeft": "0.5rem",
122-
"paddingRight": "0.5rem",
123-
"paddingTop": "0.5rem",
124-
"paddingBottom": "0.5rem",
125-
"focusBorderColor": "#0095ff",
126-
"primaryBackgroundColor": "#5f249f",
127-
"primaryFontColor": "#ffffff",
128-
"primaryHoverBackgroundColor": "#4b1c7d",
129-
"primaryActiveBackgroundColor": "#321353",
130-
"primaryDisabledBackgroundColor": "#f2f2f2",
131-
"primaryDisabledFontColor": "#999999",
121+
"paddingSmallTop": "0px",
122+
"paddingSmallLeft": "8px",
123+
"paddingSmallBottom": "0px",
124+
"paddingSmallRight": "8px",
125+
"paddingSmallOnlyIconTop": "0px",
126+
"paddingSmallOnlyIconLeft": "4px",
127+
"paddingSmallOnlyIconBottom": "0px",
128+
"paddingSmallOnlyIconRight": "4px",
129+
"paddingMediumTop": "0px",
130+
"paddingMediumLeft": "8px",
131+
"paddingMediumBottom": "0px",
132+
"paddingMediumRight": "8px",
133+
"paddingMediumOnlyIconTop": "0px",
134+
"paddingMediumOnlyIconLeft": "8px",
135+
"paddingMediumOnlyIconBottom": "0px",
136+
"paddingMediumOnlyIconRight": "8px",
137+
"paddingLargeTop": "0px",
138+
"paddingLargeLeft": "16px",
139+
"paddingLargeBottom": "0px",
140+
"paddingLargeRight": "16px",
141+
"paddingLargeOnlyIconTop": "0px",
142+
"paddingLargeOnlyIconLeft": "8px",
143+
"paddingLargeOnlyIconBottom": "0px",
144+
"paddingLargeOnlyIconRight": "8px",
145+
"focusBorderColor": "#33aaff",
146+
"primaryDefaultBackgroundColor": "#5f249f",
147+
"primaryErrorBackgroundColor": "#d0011b",
148+
"primaryWarningBackgroundColor": "#c26c0a",
149+
"primarySuccessBackgroundColor": "#24a148",
150+
"primaryInfoBackgroundColor": "#0086e6",
151+
"primaryDefaultFontColor": "#ffffff",
152+
"primaryErrorFontColor": "#ffffff",
153+
"primaryWarningFontColor": "#ffffff",
154+
"primarySuccessFontColor": "#ffffff",
155+
"primaryInfoFontColor": "#ffffff",
156+
"primaryHoverDefaultBackgroundColor": "#4b1c7d",
157+
"primaryHoverErrorBackgroundColor": "#980115",
158+
"primaryHoverWarningBackgroundColor": "#915108",
159+
"primaryHoverSuccessBackgroundColor": "#1c7d38",
160+
"primaryHoverInfoBackgroundColor": "#0067b3",
161+
"primaryActiveDefaultBackgroundColor": "#321353",
162+
"primaryActiveErrorBackgroundColor": "#65010e",
163+
"primaryActiveWarningBackgroundColor": "#613605",
164+
"primaryActiveSuccessBackgroundColor": "#135325",
165+
"primaryActiveInfoBackgroundColor": "#003c66",
166+
"primaryDisabledDefaultBackgroundColor": "#f2eafa",
167+
"primaryDisabledErrorBackgroundColor": "#ffe6e9",
168+
"primaryDisabledWarningBackgroundColor": "#fef3e7",
169+
"primaryDisabledSuccessBackgroundColor": "#eafaef",
170+
"primaryDisabledInfoBackgroundColor": "#e6f4ff",
171+
"primaryDisabledDefaultFontColor": "#cbacec",
172+
"primaryDisabledErrorFontColor": "#fe9aa7",
173+
"primaryDisabledWarningFontColor": "#facf9e",
174+
"primaryDisabledSuccessFontColor": "#acecbe",
175+
"primaryDisabledInfoFontColor": "#99d5ff",
132176
"primaryBorderThickness": "0px",
133177
"primaryBorderStyle": "none",
134178
"primaryBorderRadius": "0.25rem",
135179
"primaryFontFamily": "Open Sans, sans-serif",
136-
"primaryFontSize": "1rem",
137-
"primaryFontWeight": "400",
138-
"secondaryBackgroundColor": "transparent",
139-
"secondaryFontColor": "#5f249f",
140-
"secondaryHoverFontColor": "#ffffff",
141-
"secondaryBorderColor": "#5f249f",
142-
"secondaryHoverBackgroundColor": "#5f249f",
143-
"secondaryActiveBackgroundColor": "#321353",
144-
"secondaryDisabledBackgroundColor": "transparent",
145-
"secondaryDisabledFontColor": "#999999",
146-
"secondaryDisabledBorderColor": "#999999",
180+
"primarySmallFontSize": "0.875rem",
181+
"primaryMediumFontSize": "0.875rem",
182+
"primaryLargeFontSize": "1rem",
183+
"primaryFontWeight": "600",
184+
"secondaryDefaultBackgroundColor": "transparent",
185+
"secondaryErrorBackgroundColor": "transparent",
186+
"secondaryWarningBackgroundColor": "transparent",
187+
"secondarySuccessBackgroundColor": "transparent",
188+
"secondaryInfoBackgroundColor": "transparent",
189+
"secondaryDefaultFontColor": "#5f249f",
190+
"secondaryErrorFontColor": "#d0011b",
191+
"secondaryWarningFontColor": "#c26c0a",
192+
"secondarySuccessFontColor": "#24a148",
193+
"secondaryInfoFontColor": "#0086e6",
194+
"secondaryDefaultBorderColor": "#5f249f",
195+
"secondaryErrorBorderColor": "#d0011b",
196+
"secondaryWarningBorderColor": "#c26c0a",
197+
"secondarySuccessBorderColor": "#24a148",
198+
"secondaryInfoBorderColor": "#0086e6",
199+
"secondaryHoverDefaultBackgroundColor": "#5f249f",
200+
"secondaryHoverErrorBackgroundColor": "#d0011b",
201+
"secondaryHoverWarningBackgroundColor": "#c26c0a",
202+
"secondaryHoverSuccessBackgroundColor": "#24a148",
203+
"secondaryHoverInfoBackgroundColor": "#0086e6",
204+
"secondaryHoverDefaultFontColor": "#ffffff",
205+
"secondaryHoverErrorFontColor": "#ffffff",
206+
"secondaryHoverWarningFontColor": "#ffffff",
207+
"secondaryHoverSuccessFontColor": "#ffffff",
208+
"secondaryHoverInfoFontColor": "#ffffff",
209+
"secondaryActiveDefaultBackgroundColor": "#4b1c7d",
210+
"secondaryActiveErrorBackgroundColor": "#980115",
211+
"secondaryActiveWarningBackgroundColor": "#915108",
212+
"secondaryActiveSuccessBackgroundColor": "#1c7d38",
213+
"secondaryActiveInfoBackgroundColor": "#0067b3",
214+
"secondaryDisabledDefaultBackgroundColor": "transparent",
215+
"secondaryDisabledErrorBackgroundColor": "transparent",
216+
"secondaryDisabledWarningBackgroundColor": "transparent",
217+
"secondaryDisabledSuccessBackgroundColor": "transparent",
218+
"secondaryDisabledInfoBackgroundColor": "transparent",
219+
"secondaryDisabledDefaultFontColor": "#cbacec",
220+
"secondaryDisabledErrorFontColor": "#fe9aa7",
221+
"secondaryDisabledWarningFontColor": "#facf9e",
222+
"secondaryDisabledSuccessFontColor": "#acecbe",
223+
"secondaryDisabledInfoFontColor": "#99d5ff",
224+
"secondaryDisabledDefaultBorderColor": "#cbacec",
225+
"secondaryDisabledErrorBorderColor": "#fe9aa7",
226+
"secondaryDisabledWarningBorderColor": "#facf9e",
227+
"secondaryDisabledSuccessBorderColor": "#acecbe",
228+
"secondaryDisabledInfoBorderColor": "#99d5ff",
147229
"secondaryBorderThickness": "1px",
148230
"secondaryBorderStyle": "solid",
149231
"secondaryBorderRadius": "0.25rem",
150232
"secondaryFontFamily": "Open Sans, sans-serif",
151-
"secondaryFontSize": "1rem",
152-
"secondaryFontWeight": "400",
153-
"textBackgroundColor": "transparent",
154-
"textFontColor": "#5f249f",
155-
"textHoverBackgroundColor": "#f2eafa",
156-
"textActiveBackgroundColor": "#e5d5f6",
157-
"textDisabledBackgroundColor": "transparent",
158-
"textDisabledFontColor": "#999999",
159-
"textBorderThickness": "0px",
160-
"textBorderStyle": "none",
161-
"textBorderRadius": "0.25rem",
162-
"textFontFamily": "Open Sans, sans-serif",
163-
"textFontSize": "1rem",
164-
"textFontWeight": "400"
233+
"secondarySmallFontSize": "0.875rem",
234+
"secondaryMediumFontSize": "0.875rem",
235+
"secondaryLargeFontSize": "1rem",
236+
"secondaryFontWeight": "600",
237+
"tertiaryDefaultBackgroundColor": "transparent",
238+
"tertiaryErrorBackgroundColor": "transparent",
239+
"tertiaryWarningBackgroundColor": "transparent",
240+
"tertiarySuccessBackgroundColor": "transparent",
241+
"tertiaryInfoBackgroundColor": "transparent",
242+
"tertiaryDefaultFontColor": "#5f249f",
243+
"tertiaryErrorFontColor": "#d0011b",
244+
"tertiaryWarningFontColor": "#c26c0a",
245+
"tertiarySuccessFontColor": "#24a148",
246+
"tertiaryInfoFontColor": "#0086e6",
247+
"tertiaryHoverDefaultBackgroundColor": "#f2eafa",
248+
"tertiaryHoverErrorBackgroundColor": "#ffe6e9",
249+
"tertiaryHoverWarningBackgroundColor": "#fef3e7",
250+
"tertiaryHoverSuccessBackgroundColor": "#eafaef",
251+
"tertiaryHoverInfoBackgroundColor": "#e6f4ff",
252+
"tertiaryActiveDefaultBackgroundColor": "#e5d5f6",
253+
"tertiaryActiveErrorBackgroundColor": "#ffccd3",
254+
"tertiaryActiveWarningBackgroundColor": "#fce7cf",
255+
"tertiaryActiveSuccessBackgroundColor": "#d5f6df",
256+
"tertiaryActiveInfoBackgroundColor": "#cceaff",
257+
"tertiaryDisabledDefaultBackgroundColor": "transparent",
258+
"tertiaryDisabledErrorBackgroundColor": "transparent",
259+
"tertiaryDisabledWarningBackgroundColor": "transparent",
260+
"tertiaryDisabledSuccessBackgroundColor": "transparent",
261+
"tertiaryDisabledInfoBackgroundColor": "transparent",
262+
"tertiaryDisabledDefaultFontColor": "#cbacec",
263+
"tertiaryDisabledErrorFontColor": "#fe9aa7",
264+
"tertiaryDisabledWarningFontColor": "#facf9e",
265+
"tertiaryDisabledSuccessFontColor": "#acecbe",
266+
"tertiaryDisabledInfoFontColor": "#99d5ff",
267+
"tertiaryBorderThickness": "0px",
268+
"tertiaryBorderStyle": "none",
269+
"tertiaryBorderRadius": "0.25rem",
270+
"tertiaryFontFamily": "Open Sans, sans-serif",
271+
"tertiarySmallFontSize": "0.875rem",
272+
"tertiaryMediumFontSize": "0.875rem",
273+
"tertiaryLargeFontSize": "1rem",
274+
"tertiaryFontWeight": "600"
165275
},
166276
"card": {
167277
"height": "220px",

‎apps/website/screens/components/button/code/ButtonCodePage.tsx‎

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import Code from "@/common/Code";
33
import DocFooter from "@/common/DocFooter";
44
import QuickNavContainer from "@/common/QuickNavContainer";
55
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
6+
import StatusBadge from "@/common/StatusBadge";
67
import Example from "@/common/example/Example";
78
import basicUsage from "./examples/basicUsage";
9+
import semantic from "./examples/semantic";
810
import icons from "./examples/icons";
11+
import sizes from "./examples/sizes";
912
import TableCode from "@/common/TableCode";
1013

1114
const sections = [
@@ -33,13 +36,28 @@ const sections = [
3336
<tr>
3437
<td>mode</td>
3538
<td>
36-
<TableCode>'primary' | 'secondary' | 'text'</TableCode>
39+
<TableCode>'primary' | 'secondary' | 'tertiary'</TableCode>
3740
</td>
3841
<td>The available button modes.</td>
3942
<td>
4043
<TableCode>'primary'</TableCode>
4144
</td>
4245
</tr>
46+
<tr>
47+
<td>
48+
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
49+
<StatusBadge status="new" />
50+
semantic
51+
</DxcFlex>
52+
</td>
53+
<td>
54+
<TableCode>'default' | 'error' | 'warning' | 'success' | 'info'</TableCode>
55+
</td>
56+
<td>Specifies the semantic meaning of the buttons, which determines its color.</td>
57+
<td>
58+
<TableCode>'default'</TableCode>
59+
</td>
60+
</tr>
4361
<tr>
4462
<td>title</td>
4563
<td>
@@ -122,13 +140,22 @@ const sections = [
122140
<td>-</td>
123141
</tr>
124142
<tr>
125-
<td>size</td>
126143
<td>
127-
<TableCode>'small' | 'medium' | 'large' | 'fillParent' | 'fitContent'</TableCode>
144+
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
145+
<StatusBadge status="new" />
146+
size
147+
</DxcFlex>
148+
</td>
149+
<td>
150+
<TableCode>
151+
{
152+
"{ height: 'small' | 'medium' | 'large'; width: 'small' | 'medium' | 'large' | 'fillParent' | 'fitContent' }"
153+
}
154+
</TableCode>
128155
</td>
129-
<td>Size of the component.</td>
156+
<td>Object used to define the dimensions of the button in terms of height and width. </td>
130157
<td>
131-
<TableCode>'fitContent'</TableCode>
158+
<TableCode>{"{ height: 'large'; width: 'fitContent' }"}</TableCode>
132159
</td>
133160
</tr>
134161
<tr>
@@ -154,10 +181,18 @@ const sections = [
154181
title: "Basic usage",
155182
content: <Example example={basicUsage} defaultIsVisible />,
156183
},
184+
{
185+
title: "Semantic",
186+
content: <Example example={semantic} defaultIsVisible />,
187+
},
157188
{
158189
title: "Icons",
159190
content: <Example example={icons} defaultIsVisible />,
160191
},
192+
{
193+
title: "Size",
194+
content: <Example example={sizes} defaultIsVisible />,
195+
},
161196
],
162197
},
163198
];

‎apps/website/screens/components/button/code/examples/semantic.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { DxcButton, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
2+
3+
const code = `() => {
4+
return (
5+
<DxcInset space="2rem">
6+
<DxcFlex gap="1.5rem">
7+
<DxcButton label="Search" />
8+
<DxcButton semantic="error" label="Cancel" />
9+
<DxcButton semantic="warning" label="Report" />
10+
<DxcButton semantic="success" label="Confirm" />
11+
<DxcButton semantic="info" label="Details" />
12+
</DxcFlex>
13+
</DxcInset>
14+
);
15+
}`;
16+
17+
const scope = {
18+
DxcButton,
19+
DxcFlex,
20+
DxcInset,
21+
};
22+
23+
export default { code, scope };

‎apps/website/screens/components/button/code/examples/sizes.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { DxcButton, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
2+
3+
const code = `() => {
4+
return (
5+
<DxcInset space="2rem">
6+
<DxcFlex gap="1.5rem" direction="column">
7+
<DxcFlex gap="1.5rem">
8+
<DxcButton icon="person" semantic="default" size={{ height: "small", width: "small" }} />
9+
<DxcButton label="Submit" size={{ height: "small", width: "medium" }} />
10+
<DxcButton label="Search" icon="search" size={{ height: "small", width: "large" }} />
11+
<DxcButton label="Edit" size={{ height: "small", width: "fitContent" }} />
12+
<DxcButton label="Learn more" size={{ height: "small", width: "fillParent" }} />
13+
</DxcFlex>
14+
<DxcFlex gap="1.5rem">
15+
<DxcButton icon="person" semantic="default" size={{ height: "medium", width: "small" }} />
16+
<DxcButton label="Submit" size={{ height: "medium", width: "medium" }} />
17+
<DxcButton label="Search" icon="search" size={{ height: "medium", width: "large" }} />
18+
<DxcButton label="Edit" size={{ height: "medium", width: "fitContent" }} />
19+
<DxcButton label="Learn more" size={{ height: "medium", width: "fillParent" }} />
20+
</DxcFlex>
21+
<DxcFlex gap="1.5rem">
22+
<DxcButton icon="person" semantic="default" size={{ height: "large", width: "small"}} />
23+
<DxcButton label="Submit" size={{ height: "large", width: "medium" }} />
24+
<DxcButton label="Search" icon="search" size={{ height: "large", width: "large" }} />
25+
<DxcButton label="Edit" size={{ height: "large", width: "fitContent" }} />
26+
<DxcButton label="Learn more" size={{ height: "large", width: "fillParent" }} />
27+
</DxcFlex>
28+
</DxcFlex>
29+
</DxcInset>
30+
);
31+
}`;
32+
33+
const scope = {
34+
DxcButton,
35+
DxcInset,
36+
DxcFlex,
37+
};
38+
39+
export default { code, scope };

0 commit comments

Comments
 (0)