Skip to content

Commit fe52d2c

Browse files
mxschllmxschll
authored
feat: implement style api for segmented control component (#4068)
1 parent 4e7f8f3 commit fe52d2c

File tree

12 files changed

+521
-45
lines changed

12 files changed

+521
-45
lines changed

‎pages/segmented-control/style-permutations.page.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import SegmentedControl, { SegmentedControlProps } from '~components/segmented-control';
6+
7+
import img from '../icon/custom-icon.png';
8+
import createPermutations from '../utils/permutations';
9+
import PermutationsView from '../utils/permutations-view';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
const style1: SegmentedControlProps['style'] = {
13+
root: {
14+
borderRadius: '12px',
15+
},
16+
segment: {
17+
borderRadius: '10px',
18+
paddingBlock: '12px',
19+
paddingInline: '20px',
20+
fontSize: '15px',
21+
background: {
22+
active: 'light-dark(#5f6ac3, #7c3aed)',
23+
default: 'light-dark(#f7fafc, #1a202c)',
24+
disabled: 'light-dark(#e2e8f0, #2d3748)',
25+
hover: 'light-dark(#edf2f7, #2d3748)',
26+
},
27+
color: {
28+
active: 'light-dark(#ffffff, #ffffff)',
29+
default: 'light-dark(#2d3748, #e2e8f0)',
30+
disabled: 'light-dark(#a0aec0, #718096)',
31+
hover: 'light-dark(#1a202c, #f7fafc)',
32+
},
33+
focusRing: {
34+
borderColor: 'light-dark(#5f6ac3, #7c3aed)',
35+
borderRadius: '12px',
36+
borderWidth: '2px',
37+
},
38+
},
39+
};
40+
41+
const iconSvg = (
42+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false">
43+
<circle cx="8" cy="8" r="7" />
44+
<circle cx="8" cy="8" r="3" />
45+
</svg>
46+
);
47+
48+
const permutations = createPermutations<SegmentedControlProps>([
49+
{
50+
style: [style1],
51+
selectedId: ['seg-1', ''],
52+
options: [
53+
[
54+
{ text: 'First segment', iconName: 'settings', id: 'seg-1', disabled: false },
55+
{ text: 'Second longer segment', iconName: 'settings', id: 'seg-2', disabled: true },
56+
{ text: 'Third even longer segment', iconName: 'settings', id: 'seg-3', disabled: false },
57+
{ text: 'Segment-4', iconName: 'settings', id: 'seg-4', disabled: false },
58+
],
59+
[
60+
{ text: 'First segment', id: 'seg-1', disabled: false },
61+
{ text: '', iconAlt: 'Alternative text', iconName: 'settings', id: 'seg-2', disabled: true },
62+
{ text: 'Third even longer segment', iconSvg, id: 'seg-3', disabled: false },
63+
{
64+
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Whatever.',
65+
iconUrl: img,
66+
iconAlt: 'Amazon',
67+
id: 'seg-4',
68+
disabled: false,
69+
},
70+
],
71+
],
72+
label: ['Segmented Control Label'],
73+
},
74+
]);
75+
76+
export default function SegmentedControlScenario() {
77+
return (
78+
<article>
79+
<h1>SegmentedControl Custom Style Permutations</h1>
80+
<ScreenshotArea>
81+
<PermutationsView permutations={permutations} render={permutation => <SegmentedControl {...permutation} />} />
82+
</ScreenshotArea>
83+
</article>
84+
);
85+
}

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22173,6 +22173,155 @@ Each segment has the following properties:
2217322173
"optional": false,
2217422174
"type": "string | null",
2217522175
},
22176+
{
22177+
"inlineType": {
22178+
"name": "SegmentedControlProps.Style",
22179+
"properties": [
22180+
{
22181+
"inlineType": {
22182+
"name": "{ borderRadius?: string | undefined; }",
22183+
"properties": [
22184+
{
22185+
"name": "borderRadius",
22186+
"optional": true,
22187+
"type": "string",
22188+
},
22189+
],
22190+
"type": "object",
22191+
},
22192+
"name": "root",
22193+
"optional": true,
22194+
"type": "{ borderRadius?: string | undefined; }",
22195+
},
22196+
{
22197+
"inlineType": {
22198+
"name": "object",
22199+
"properties": [
22200+
{
22201+
"inlineType": {
22202+
"name": "object",
22203+
"properties": [
22204+
{
22205+
"name": "active",
22206+
"optional": true,
22207+
"type": "string",
22208+
},
22209+
{
22210+
"name": "default",
22211+
"optional": true,
22212+
"type": "string",
22213+
},
22214+
{
22215+
"name": "disabled",
22216+
"optional": true,
22217+
"type": "string",
22218+
},
22219+
{
22220+
"name": "hover",
22221+
"optional": true,
22222+
"type": "string",
22223+
},
22224+
],
22225+
"type": "object",
22226+
},
22227+
"name": "background",
22228+
"optional": true,
22229+
"type": "{ active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
22230+
},
22231+
{
22232+
"name": "borderRadius",
22233+
"optional": true,
22234+
"type": "string",
22235+
},
22236+
{
22237+
"inlineType": {
22238+
"name": "object",
22239+
"properties": [
22240+
{
22241+
"name": "active",
22242+
"optional": true,
22243+
"type": "string",
22244+
},
22245+
{
22246+
"name": "default",
22247+
"optional": true,
22248+
"type": "string",
22249+
},
22250+
{
22251+
"name": "disabled",
22252+
"optional": true,
22253+
"type": "string",
22254+
},
22255+
{
22256+
"name": "hover",
22257+
"optional": true,
22258+
"type": "string",
22259+
},
22260+
],
22261+
"type": "object",
22262+
},
22263+
"name": "color",
22264+
"optional": true,
22265+
"type": "{ active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
22266+
},
22267+
{
22268+
"inlineType": {
22269+
"name": "object",
22270+
"properties": [
22271+
{
22272+
"name": "borderColor",
22273+
"optional": true,
22274+
"type": "string",
22275+
},
22276+
{
22277+
"name": "borderRadius",
22278+
"optional": true,
22279+
"type": "string",
22280+
},
22281+
{
22282+
"name": "borderWidth",
22283+
"optional": true,
22284+
"type": "string",
22285+
},
22286+
],
22287+
"type": "object",
22288+
},
22289+
"name": "focusRing",
22290+
"optional": true,
22291+
"type": "{ borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; }",
22292+
},
22293+
{
22294+
"name": "fontSize",
22295+
"optional": true,
22296+
"type": "string",
22297+
},
22298+
{
22299+
"name": "paddingBlock",
22300+
"optional": true,
22301+
"type": "string",
22302+
},
22303+
{
22304+
"name": "paddingInline",
22305+
"optional": true,
22306+
"type": "string",
22307+
},
22308+
],
22309+
"type": "object",
22310+
},
22311+
"name": "segment",
22312+
"optional": true,
22313+
"type": "{ background?: { active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; color?: { active?: string | undefined; default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; ... 4 more ...; paddingI...",
22314+
},
22315+
],
22316+
"type": "object",
22317+
},
22318+
"name": "style",
22319+
"optional": true,
22320+
"systemTags": [
22321+
"core",
22322+
],
22323+
"type": "SegmentedControlProps.Style",
22324+
},
2217622325
],
2217722326
"regions": [],
2217822327
"releaseStatus": "stable",

