@primer/css 20.4.2-rc.bc5c35ea → 20.4.2-rc.e10d2255

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 +4 -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 +55 -55
  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 +9 -9
  37. package/segmented-control/segmented-control.scss +14 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/css",
3
- "version": "20.4.2-rc.bc5c35ea",
3
+ "version": "20.4.2-rc.e10d2255",
4
4
  "description": "The CSS implementation of GitHub's Primer Design System",
5
5
  "homepage": "https://primer.style/css",
6
6
  "author": "GitHub, Inc.",
@@ -44,17 +44,17 @@
44
44
  "@primer/primitives": "^7.9.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@changesets/changelog-github": "0.4.5",
48
- "@changesets/cli": "2.23.2",
47
+ "@changesets/changelog-github": "0.4.6",
48
+ "@changesets/cli": "2.24.2",
49
49
  "@github/prettier-config": "0.0.4",
50
50
  "@koddsson/postcss-sass": "5.0.1",
51
51
  "@primer/stylelint-config": "^12.4.0",
52
- "autoprefixer": "10.4.7",
52
+ "autoprefixer": "10.4.8",
53
53
  "chokidar-cli": "3.0.0",
54
54
  "cssstats": "4.0.5",
55
- "eslint": "8.20.0",
56
- "eslint-plugin-github": "4.3.6",
57
- "eslint-plugin-jest": "26.6.0",
55
+ "eslint": "8.21.0",
56
+ "eslint-plugin-github": "4.3.7",
57
+ "eslint-plugin-jest": "26.8.2",
58
58
  "eslint-plugin-prettier": "4.2.1",
59
59
  "filesize": "9.0.11",
60
60
  "front-matter": "4.0.2",
@@ -62,7 +62,7 @@
62
62
  "globby": "13.1.2",
63
63
  "jest": "28.1.3",
64
64
  "js-yaml": "4.1.0",
65
- "postcss": "8.4.14",
65
+ "postcss": "8.4.16",
66
66
  "postcss-calc": "8.2.4",
67
67
  "postcss-import": "14.1.0",
68
68
  "postcss-load-config": "4.0.1",
@@ -70,7 +70,7 @@
70
70
  "postcss-simple-vars": "6.0.3",
71
71
  "prettier": "2.7.1",
72
72
  "semver": "7.3.7",
73
- "stylelint": "14.9.1",
73
+ "stylelint": "14.10.0",
74
74
  "table": "6.8.0"
75
75
  },
76
76
  "jest": {
package/segmented-control/segmented-control.scss CHANGED
@@ -1,12 +1,19 @@
1
1
  // SegmentedControl
2
+ // stylelint-disable selector-max-type
2
3
 
3
4
  .SegmentedControl {
4
5
  display: inline-flex;
6
+ list-style: none;
5
7
  background-color: var(--color-segmented-control-bg);
6
8
  // stylelint-disable-next-line primer/borders
7
9
  border-radius: var(--primer-borderRadius-medium, $border-radius);
8
10
  // stylelint-disable-next-line primer/box-shadow
9
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
+ }
10
17
  }
11
18
 
12
19
  // Button -----------------------------------------
@@ -26,19 +33,19 @@
26
33
  // stylelint-disable-next-line primer/borders
27
34
  border-radius: var(--primer-borderRadius-medium, $border-radius);
28
35
 
29
- &:not(.SegmentedControl-button--selected):hover .SegmentedControl-content {
36
+ &[aria-current='false']:hover .SegmentedControl-content {
30
37
  background-color: var(--color-segmented-control-button-hover-bg);
31
38
  transition-duration: var(--primer-duration-fast, 80ms);
32
39
  }
33
40
 
34
- &:not(.SegmentedControl-button--selected):active .SegmentedControl-content {
41
+ &[aria-current='false']:active .SegmentedControl-content {
35
42
  background-color: var(--color-segmented-control-button-active-bg);
36
43
  transition-duration: 0;
37
44
  }
38
45
 
39
46
  // Selected
40
47
 
41
- &.SegmentedControl-button--selected {
48
+ &[aria-current='true'] {
42
49
  // stylelint-disable-next-line primer/typography
43
50
  font-weight: var(--base-text-weight-semibold, $font-weight-bold);
44
51
  background-color: var(--color-btn-bg);
@@ -60,8 +67,8 @@
60
67
  transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
61
68
  }
62
69
 
63
- &.SegmentedControl-button--selected::before,
64
- &.SegmentedControl-button--selected + .SegmentedControl-button::before {
70
+ &[aria-current='true']::before,
71
+ &[aria-current='true'] + .SegmentedControl-button::before {
65
72
  border-color: transparent;
66
73
  }
67
74
  }
@@ -109,7 +116,8 @@
109
116
  .SegmentedControl--fullWidth {
110
117
  display: flex;
111
118
 
112
- .SegmentedControl-button {
119
+ .SegmentedControl-button,
120
+ li {
113
121
  flex: 1;
114
122
  justify-content: center;
115
123
  }