Skip to content

Commit 9379225

Browse files
at-susieat-susie
committed
apply option 2
1 parent ddd4f97 commit 9379225

File tree

4 files changed

+109
-41
lines changed

4 files changed

+109
-41
lines changed

‎pages/segmented-control/simple.page.tsx‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// SPDX-License-Identifier: Apache-2.0
33
import React, { useState } from 'react';
44

5+
import { Box, Button, Select, SpaceBetween } from '~components';
56
import Input from '~components/input';
67
import SegmentedControl from '~components/segmented-control';
78

@@ -10,19 +11,38 @@ export default function SegmentedControlPage() {
1011
return (
1112
<article>
1213
<h1>SegmentedControl demo</h1>
13-
<Input ariaLabel="Input Label" value="" readOnly={true} />
14-
<SegmentedControl
15-
options={[
16-
{ text: 'Segment-1', iconName: 'settings', id: 'seg-1', disabled: false },
17-
{ text: 'Segment-2', iconName: 'settings', id: 'seg-2', disabled: true },
18-
{ text: 'Segment-3', iconName: 'settings', id: 'seg-3', disabled: false },
19-
{ text: 'Segment-4', iconName: 'settings', id: 'seg-4', disabled: false },
20-
{ text: 'Segment-5', iconName: 'settings', id: 'seg-5', disabled: false },
21-
]}
22-
onChange={event => setSelectedId(event.detail.selectedId)}
23-
selectedId={selectedId}
24-
label="Segmented Control Label"
25-
/>
14+
<SpaceBetween size="l">
15+
<Input ariaLabel="Input Label" value="" readOnly={true} />
16+
<Box margin={{ horizontal: 'm' }}>
17+
<SpaceBetween size="xl" direction="horizontal">
18+
<SegmentedControl
19+
options={[
20+
{ text: 'Segment-1', iconName: 'settings', id: 'seg-1', disabled: false },
21+
{ text: 'S2', iconName: 'settings', id: 'seg-2', disabled: false },
22+
{ text: 'S3', iconName: 'settings', id: 'seg-3', disabled: false },
23+
{ text: 'Segment-4 Logs Insights QL', iconName: 'settings', id: 'seg-4', disabled: false },
24+
{ text: 'Segment-5', iconName: 'settings', id: 'seg-5', disabled: false },
25+
{ text: 'Segment-6 Logs Insights QL', iconName: 'settings', id: 'seg-6', disabled: false },
26+
]}
27+
onChange={event => setSelectedId(event.detail.selectedId)}
28+
selectedId={selectedId}
29+
label="Segmented Control Label"
30+
/>
31+
<Select
32+
selectedOption={null}
33+
placeholder="Select an option"
34+
options={[
35+
{ label: 'Option 1', value: '1' },
36+
{ label: 'Option 2', value: '2' },
37+
{ label: 'Option 3', value: '3' },
38+
{ label: 'Option 4', value: '4' },
39+
{ label: 'Option 5', value: '5' },
40+
]}
41+
/>
42+
<Button>Button</Button>
43+
</SpaceBetween>
44+
</Box>
45+
</SpaceBetween>
2646
</article>
2747
);
2848
}

‎src/segmented-control/segment.scss‎

