Skip to content

Commit 8d13105

Browse files
DaemonCahillDaemonCahill
authored
feat: Implementation of the Style API for Abstract Switch components (#3728)
1 parent 38348b2 commit 8d13105

File tree

27 files changed

+1629
-47
lines changed

27 files changed

+1629
-47
lines changed

‎pages/checkbox/style-custom.page.tsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useRef } from 'react';
4+
5+
import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
6+
7+
import { Checkbox, SpaceBetween } from '~components';
8+
9+
import { palette } from '../app/themes/style-api';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
export default function CustomCheckbox() {
13+
const mode = useCurrentMode(useRef(document.body));
14+
15+
const colors = {
16+
light: {
17+
checked: palette.neutral100,
18+
default: palette.neutral100,
19+
disabled: palette.neutral60,
20+
indeterminate: palette.neutral100,
21+
readOnly: palette.neutral80,
22+
},
23+
dark: {
24+
checked: palette.neutral10,
25+
default: palette.neutral10,
26+
disabled: palette.neutral40,
27+
indeterminate: palette.neutral10,
28+
readOnly: palette.neutral40,
29+
},
30+
};
31+
32+
const style = {
33+
input: {
34+
fill: {
35+
checked: palette.teal80,
36+
default: palette.neutral10,
37+
disabled: palette.neutral40,
38+
indeterminate: palette.teal80,
39+
readOnly: palette.neutral40,
40+
},
41+
stroke: {
42+
checked: palette.teal80,
43+
default: palette.neutral80,
44+
disabled: palette.neutral40,
45+
indeterminate: palette.teal80,
46+
readOnly: palette.neutral40,
47+
},
48+
check: {
49+
stroke: {
50+
checked: palette.teal10,
51+
disabled: palette.neutral10,
52+
indeterminate: palette.teal10,
53+
readOnly: palette.neutral80,
54+
},
55+
},
56+
focusRing: {
57+
borderColor: palette.teal80,
58+
borderRadius: '0px',
59+
borderWidth: '3px',
60+
},
61+
},
62+
label: {
63+
color: { ...colors[mode] },
64+
},
65+
};
66+
67+
return (
68+
<ScreenshotArea>
69+
<h1>Custom Checkbox</h1>
70+
71+
<SpaceBetween size="m" direction="vertical">
72+
<SpaceBetween size="m" direction="horizontal">
73+
<Checkbox checked={false} style={style} data-testid="1">
74+
Custom 1
75+
</Checkbox>
76+
77+
<Checkbox checked={false} disabled={true} style={style}>
78+
Custom 2
79+
</Checkbox>
80+
81+
<Checkbox checked={false} disabled={false} readOnly={true} style={style}>
82+
Custom 3
83+
</Checkbox>
84+
</SpaceBetween>
85+
86+
<SpaceBetween size="m" direction="horizontal">
87+
<Checkbox checked={true} style={style} data-testid="4">
88+
Custom 4
89+
</Checkbox>
90+
91+
<Checkbox checked={true} disabled={true} readOnly={false} style={style}>
92+
Custom 5
93+
</Checkbox>
94+
95+
<Checkbox checked={true} disabled={false} readOnly={true} style={style}>
96+
Custom 6
97+
</Checkbox>
98+
</SpaceBetween>
99+
100+
<SpaceBetween size="m" direction="horizontal">
101+
<Checkbox checked={true} indeterminate={true} style={style}>
102+
Custom 7
103+
</Checkbox>
104+
105+
<Checkbox checked={true} indeterminate={true} disabled={true} readOnly={false} style={style}>
106+
Custom 8
107+
</Checkbox>
108+
109+
<Checkbox checked={true} indeterminate={true} disabled={false} readOnly={true} style={style}>
110+
Custom 9
111+
</Checkbox>
112+
</SpaceBetween>
113+
</SpaceBetween>
114+
</ScreenshotArea>
115+
);
116+
}

