@primer/view-components 0.0.122-rc.3a5efb60 → 0.0.122-rc.5d2d7c6c
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/assets/styles/primer_view_components.css +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/segmented_control.css +1 -1
- package/app/components/primer/alpha/toggle_switch.css +1 -1
- package/app/components/primer/alpha/toggle_switch.css.json +4 -13
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium,6px);
|
|
1
|
+
.SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--primer-borderRadius-medium,6px);display:inline-flex;padding:var(--primer-control-xsmall-paddingInline-condensed,4px);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-segmented-control-button-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before,.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:before{border-left:var(--primer-borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--primer-control-medium-paddingBlock,6px);margin-top:var(--primer-control-medium-paddingBlock,6px);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--primer-borderRadius-medium, 6px) - 5px);outline-offset:calc(var(--primer-control-xsmall-paddingInline-condensed, 4px) - var(--primer-borderWidth-thin, 1px))}.SegmentedControl-item .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))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .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))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--primer-control-medium-size, 32px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-medium-size,32px);min-width:var(--primer-control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .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))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--primer-control-large-size, 40px) - var(--primer-control-xsmall-paddingInline-condensed, 4px)*2 - var(--primer-borderWidth-thin, 1px)*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--primer-control-large-size,40px);min-width:var(--primer-control-large-size,40px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--primer-controlStack-medium-gap-condensed,8px)}.ToggleSwitch
|
|
1
|
+
.ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--primer-controlStack-medium-gap-condensed,8px)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--primer-borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--primer-borderRadius-medium,6px);cursor:pointer;display:block;height:var(--primer-control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-checked=true][aria-disabled=true]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;color:var(--color-switch-track-checked-disabled-fg)}.ToggleSwitch-track[aria-checked=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border-color:var(--color-switch-knob-checked-border);transform:translateX(100%)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[aria-disabled=true]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon,.ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon{color:var(--color-switch-track-disabled-fg)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-switch-track-checked-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-switch-track-fg);transform:translateX(0)}.ToggleSwitch-knob{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);bottom:0;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--primer-text-body-size-medium,14px);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,16px)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--primer-text-body-size-small,12px)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--primer-control-xsmall-size,24px);width:var(--base-size-48,48px)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
|
|
@@ -3,33 +3,24 @@
|
|
|
3
3
|
"selectors": [
|
|
4
4
|
".ToggleSwitch",
|
|
5
5
|
".ToggleSwitch.ToggleSwitch",
|
|
6
|
-
".ToggleSwitch:hover .ToggleSwitch-knob",
|
|
7
|
-
".ToggleSwitch:active .ToggleSwitch-knob",
|
|
8
6
|
".ToggleSwitch--checked .ToggleSwitch-statusOn",
|
|
9
7
|
".ToggleSwitch--checked .ToggleSwitch-statusOff",
|
|
10
8
|
".ToggleSwitch-track",
|
|
11
9
|
".ToggleSwitch-track:focus",
|
|
12
10
|
".ToggleSwitch-track:focus-visible",
|
|
11
|
+
".ToggleSwitch-track:hover",
|
|
12
|
+
".ToggleSwitch-track:active",
|
|
13
13
|
".ToggleSwitch-track:before",
|
|
14
14
|
".ToggleSwitch-track *",
|
|
15
15
|
".ToggleSwitch-track[aria-checked=true][aria-disabled=true]",
|
|
16
|
-
".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active",
|
|
17
|
-
".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover",
|
|
18
|
-
".ToggleSwitch-track[aria-checked=true][aria-disabled=true] .ToggleSwitch-knob",
|
|
19
|
-
".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:active .ToggleSwitch-knob",
|
|
20
|
-
".ToggleSwitch-track[aria-checked=true][aria-disabled=true]:hover .ToggleSwitch-knob",
|
|
21
16
|
".ToggleSwitch-track[aria-checked=true]",
|
|
22
|
-
".ToggleSwitch-track[aria-checked=true]:hover",
|
|
23
|
-
".ToggleSwitch-track[aria-checked=true]:active",
|
|
17
|
+
".ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):hover",
|
|
18
|
+
".ToggleSwitch-track[aria-checked=true]:not([aria-disabled=true]):active",
|
|
24
19
|
".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-knob",
|
|
25
20
|
".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-lineIcon",
|
|
26
21
|
".ToggleSwitch-track[aria-checked=true] .ToggleSwitch-circleIcon",
|
|
27
22
|
".ToggleSwitch-track[aria-disabled=true]",
|
|
28
|
-
".ToggleSwitch-track[aria-disabled=true]:active .ToggleSwitch-knob",
|
|
29
|
-
".ToggleSwitch-track[aria-disabled=true]:hover .ToggleSwitch-knob",
|
|
30
23
|
".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob",
|
|
31
|
-
".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:active",
|
|
32
|
-
".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-knob:hover",
|
|
33
24
|
".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-circleIcon",
|
|
34
25
|
".ToggleSwitch-track[aria-disabled=true] .ToggleSwitch-lineIcon",
|
|
35
26
|
".ToggleSwitch-icons",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/view-components",
|
|
3
|
-
"version": "0.0.122-rc.
|
|
3
|
+
"version": "0.0.122-rc.5d2d7c6c",
|
|
4
4
|
"description": "ViewComponents for the Primer Design System",
|
|
5
5
|
"main": "app/assets/javascripts/primer_view_components.js",
|
|
6
6
|
"module": "app/components/primer/primer.js",
|
|
@@ -59,11 +59,11 @@
|
|
|
59
59
|
"@changesets/changelog-github": "^0.4.6",
|
|
60
60
|
"@changesets/cli": "^2.24.1",
|
|
61
61
|
"@github/browserslist-config": "^1.0.0",
|
|
62
|
-
"@github/prettier-config": "0.0.4",
|
|
63
62
|
"@github/markdownlint-github": "^0.2.2",
|
|
63
|
+
"@github/prettier-config": "0.0.4",
|
|
64
64
|
"@playwright/test": "^1.27.1",
|
|
65
65
|
"@primer/css": "20.4.7",
|
|
66
|
-
"@primer/primitives": "^7.
|
|
66
|
+
"@primer/primitives": "^7.11.1",
|
|
67
67
|
"@rollup/plugin-node-resolve": "^13.3.0",
|
|
68
68
|
"@rollup/plugin-typescript": "^8.3.3",
|
|
69
69
|
"@typescript-eslint/eslint-plugin": "^5.31.0",
|