Skip to content

Commit

Permalink
ToggleSwitch and SegmentedControl visual updates + Primitives (PCSS) …
Browse files Browse the repository at this point in the history 
…version bump (#1824)

Co-authored-by: Mike Perrotti <[email protected]>
Co-authored-by: langermank <[email protected]>
Co-authored-by: Mike Perrotti <[email protected]>
  • Loading branch information
@langermank @mperrotti
4 people authored Feb 17, 2023
1 parent c0545a6 commit 2a23453
Show file tree
Hide file tree
Showing 11 changed files with 153 additions and 139 deletions.
5 changes: 5 additions & 0 deletions .changeset/honest-ants-end.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/view-components": patch
---

ToggleSwitch and SegmentedControl visual updates + Primitives (PCSS) version bump
Binary file modified .../screenshots/snapshots.test.ts-snapshots/primer/alpha/toggle_switch/default.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../screenshots/snapshots.test.ts-snapshots/primer/alpha/toggle_switch/focused.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 43 additions & 12 deletions app/components/primer/alpha/segmented_control.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
list-style: none;
background-color: var(--color-segmented-control-bg);
border-radius: var(--primer-borderRadius-medium, 6px);
box-shadow: var(--primer-borderInset-thin, inset 0 0 0 max(1px, 0.0625rem)) var(--color-border-default);
}

.SegmentedControl-item {
Expand All @@ -17,7 +16,7 @@

/* Selected ---------------------------------------- */
&.SegmentedControl-item--selected {
background-color: var(--color-btn-bg);
background-color: var(--color-segmented-control-button-bg);
border-color: var(--color-segmented-control-button-selected-border);

& .Button {
Expand Down Expand Up @@ -64,17 +63,29 @@
color: var(--color-btn-text);

&:focus-visible {
outline-offset: calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px));
outline-offset: calc(
var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px)
);
border-radius: calc(var(--primer-borderRadius-medium, 6px) - 5px);
}
}