‎pages/radio-group/style-custom.page.tsx

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useRef } from 'react';
4+
5+
import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
6+
7+
import { RadioGroup, SpaceBetween } from '~components';
8+
9+
import { palette } from '../app/themes/style-api';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
export default function CustomRadio() {
13+
const mode = useCurrentMode(useRef(document.body));
14+
15+
const items = [
16+
{
17+
value: 'first',
18+
label: 'First choice',
19+
description: 'This is the first option.',
20+
},
21+
{
22+
disabled: true,
23+
value: 'second',
24+
label: 'Second choice',
25+
description: 'This is the second option.',
26+
},
27+
{
28+
value: 'third',
29+
label: 'Third choice',
30+
description: 'This is the third option.',
31+
},
32+
];
33+
34+
const colors = {
35+
light: {
36+
checked: palette.neutral100,
37+
default: palette.neutral100,
38+
disabled: palette.neutral80,
39+
readOnly: palette.neutral80,
40+
},
41+
dark: {
42+
checked: palette.neutral10,
43+
default: palette.neutral10,
44+
disabled: palette.neutral40,
45+
readOnly: palette.neutral40,
46+
},
47+
};
48+
49+
const style = {
50+
input: {
51+
stroke: {
52+
default: palette.neutral80,
53+
disabled: palette.neutral100,
54+
readOnly: palette.neutral90,
55+
},
56+
fill: {
57+
checked: palette.teal80,
58+
default: palette.neutral10,
59+
disabled: palette.neutral60,
60+
readOnly: palette.neutral40,
61+
},
62+
circle: {
63+
fill: {
64+
checked: palette.neutral10,
65+
disabled: palette.neutral10,
66+
readOnly: palette.neutral80,
67+
},
68+
},
69+
focusRing: {
70+
borderColor: palette.teal80,
71+
borderRadius: '2px',
72+
borderWidth: '1px',
73+
},
74+
},
75+
label: {
76+
color: { ...colors[mode] },
77+
},
78+
description: {
79+
color: { ...colors[mode] },
80+
},
81+
};
82+
83+
return (
84+
<ScreenshotArea>
85+
<h1>Custom Radio</h1>
86+
87+
<SpaceBetween size="m" direction="vertical">
88+
<SpaceBetween size="m" direction="horizontal">
89+
<RadioGroup value="first" items={items} style={style} data-testid="1" />
90+
<RadioGroup value="second" items={items} style={style} />
91+
<RadioGroup value="third" items={items} style={style} readOnly={true} />
92+
</SpaceBetween>
93+
</SpaceBetween>
94+
</ScreenshotArea>
95+
);
96+
}

‎pages/toggle/style-custom.page.tsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useRef } from 'react';
4+
5+
import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
6+
7+
import { SpaceBetween, Toggle } from '~components';
8+
9+
import { palette } from '../app/themes/style-api';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
export default function CustomToggle() {
13+
const mode = useCurrentMode(useRef(document.body));
14+
15+
const colors = {
16+
light: {
17+
checked: palette.neutral100,
18+
default: palette.neutral100,
19+
disabled: palette.neutral90,
20+
readOnly: palette.neutral100,
21+
},
22+
dark: {
23+
checked: palette.neutral10,
24+
default: palette.neutral10,
25+
disabled: palette.neutral40,
26+
readOnly: palette.neutral10,
27+
},
28+
};
29+
30+
const style = {
31+
input: {
32+
background: {
33+
checked: palette.teal80,
34+
default: palette.teal80,
35+
disabled: palette.teal40,
36+
readOnly: palette.teal40,
37+
},
38+
handle: {
39+
background: {
40+
checked: palette.neutral10,
41+
default: palette.neutral10,
42+
disabled: palette.neutral10,
43+
readOnly: palette.neutral80,
44+
},
45+
},
46+
focusRing: {
47+
borderColor: palette.teal80,
48+
borderRadius: '4px',
49+
borderWidth: '3px',
50+
},
51+
},
52+
label: {
53+
color: { ...colors[mode] },
54+
},
55+
};
56+
57+
return (
58+
<ScreenshotArea>
59+
<h1>Custom Toggle</h1>
60+
61+
<SpaceBetween size="m" direction="vertical">
62+
<SpaceBetween size="m" direction="horizontal">
63+
<Toggle checked={false} style={style} data-testid="1">
64+
Toggle
65+
</Toggle>
66+
67+
<Toggle checked={false} disabled={true} readOnly={false} style={style}>
68+
Toggle
69+
</Toggle>
70+
71+
<Toggle checked={false} disabled={false} readOnly={true} style={style}>
72+
Toggle
73+
</Toggle>
74+
</SpaceBetween>
75+
76+
<SpaceBetween size="m" direction="horizontal">
77+
<Toggle checked={true} style={style}>
78+
Toggle
79+
</Toggle>
80+
81+
<Toggle checked={true} disabled={true} readOnly={false} style={style}>
82+
Toggle
83+
</Toggle>
84+
85+
<Toggle checked={true} disabled={false} readOnly={true} style={style}>
86+
Toggle
87+
</Toggle>
88+
</SpaceBetween>
89+
</SpaceBetween>
90+
</ScreenshotArea>
91+
);
92+
}

0 commit comments

Comments
 (0)