Lines changed: 62 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
$segment-properties: (
1313
'default-background': awsui.$color-background-segment-default,
1414
'default-color': awsui.$color-text-segment-default,
15-
'hover-background': awsui.$color-background-segment-hover,
15+
//'hover-background': awsui.$color-background-segment-hover,
16+
'hover-background': awsui.$color-background-dropdown-item-filter-match,
1617
'hover-color': awsui.$color-text-segment-hover,
1718
'active-background': awsui.$color-background-segment-active,
1819
'disabled-background': awsui.$color-background-segment-disabled,
@@ -38,73 +39,108 @@ $selected-color: awsui.$color-text-segment-active;
3839
@include styles.text-flex-wrapping;
3940
@include styles.font-button;
4041
letter-spacing: 0.25px;
41-
border-block: styles.$control-border-width solid $default-border-color;
42-
border-inline: styles.$control-border-width solid $default-border-color;
43-
padding-block: styles.$control-padding-vertical;
44-
padding-inline: awsui.$space-button-horizontal;
45-
border-inline-end-width: 0;
42+
// border-block: styles.$control-border-width solid $default-border-color;
43+
// border-inline: styles.$control-border-width solid $default-border-color;
44+
padding-block: 2px;
45+
padding-inline: calc(awsui.$space-button-horizontal - 8px);
46+
//border-inline-end-width: 0;
4647
background: $default-background;
4748
color: $default-color;
49+
border-inline: none;
50+
border-block: none;
51+
border-start-start-radius: 0;
52+
border-start-end-radius: 0;
53+
border-end-start-radius: 0;
54+
border-end-end-radius: 0;
4855
overflow: visible;
56+
position: relative;
57+
height: calc(100% - 4px);
58+
4959
&:focus {
5060
outline: none;
5161
}
62+
5263
@for $i from 1 through 6 {
5364
&:nth-child(#{$i}) {
5465
grid-column: $i;
5566
-ms-grid-column: $i;
5667
}
5768
}
69+
5870
@include focus-visible.when-visible {
5971
@include styles.focus-highlight(awsui.$space-segmented-control-focus-outline-gutter);
6072
}
61-
&:last-child {
62-
border-inline-end-width: styles.$control-border-width;
63-
border-start-start-radius: 0;
64-
border-start-end-radius: awsui.$border-radius-button;
65-
border-end-start-radius: 0;
66-
border-end-end-radius: awsui.$border-radius-button;
67-
}
68-
&:first-child {
69-
border-start-start-radius: awsui.$border-radius-button;
70-
border-start-end-radius: 0;
71-
border-end-start-radius: awsui.$border-radius-button;
72-
border-end-end-radius: 0;
73-
}
73+
74+
// &:last-child {
75+
// // border-inline-end-width: styles.$control-border-width;
76+
// // border-start-start-radius: 0;
77+
// // border-start-end-radius: 8px;
78+
// // border-end-start-radius: 0;
79+
// // border-end-end-radius: 8px;
80+
// border-radius: 4px;
81+
// }
82+
// &:first-child {
83+
// border-start-start-radius: 8px;
84+
// border-start-end-radius: 0;
85+
// border-end-start-radius: 8px;
86+
// border-end-end-radius: 0;
87+
// }
7488

7589
&.disabled {
7690
background: $disabled-background;
77-
border-color: $disabled-border-color;
91+
//border-color: $disabled-border-color;
7892
color: $disabled-color;
7993
}
8094

8195
&:not(.disabled) + .segment.disabled {
82-
border-inline-start-color: $default-border-color;
96+
//border-inline-start-color: $default-border-color;
8397
}
8498

8599
&.selected {
86100
background: $selected-background;
87-
border-color: $selected-border-color;
101+
//border-color: $selected-border-color;
88102
color: $selected-color;
103+
89104
& + .segment,
90105
& + .segment.disabled {
91-
border-inline-start-color: $selected-border-color;
106+
//border-inline-start-color: $selected-border-color;
92107
}
93108
}
94109

95110
&:hover:not(.selected):not(.disabled):not(:focus) {
96111
background: $hover-background;
97112
color: $hover-color;
98-
border-color: $hover-border-color;
113+
//border-color: $hover-border-color;
99114
cursor: pointer;
115+
100116
& + .segment:not(.selected) {
101-
border-inline-start-color: $hover-border-color;
117+
//border-inline-start-color: $hover-border-color;
102118
}
103119
}
104120

105121
&.selected + .segment:hover:not(.selected):not(.disabled):not(:focus) {
106-
border-inline-start-color: $selected-border-color;
122+
//border-inline-start-color: $selected-border-color;
123+
}
124+
125+
// Add dividers after each button except the last one
126+
&:not(:last-child)::after {
127+
content: '';
128+
position: absolute;
129+
right: -9px;
130+
top: 4px;
131+
height: calc(100% - 8px);
132+
width: 1px;
133+
background: awsui.$color-border-input-default;
134+
z-index: 1;
107135
}
136+
137+
// &:has(+ .selected)::after {
138+
// content: none;
139+
// }
140+
141+
// &.selected::after {
142+
// content: none;
143+
// }
108144
}
109145

110146
.icon {

‎src/segmented-control/styles.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@use '../internal/styles/' as styles;
77
@use 'segment';
88
@use 'sass:list' as list;
9+
@use '../internal/styles/tokens' as awsui;
910

1011
@function repeatValue($value, $times) {
1112
$result: ();
@@ -22,6 +23,16 @@
2223
.segment-part {
2324
display: -ms-inline-grid;
2425
display: inline-grid;
26+
gap: 17px;
27+
border-inline: solid 2px awsui.$color-border-input-default;
28+
border-block: solid 2px awsui.$color-border-input-default;
29+
border-start-start-radius: 8px;
30+
border-start-end-radius: 8px;
31+
border-end-start-radius: 8px;
32+
border-end-end-radius: 8px;
33+
align-items: center;
34+
min-block-size: 28px;
35+
padding-inline: 2px;
2536
@include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
2637
display: none;
2738
}
@@ -37,7 +48,8 @@
3748
@for $i from 2 through 6 {
3849
.segment-count-#{$i} {
3950
// The repeat syntax is not used since it is broken when using with SASS together
40-
grid-template-columns: repeatValue(1fr, $i);
51+
//grid-template-columns: repeatValue(1fr, $i);
52+
grid-template-columns: repeat(#{$i}, auto);
4153
}
4254
}
4355

‎style-dictionary/visual-refresh/spacing.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const tokens: StyleDictionary.SpacingDictionary = {
5252
spacePanelSideRight: '{spaceScaledXl}',
5353
spacePanelSplitTop: '{spaceScaledL}',
5454
spacePanelSplitBottom: '{spaceScaledL}',
55-
spaceSegmentedControlFocusOutlineGutter: '4px',
55+
spaceSegmentedControlFocusOutlineGutter: '5px',
5656
spaceTabsContentTop: '{spaceScaledS}',
5757
spaceTabsFocusOutlineGutter: '-8px',
5858
spaceTableContentBottom: '{spaceXxs}',

0 commit comments

Comments
 (0)