@primer/css 20.4.2-rc.f78bb51b → 20.4.3-rc.fcd5af82

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.
Files changed (37) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/alerts.css +1 -1
  3. package/dist/alerts.css.map +1 -1
  4. package/dist/buttons.css +1 -1
  5. package/dist/buttons.css.map +1 -1
  6. package/dist/core.css +1 -1
  7. package/dist/core.css.map +1 -1
  8. package/dist/forms.css +1 -1
  9. package/dist/forms.css.map +1 -1
  10. package/dist/marketing-buttons.css +1 -1
  11. package/dist/marketing-buttons.css.map +1 -1
  12. package/dist/marketing.css +1 -1
  13. package/dist/marketing.css.map +1 -1
  14. package/dist/meta.json +66 -66
  15. package/dist/primer.css +3 -3
  16. package/dist/primer.css.map +1 -1
  17. package/dist/product.css +1 -1
  18. package/dist/product.css.map +1 -1
  19. package/dist/segmented-control.css +1 -1
  20. package/dist/segmented-control.css.map +1 -1
  21. package/dist/stats/alerts.json +1 -1
  22. package/dist/stats/buttons.json +1 -1
  23. package/dist/stats/core.json +1 -1
  24. package/dist/stats/forms.json +1 -1
  25. package/dist/stats/marketing-buttons.json +1 -1
  26. package/dist/stats/marketing.json +1 -1
  27. package/dist/stats/primer.json +1 -1
  28. package/dist/stats/product.json +1 -1
  29. package/dist/stats/segmented-control.json +1 -1
  30. package/dist/stats/toggle-switch.json +1 -1
  31. package/dist/stats/utilities.json +1 -1
  32. package/dist/toggle-switch.css +1 -1
  33. package/dist/toggle-switch.css.map +1 -1
  34. package/dist/utilities.css +1 -1
  35. package/dist/utilities.css.map +1 -1
  36. package/package.json +7 -6
  37. package/segmented-control/segmented-control.scss +17 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/css",
3
- "version": "20.4.2-rc.f78bb51b",
3
+ "version": "20.4.3-rc.fcd5af82",
4
4
  "description": "The CSS implementation of GitHub's Primer Design System",
5
5
  "homepage": "https://primer.style/css",
6
6
  "author": "GitHub, Inc.",
@@ -25,6 +25,7 @@
25
25
  "scripts": {
26
26
  "build:docs": "script/build-docs",
27
27
  "build:docs:preview": "script/build-docs preview",
28
+ "build:css": "script/build-css.js",
28
29
  "dist": "script/dist.js",
29
30
  "dist:watch": "chokidar \"src/**/*.scss\" -c \"script/dist.js\"",
30
31
  "stylelint": "stylelint --quiet --rd 'src/**/*.scss'",
@@ -45,16 +46,16 @@
45
46
  },
46
47
  "devDependencies": {
47
48
  "@changesets/changelog-github": "0.4.6",
48
- "@changesets/cli": "2.23.2",
49
+ "@changesets/cli": "2.24.2",
49
50
  "@github/prettier-config": "0.0.4",
50
51
  "@koddsson/postcss-sass": "5.0.1",
51
52
  "@primer/stylelint-config": "^12.4.0",
52
- "autoprefixer": "10.4.7",
53
+ "autoprefixer": "10.4.8",
53
54
  "chokidar-cli": "3.0.0",
54
55
  "cssstats": "4.0.5",
55
56
  "eslint": "8.21.0",
56
57
  "eslint-plugin-github": "4.3.7",
57
- "eslint-plugin-jest": "26.6.0",
58
+ "eslint-plugin-jest": "26.8.2",
58
59
  "eslint-plugin-prettier": "4.2.1",
59
60
  "filesize": "9.0.11",
60
61
  "front-matter": "4.0.2",
@@ -62,7 +63,7 @@
62
63
  "globby": "13.1.2",
63
64
  "jest": "28.1.3",
64
65
  "js-yaml": "4.1.0",
65
- "postcss": "8.4.14",
66
+ "postcss": "8.4.16",
66
67
  "postcss-calc": "8.2.4",
67
68
  "postcss-import": "14.1.0",
68
69
  "postcss-load-config": "4.0.1",
@@ -70,7 +71,7 @@
70
71
  "postcss-simple-vars": "6.0.3",
71
72
  "prettier": "2.7.1",
72
73
  "semver": "7.3.7",
73
- "stylelint": "14.9.1",
74
+ "stylelint": "14.10.0",
74
75
  "table": "6.8.0"
75
76
  },
