Skip to content

Segmented control list #2195

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

Merged
merged 5 commits into from
Aug 11, 2022
Merged

Segmented control list #2195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
63ec987
Updatging SegmentedControl to a role="list"
jonrohan Aug 9, 2022
34e2e9e
Remove SegmentedControl-button--selected class
jonrohan Aug 9, 2022
47e184e
Stylelint auto-fixes
actions-user Aug 9, 2022
9406d8a
Create two-gifts-yawn.md
jonrohan Aug 10, 2022
4ada684
Merge branch 'main' into segmented_control_list
jonrohan Aug 11, 2022
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
5 changes: 5 additions & 0 deletions .changeset/two-gifts-yawn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Updating the SegmentedControl component to role=list and use `ul`.
8 changes: 4 additions & 4 deletions docs/src/stories/components/SegmentedControl/SegmentedControl.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,14 +74,14 @@ IconsAndText.args = {
}

export const IconsOnlyTemplate = ({fullWidth, ariaLabel, iconOnlyWhenNarrow}) => (
<>
<segmented-control role="toolbar" aria-label={ariaLabel} class={classNames(fullWidth, iconOnlyWhenNarrow)}>
<segmented-control>
<ul aria-label={ariaLabel} class={classNames(fullWidth, iconOnlyWhenNarrow)}>
<SegmentedControlButtonTemplate text="Outline" leadingVisual iconOnly />
<SegmentedControlButtonTemplate text="Write" leadingVisual iconOnly />
<SegmentedControlButtonTemplate text="Preview" leadingVisual iconOnly />
<SegmentedControlButtonTemplate text="Publish" leadingVisual iconOnly selected />
</segmented-control>
</>
</ul>
</segmented-control>
)

export const IconsOnly = IconsOnlyTemplate.bind({})
Expand Down
34 changes: 18 additions & 16 deletions docs/src/stories/components/SegmentedControl/SegmentedControlButton.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,25 @@ export default {
// build every component case here in the template (private api)
export const SegmentedControlButtonTemplate = ({selected, text, leadingVisual, iconOnly }) => (
<>
<button className={clsx(
'SegmentedControl-button',
iconOnly && `SegmentedControl-button--iconOnly`,
selected && `SegmentedControl-button--selected`,
)}
aria-current={selected}
aria-label={iconOnly && text}
>
<div class="SegmentedControl-content">
{leadingVisual && (
<svg class="SegmentedControl-leadingVisual octicon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
<li>
<button className={clsx(
'SegmentedControl-button',
iconOnly && `SegmentedControl-button--iconOnly`,
selected && `SegmentedControl-button--selected`,
)}
{!iconOnly && (
<span class="SegmentedControl-text" data-content={text}>{text}</span>
)}
</div>
</button>
aria-current={selected}
aria-label={iconOnly && text}
>
<div class="SegmentedControl-content">
{leadingVisual && (
<svg class="SegmentedControl-leadingVisual octicon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
)}

<span class="SegmentedControl-text" data-content={text}>{text}</span>
)}
</div>
</button>
</li>
</>
)

Expand Down
21 changes: 14 additions & 7 deletions src/segmented-control/segmented-control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
// SegmentedControl
// stylelint-disable selector-max-type

.SegmentedControl {
position: relative;
display: inline-flex;
list-style: none;
background-color: var(--color-segmented-control-bg);
// stylelint-disable-next-line primer/borders
border-radius: var(--primer-borderRadius-medium, $border-radius);
// stylelint-disable-next-line primer/box-shadow
box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default);

li {
position: relative;
display: inline-flex;
}
}

// Button -----------------------------------------
Expand All @@ -27,19 +33,19 @@
// stylelint-disable-next-line primer/borders
border-radius: var(--primer-borderRadius-medium, $border-radius);

&:not(.SegmentedControl-button--selected):hover .SegmentedControl-content {
&[aria-current='false']:hover .SegmentedControl-content {
background-color: var(--color-segmented-control-button-hover-bg);
transition-duration: var(--primer-duration-fast, 80ms);
}

&:not(.SegmentedControl-button--selected):active .SegmentedControl-content {
&[aria-current='false']:active .SegmentedControl-content {
background-color: var(--color-segmented-control-button-active-bg);
transition-duration: 0;
}

// Selected

&.SegmentedControl-button--selected {
&[aria-current='true'] {
// stylelint-disable-next-line primer/typography
font-weight: var(--base-text-weight-semibold, $font-weight-bold);
background-color: var(--color-btn-bg);
Expand All @@ -61,8 +67,8 @@
transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
}

&.SegmentedControl-button--selected::before,
&.SegmentedControl-button--selected + .SegmentedControl-button::before {
&[aria-current='true']::before,
&[aria-current='true'] + .SegmentedControl-button::before {
border-color: transparent;
}
}
Expand Down Expand Up @@ -110,7 +116,8 @@
.SegmentedControl--fullWidth {
display: flex;

.SegmentedControl-button {
.SegmentedControl-button,
li {
flex: 1;
justify-content: center;
}
Expand Down