& .Button--small {
height: calc(var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
padding: 0 calc(var(--primer-control-small-paddingInline-condensed, 8px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
height: calc(
var(--primer-control-small-size, 28px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
var(--primer-borderWidth-thin, 1px) * 2
);
padding: 0
calc(
var(--primer-control-small-paddingInline-condensed, 8px) -
var(--primer-control-xsmall-paddingInline-condensed, 4px)
);

&.Button--iconOnly {
width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
width: calc(
var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
var(--primer-borderWidth-thin, 1px) * 2
);

&::before {
@mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
Expand All @@ -83,11 +94,21 @@
}

& .Button--medium {
height: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
padding: 0 calc(var(--primer-control-medium-paddingInline-normal, 12px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
height: calc(
var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
var(--primer-borderWidth-thin, 1px) * 2
);
padding: 0
calc(
var(--primer-control-medium-paddingInline-normal, 12px) -
var(--primer-control-xsmall-paddingInline-condensed, 4px)
);

&.Button--iconOnly {
width: calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
width: calc(
var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
var(--primer-borderWidth-thin, 1px) * 2
);

&::before {
@mixin minTouchTarget var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px);
Expand All @@ -96,11 +117,21 @@
}

& .Button--large {
height: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
padding: 0 calc(var(--primer-control-large-paddingInline-spacious, 16px) - var(--primer-control-xsmall-paddingInline-condensed, 4px));
height: calc(
var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
var(--primer-borderWidth-thin, 1px) * 2
);
padding: 0
calc(
var(--primer-control-large-paddingInline-spacious, 16px) -
var(--primer-control-xsmall-paddingInline-condensed, 4px)
);

&.Button--iconOnly {
width: calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 - var(--primer-borderWidth-thin, 1px) * 2);
width: calc(
var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px) * 2 -
var(--primer-borderWidth-thin, 1px) * 2
);

&::before {
@mixin minTouchTarget var(--primer-control-large-size, 40px), var(--primer-control-large-size, 40px);
Expand Down
92 changes: 31 additions & 61 deletions app/components/primer/alpha/toggle_switch.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,6 @@
align-items: center;
display: inline-flex;
gap: var(--primer-controlStack-medium-gap-condensed, 8px);

&:hover {
& .ToggleSwitch-knob {
background-color: var(--color-btn-hover-bg);
}
}

&:active {
& .ToggleSwitch-knob {
background-color: var(--color-btn-active-bg);
}
}
}

.ToggleSwitch--checked {
Expand Down Expand Up @@ -56,7 +44,15 @@

&:focus,
&:focus-visible {
outline-offset: 0;
outline-offset: 1px;
}

&:hover {
background-color: var(--color-switch-track-hover-bg);
}

&:active {
background-color: var(--color-switch-track-active-bg);
}

@media (pointer: coarse) {
Expand All @@ -75,42 +71,29 @@
}

.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
background-color: var(--color-canvas-subtle);
border-color: var(--color-border-subtle);

&:hover,
&:active {
background-color: var(--color-canvas-subtle);

/* This is the most straightforward way of setting the knob's styles when the
** switch is both checked and disabled. */

& .ToggleSwitch-knob {
background-color: var(--color-switch-knob-checked-disabled-bg);
}
}

& .ToggleSwitch-knob {
background-color: var(--color-switch-knob-checked-disabled-bg);
}
background-color: var(--color-switch-track-disabled-bg);
color: var(--color-switch-track-checked-disabled-fg);
border-color: transparent;
}

.ToggleSwitch-track[aria-checked='true'] {
background-color: var(--color-switch-track-checked-bg);
border-color: var(--color-switch-track-checked-border);

&:hover {
background-color: var(--color-switch-track-checked-hover-bg);
}
&:not([aria-disabled='true']) {
&:hover {
background-color: var(--color-switch-track-checked-hover-bg);
}

&:active {
background-color: var(--color-switch-track-checked-active-bg);
&:active {
background-color: var(--color-switch-track-checked-active-bg);
}
}

& .ToggleSwitch-knob {
background-color: var(--color-switch-knob-checked-bg);
border: 0;
transform: translateX(calc(100% + 1px));
border-color: var(--color-switch-knob-checked-border);
transform: translateX(100%);
}

& .ToggleSwitch-lineIcon {
Expand All @@ -124,33 +107,21 @@

.ToggleSwitch-track[aria-disabled='true'] {
cursor: not-allowed;
background-color: var(--color-canvas-subtle);
border-color: var(--color-border-subtle);
background-color: var(--color-switch-track-disabled-bg);
border-color: transparent;
transition-property: none;

&:hover,
&:active {
& .ToggleSwitch-knob {
background-color: var(--color-btn-bg);
}
}

& .ToggleSwitch-knob {
border-color: var(--color-border-default);
box-shadow: none;

&:hover,
&:active {
background-color: var(--color-btn-bg);
}
}

& .ToggleSwitch-lineIcon {
color: var(--color-fg-subtle);
color: var(--color-switch-track-disabled-fg);
}

& .ToggleSwitch-circleIcon {
color: var(--color-fg-subtle);
color: var(--color-switch-track-disabled-fg);
}
}

Expand All @@ -164,7 +135,7 @@

.ToggleSwitch-lineIcon {
line-height: 0;
color: var(--color-accent-fg);
color: var(--color-switch-track-checked-fg);
transition-duration: 80ms;
transition-property: transform;
transform: translateX(-100%);
Expand All @@ -173,7 +144,7 @@

.ToggleSwitch-circleIcon {
line-height: 0;
color: var(--color-fg-default);
color: var(--color-switch-track-fg);
transition-duration: 80ms;
transition-property: transform;
transform: translateX(0);
Expand All @@ -182,18 +153,17 @@

.ToggleSwitch-knob {
position: absolute;
top: -1px;
bottom: -1px;
top: 0;
bottom: 0;
z-index: 1;
width: 50%;
background-color: var(--color-btn-bg);
border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-track-border);
background-color: var(--color-switch-knob-bg);
border: var(--primer-borderWidth-thin, 1px) solid var(--color-switch-knob-border);
border-radius: var(--primer-borderRadius-medium, 6px);
box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
transition-duration: 80ms;
transition-property: transform;
transform: translateX(-1px);

@media (prefers-reduced-motion) {
transition: none;
Expand Down
Loading

0 comments on commit 2a23453

Please sign in to comment.