‎src/internal/styles/forms/mixins.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@
4747
@mixin focus-highlight(
4848
$gutter,
4949
$border-radius: awsui.$border-radius-control-default-focus-ring,
50-
$box-shadow: foundation.$box-shadow-focused
50+
$box-shadow: foundation.$box-shadow-focused,
51+
$z-index: null
5152
) {
5253
$gutter-vertical: $gutter;
5354
$gutter-horizontal: $gutter;
@@ -93,6 +94,9 @@
9394
border-end-start-radius: $border-radius;
9495
border-end-end-radius: $border-radius;
9596
box-shadow: $box-shadow;
97+
@if $z-index {
98+
z-index: $z-index;
99+
}
96100
}
97101
}
98102

‎src/segmented-control/__tests__/__snapshots__/styles.test.tsx.snap‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`getSegmentedControlRootStyles handles all possible style configurations 1`] = `
4+
{
5+
"borderRadius": undefined,
6+
}
7+
`;
8+
9+
exports[`getSegmentedControlRootStyles handles all possible style configurations 2`] = `
10+
{
11+
"borderRadius": undefined,
12+
}
13+
`;
14+
15+
exports[`getSegmentedControlRootStyles handles all possible style configurations 3`] = `
16+
{
17+
"borderRadius": "8px",
18+
}
19+
`;
20+
21+
exports[`getSegmentedControlSegmentStyles handles all possible style configurations 1`] = `
22+
{
23+
"--awsui-style-background-active-d43v8n": undefined,
24+
"--awsui-style-background-default-d43v8n": undefined,
25+
"--awsui-style-background-disabled-d43v8n": undefined,
26+
"--awsui-style-background-hover-d43v8n": undefined,
27+
"--awsui-style-color-active-d43v8n": undefined,
28+
"--awsui-style-color-default-d43v8n": undefined,
29+
"--awsui-style-color-disabled-d43v8n": undefined,
30+
"--awsui-style-color-hover-d43v8n": undefined,
31+
"--awsui-style-focus-ring-border-color-d43v8n": undefined,
32+
"--awsui-style-focus-ring-border-radius-d43v8n": undefined,
33+
"--awsui-style-focus-ring-border-width-d43v8n": undefined,
34+
"borderRadius": undefined,
35+
"fontSize": undefined,
36+
"paddingBlock": undefined,
37+
"paddingInline": undefined,
38+
}
39+
`;
40+
41+
exports[`getSegmentedControlSegmentStyles handles all possible style configurations 2`] = `
42+
{
43+
"--awsui-style-background-active-d43v8n": undefined,
44+
"--awsui-style-background-default-d43v8n": undefined,
45+
"--awsui-style-background-disabled-d43v8n": undefined,
46+
"--awsui-style-background-hover-d43v8n": undefined,
47+
"--awsui-style-color-active-d43v8n": undefined,
48+
"--awsui-style-color-default-d43v8n": undefined,
49+
"--awsui-style-color-disabled-d43v8n": undefined,
50+
"--awsui-style-color-hover-d43v8n": undefined,
51+
"--awsui-style-focus-ring-border-color-d43v8n": undefined,
52+
"--awsui-style-focus-ring-border-radius-d43v8n": undefined,
53+
"--awsui-style-focus-ring-border-width-d43v8n": undefined,
54+
"borderRadius": undefined,
55+
"fontSize": undefined,
56+
"paddingBlock": undefined,
57+
"paddingInline": undefined,
58+
}
59+
`;
60+
61+
exports[`getSegmentedControlSegmentStyles handles all possible style configurations 3`] = `
62+
{
63+
"--awsui-style-background-active-d43v8n": "#0073bb",
64+
"--awsui-style-background-default-d43v8n": "#ffffff",
65+
"--awsui-style-background-disabled-d43v8n": "#f0f0f0",
66+
"--awsui-style-background-hover-d43v8n": "#fafafa",
67+
"--awsui-style-color-active-d43v8n": "#ffffff",
68+
"--awsui-style-color-default-d43v8n": "#000000",
69+
"--awsui-style-color-disabled-d43v8n": "#999999",
70+
"--awsui-style-color-hover-d43v8n": "#000000",
71+
"--awsui-style-focus-ring-border-color-d43v8n": "#0073bb",
72+
"--awsui-style-focus-ring-border-radius-d43v8n": "8px",
73+
"--awsui-style-focus-ring-border-width-d43v8n": "2px",
74+
"borderRadius": "6px",
75+
"fontSize": "14px",
76+
"paddingBlock": "8px",
77+
"paddingInline": "12px",
78+
}
79+
`;

0 commit comments

Comments
 (0)