Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Explore segmented control #3261

Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

chore: Explore segmented control #3261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9379225
apply option 2
at-susie Feb 6, 2025
57a523f
Design refinements
at-susie Feb 6, 2025
2b24258
make it pill shape and address text cutting issue
at-susie Feb 7, 2025
9efd108
update example
at-susie Feb 7, 2025
8d1e30f
update example to add icon only version
at-susie Feb 7, 2025
9bc7ec8
adjust space
at-susie Feb 10, 2025
2ac4931
remove unnecessary styles
at-susie Feb 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 58 additions & 14 deletions pages/segmented-control/simple.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,71 @@
// SPDX-License-Identifier: Apache-2.0
import React, { useState } from 'react';

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

export default function SegmentedControlPage() {
const [selectedFirstId, setSelecteFirstdId] = useState<string | null>('seg1-1');
const [selectedSecondId, setSelecteSecondId] = useState<string | null>('seg2-1');
const [selectedId, setSelectedId] = useState<string | null>('seg-4');
return (
<article>
<h1>SegmentedControl demo</h1>
<Input ariaLabel="Input Label" value="" readOnly={true} />
<SegmentedControl
options={[
{ text: 'Segment-1', iconName: 'settings', id: 'seg-1', disabled: false },
{ text: 'Segment-2', iconName: 'settings', id: 'seg-2', disabled: true },
{ text: 'Segment-3', iconName: 'settings', id: 'seg-3', disabled: false },
{ text: 'Segment-4', iconName: 'settings', id: 'seg-4', disabled: false },
{ text: 'Segment-5', iconName: 'settings', id: 'seg-5', disabled: false },
]}
onChange={event => setSelectedId(event.detail.selectedId)}
selectedId={selectedId}
label="Segmented Control Label"
/>
<SpaceBetween size="l">
<Box margin={{ horizontal: 'm', vertical: 'xxl' }}>
<SpaceBetween size="xl" direction="horizontal">
<SegmentedControl
options={[
{ text: 'Logs Insights QL', id: 'seg1-1', disabled: false },
{ text: 'OpenSearch PPL', id: 'seg1-2', disabled: false },
{ text: 'OpenSearch SQL', id: 'seg1-3', disabled: false },
]}
onChange={event => setSelecteFirstdId(event.detail.selectedId)}
selectedId={selectedFirstId}
label="Segmented Control Label"
/>
<Select
selectedOption={null}
placeholder="Select an option"
options={[
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
{ label: 'Option 4', value: '4' },
{ label: 'Option 5', value: '5' },
]}
/>
<Button>Button</Button>
</SpaceBetween>
</Box>
<Box margin={{ horizontal: 'm', vertical: 'xxl' }}>
<SegmentedControl
options={[
{ iconName: 'view-horizontal', id: 'seg2-1', disabled: false },
{ iconName: 'view-vertical', id: 'seg2-2', disabled: false },
{ iconName: 'view-full', id: 'seg2-3', disabled: false },
]}
onChange={event => setSelecteSecondId(event.detail.selectedId)}
selectedId={selectedSecondId}
label="Segmented Control Label"
/>
</Box>
<Box margin={{ horizontal: 'm', vertical: 'xxl' }}>
<SegmentedControl
options={[
{ text: 'Segment-1', iconName: 'settings', id: 'seg-1', disabled: false },
{ text: 'S2', iconName: 'settings', id: 'seg-2', disabled: false },
{ text: 'S3', iconName: 'settings', id: 'seg-3', disabled: false },
{ text: 'Segment-4 Logs Insights QL', iconName: 'settings', id: 'seg-4', disabled: false },
{ text: 'Segment-5', iconName: 'settings', id: 'seg-5', disabled: false },
{ text: 'Segment-6 Logs Insights QL', iconName: 'settings', id: 'seg-6', disabled: false },
]}
onChange={event => setSelectedId(event.detail.selectedId)}
selectedId={selectedId}
label="Segmented Control Label"
/>
</Box>
</SpaceBetween>
</article>
);
}
61 changes: 28 additions & 33 deletions src/segmented-control/segment.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
$segment-properties: (
'default-background': awsui.$color-background-segment-default,
'default-color': awsui.$color-text-segment-default,
'hover-background': awsui.$color-background-segment-hover,
//'hover-background': awsui.$color-background-segment-hover,
'hover-background': awsui.$color-background-dropdown-item-filter-match,
'hover-color': awsui.$color-text-segment-hover,
'active-background': awsui.$color-background-segment-active,
'disabled-background': awsui.$color-background-segment-disabled,
Expand All @@ -38,72 +39,66 @@ $selected-color: awsui.$color-text-segment-active;
@include styles.text-flex-wrapping;
@include styles.font-button;
letter-spacing: 0.25px;
border-block: styles.$control-border-width solid $default-border-color;
border-inline: styles.$control-border-width solid $default-border-color;
padding-block: styles.$control-padding-vertical;
padding-inline: awsui.$space-button-horizontal;
border-inline-end-width: 0;
padding-block: 2px;
padding-inline: calc(awsui.$space-button-horizontal - 4px);
background: $default-background;
color: $default-color;
border-inline: none;
border-block: none;
border-start-start-radius: 20px;
border-start-end-radius: 20px;
border-end-start-radius: 20px;
border-end-end-radius: 20px;
overflow: visible;
position: relative;
block-size: calc(100% - 4px);
display: flex;
align-items: center;

&:focus {
outline: none;
}

@for $i from 1 through 6 {
&:nth-child(#{$i}) {
grid-column: $i;
-ms-grid-column: $i;
}
}

@include focus-visible.when-visible {
@include styles.focus-highlight(awsui.$space-segmented-control-focus-outline-gutter);
}
&:last-child {
border-inline-end-width: styles.$control-border-width;
border-start-start-radius: 0;
border-start-end-radius: awsui.$border-radius-button;
border-end-start-radius: 0;
border-end-end-radius: awsui.$border-radius-button;
}
&:first-child {
border-start-start-radius: awsui.$border-radius-button;
border-start-end-radius: 0;
border-end-start-radius: awsui.$border-radius-button;
border-end-end-radius: 0;
}

&.disabled {
background: $disabled-background;
border-color: $disabled-border-color;
color: $disabled-color;
}

&:not(.disabled) + .segment.disabled {
border-inline-start-color: $default-border-color;
}

&.selected {
background: $selected-background;
border-color: $selected-border-color;
color: $selected-color;
& + .segment,
& + .segment.disabled {
border-inline-start-color: $selected-border-color;
}
}

&:hover:not(.selected):not(.disabled):not(:focus) {
background: $hover-background;
color: $hover-color;
border-color: $hover-border-color;
cursor: pointer;

& + .segment:not(.selected) {
border-inline-start-color: $hover-border-color;
//border-inline-start-color: $hover-border-color;
}
}

&.selected + .segment:hover:not(.selected):not(.disabled):not(:focus) {
border-inline-start-color: $selected-border-color;
&:not(:last-child)::after {
content: '';
position: absolute;
inset-inline-end: -5px;
inset-block-start: 6px;
block-size: calc(100% - 12px);
inline-size: 1px;
background: awsui.$color-border-input-default;
z-index: 1;
}
}

Expand Down
14 changes: 13 additions & 1 deletion src/segmented-control/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@use '../internal/styles/' as styles;
@use 'segment';
@use 'sass:list' as list;
@use '../internal/styles/tokens' as awsui;

@function repeatValue($value, $times) {
$result: ();
Expand All @@ -22,6 +23,16 @@
.segment-part {
display: -ms-inline-grid;
display: inline-grid;
gap: 9px;
border-inline: solid 2px awsui.$color-border-input-default;
border-block: solid 2px awsui.$color-border-input-default;
border-start-start-radius: 24px;
border-start-end-radius: 24px;
border-end-start-radius: 24px;
border-end-end-radius: 24px;
align-items: center;
min-block-size: 28px;
padding-inline: 2px;
@include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
display: none;
}
Expand All @@ -37,7 +48,8 @@
@for $i from 2 through 6 {
.segment-count-#{$i} {
// The repeat syntax is not used since it is broken when using with SASS together
grid-template-columns: repeatValue(1fr, $i);
//grid-template-columns: repeatValue(1fr, $i);
grid-template-columns: repeat(#{$i}, auto);
}
}

Expand Down
2 changes: 1 addition & 1 deletion style-dictionary/visual-refresh/spacing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const tokens: StyleDictionary.SpacingDictionary = {
spacePanelSideRight: '{spaceScaledXl}',
spacePanelSplitTop: '{spaceScaledL}',
spacePanelSplitBottom: '{spaceScaledL}',
spaceSegmentedControlFocusOutlineGutter: '4px',
spaceSegmentedControlFocusOutlineGutter: '5px',
spaceTabsContentTop: '{spaceScaledS}',
spaceTabsFocusOutlineGutter: '-8px',
spaceTableContentBottom: '{spaceXxs}',
Expand Down
Loading