76
77
  "jest": {
package/segmented-control/segmented-control.scss CHANGED
@@ -1,13 +1,19 @@
1
1
  // SegmentedControl
2
+ // stylelint-disable selector-max-type
2
3
 
3
4
  .SegmentedControl {
4
- position: relative;
5
5
  display: inline-flex;
6
+ list-style: none;
6
7
  background-color: var(--color-segmented-control-bg);
7
8
  // stylelint-disable-next-line primer/borders
8
9
  border-radius: var(--primer-borderRadius-medium, $border-radius);
9
10
  // stylelint-disable-next-line primer/box-shadow
10
11
  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default);
12
+
13
+ li {
14
+ position: relative;
15
+ display: inline-flex;
16
+ }
11
17
  }
12
18
 
13
19
  // Button -----------------------------------------
@@ -27,19 +33,19 @@
27
33
  // stylelint-disable-next-line primer/borders
28
34
  border-radius: var(--primer-borderRadius-medium, $border-radius);
29
35
 
30
- &:not(.SegmentedControl-button--selected):hover .SegmentedControl-content {
36
+ &[aria-current='false']:hover .SegmentedControl-content {
31
37
  background-color: var(--color-segmented-control-button-hover-bg);
32
38
  transition-duration: var(--primer-duration-fast, 80ms);
33
39
  }
34
40
 
35
- &:not(.SegmentedControl-button--selected):active .SegmentedControl-content {
41
+ &[aria-current='false']:active .SegmentedControl-content {
36
42
  background-color: var(--color-segmented-control-button-active-bg);
37
43
  transition-duration: 0;
38
44
  }
39
45
 
40
46
  // Selected
41
47
 
42
- &.SegmentedControl-button--selected {
48
+ &[aria-current='true'] {
43
49
  // stylelint-disable-next-line primer/typography
44
50
  font-weight: var(--base-text-weight-semibold, $font-weight-bold);
45
51
  background-color: var(--color-btn-bg);
@@ -61,8 +67,8 @@
61
67
  transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
62
68
  }
63
69
 
64
- &.SegmentedControl-button--selected::before,
65
- &.SegmentedControl-button--selected + .SegmentedControl-button::before {
70
+ &[aria-current='true']::before,
71
+ &[aria-current='true'] + .SegmentedControl-button::before {
66
72
  border-color: transparent;
67
73
  }
68
74
  }
@@ -110,7 +116,8 @@
110
116
  .SegmentedControl--fullWidth {
111
117
  display: flex;
112
118
 
113
- .SegmentedControl-button {
119
+ .SegmentedControl-button,
120
+ li {
114
121
  flex: 1;
115
122
  justify-content: center;
116
123
  }
@@ -128,10 +135,8 @@
128
135
 
129
136
  // Icon only when narrow
130
137
  @media (max-width: $width-md) {
131
- .SegmentedControl--iconOnly-whenNarrow {
132
- .SegmentedControl-button {
133
- width: var(--primer-control-medium-size, 32px);
134
- }
138
+ .SegmentedControl-button--iconOnly-whenNarrow {
139
+ width: var(--primer-control-medium-size, 32px);
135
140
 
136
141
  .SegmentedControl-content {
137
142
  padding: 0;
@@ -156,7 +161,7 @@
156
161
 
157
162
  // reset for icon-only buttons
158
163
  .SegmentedControl-button--iconOnly,
159
- .SegmentedControl--iconOnly-whenNarrow .SegmentedControl-button {
164
+ .SegmentedControl-button--iconOnly-whenNarrow {
160
165
  min-width: unset;
161
166
  }
162
167
  }