Skip to content

Commit 5f10b78

Browse files
simuraisimurai
authored
Merge branch 'main' into fieldset-disable
2 parents 34614ed + f59639f commit 5f10b78

File tree

30 files changed

+3138
-2357
lines changed

30 files changed

+3138
-2357
lines changed

‎.github/workflows/axe.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ jobs:
1515
fetch-depth: 0
1616
- name: Get changed files
1717
id: changed-files
18-
uses: tj-actions/changed-files@v18.6
18+
uses: tj-actions/changed-files@v19
1919
with:
2020
files: |
2121
docs/content/components/**/*.md

‎CHANGELOG.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,33 @@
11
# @primer/css
22

3+
## 20.2.2
4+
5+
### Patch Changes
6+
7+
- [#2075](https://github.com/primer/css/pull/2075) [`9f576a3c`](https://github.com/primer/css/commit/9f576a3c33479fa0beb5ef4fe9b794f67a58070c) Thanks [@langermank](https://github.com/langermank)! - FormControl + Autocomplete component updates
8+
9+
## 20.2.1
10+
11+
### Patch Changes
12+
13+
- [#2094](https://github.com/primer/css/pull/2094) [`33f799f1`](https://github.com/primer/css/commit/33f799f13edad2e7434425913a8d445aa27213de) Thanks [@camertron](https://github.com/camertron)! - Add missing ToggleSwitch--checked styles
14+
15+
* [#2091](https://github.com/primer/css/pull/2091) [`f740d008`](https://github.com/primer/css/commit/f740d00827fa854062f6ce3449ca6745fae9bea8) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Bump font size of large buttons
16+
17+
## 20.2.0
18+
19+
### Minor Changes
20+
21+
- [#2087](https://github.com/primer/css/pull/2087) [`8354de5c`](https://github.com/primer/css/commit/8354de5c5eeb60e447712c04e25c2ef370206488) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Changing `PageLayout--isPaneSticky` to `PageLayout--sticky`.
22+
23+
* [#2074](https://github.com/primer/css/pull/2074) [`5cfae2c2`](https://github.com/primer/css/commit/5cfae2c2193885c34af97dd61da201c400bc8549) Thanks [@camertron](https://github.com/camertron)! - Add styles for the ToggleSwitch component
24+
25+
## 20.1.1
26+
27+
### Patch Changes
28+
29+
- [#2078](https://github.com/primer/css/pull/2078) [`92ac0e39`](https://github.com/primer/css/commit/92ac0e39e6f5aae0314397890c8f78227a6c6ba0) Thanks [@langermank](https://github.com/langermank)! - Setup new `primer-primitive` bundle
30+
331
## 20.1.0
432

533
### Minor Changes

‎docs/.storybook/main.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,9 @@ module.exports = {
88
'@whitespace/storybook-addon-html',
99
'storybook-addon-designs',
1010
'storybook-color-picker'
11-
]
11+
],
12+
framework: '@storybook/react',
13+
core: {
14+
builder: 'webpack5'
15+
}
1216
}

‎docs/.storybook/preview.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,17 @@ import '../../src/docs.scss'
22
import '../../src/index.scss'
33
import '../../src/base/index.scss'
44
import '../src/stories/helpers/storybook-styles.scss'
5+
// temporary import until primitives moves to core bundle
6+
// importing the index from /css didn't play nice with Storybook
7+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css'
8+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css'
9+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css'
10+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css'
11+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css'
12+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css'
13+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css'
14+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css'
15+
import '../../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css'
516
import renderToHTML from '../src/stories/helpers/code-snippet-html-helper'
617

718
const customViewports = {

‎docs/gatsby-browser.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// temporary import until primitives moves to core bundle
2+
// importing the index from /css didn't play nice with Gatsby
3+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css'
4+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css'
5+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css'
6+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css'
7+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css'
8+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css'
9+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css'
10+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css'
11+
import '../node_modules/@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css'

‎docs/package.json‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
"@primer/gatsby-theme-doctocat": "3.1.1",
1616
"@primer/octicons": "17.0.0",
1717
"@primer/octicons-react": "17.0.0",
18-
"@primer/primitives": "7.3.0",
18+
"@primer/primitives": "7.8.3",
1919
"@svgr/webpack": "5.5.0",
2020
"autoprefixer": "10.4.2",
21-
"babel-preset-gatsby": "^2.11.1",
21+
"babel-preset-gatsby": "^2.14.0",
2222
"chroma-js": "^2.4.2",
2323
"clsx": "^1.1.1",
2424
"core-js": "^3.20.3",
@@ -28,7 +28,7 @@
2828
"gatsby-plugin-svgr": "2.1.0",
2929
"path": "0.12.7",
3030
"postcss": "8.4.5",
31-
"postcss-import": "14.0.2",
31+
"postcss-import": "14.1.0",
3232
"postcss-load-config": "3.1.0",
3333
"postcss-loader": "4.3.0",
3434
"postcss-scss": "4.0.3",
@@ -38,7 +38,7 @@
3838
"react": "^16.13.1",
3939
"react-dom": "^16.13.1",
4040
"react-frame-component": "^5.2.1",
41-
"sass-loader": "10.2.0",
41+
"sass-loader": "13.0.0",
4242
"styled-components": "^4.3.2",
4343
"title-case": "^3.0.3"
4444
},
@@ -47,16 +47,18 @@
4747
},
4848
"devDependencies": {
4949
"@babel/core": "^7.16.7",
50-
"@storybook/addon-a11y": "6.4.19",
51-
"@storybook/addon-actions": "^6.4.12",
52-
"@storybook/addon-essentials": "^6.4.12",
53-
"@storybook/addon-links": "^6.4.12",
50+
"@storybook/addon-a11y": "6.5.0",
51+
"@storybook/addon-actions": "^6.5.0",
52+
"@storybook/addon-essentials": "^6.5.0",
53+
"@storybook/addon-links": "^6.5.0",
5454
"@storybook/addon-postcss": "2.0.0",
55+
"@storybook/builder-webpack5": "^6.5.0",
56+
"@storybook/manager-webpack5": "^6.5.0",
5557
"@storybook/preset-scss": "^1.0.3",
56-
"@storybook/react": "6.4.19",
58+
"@storybook/react": "6.5.0",
5759
"@whitespace/storybook-addon-html": "^5.0.0",
58-
"babel-loader": "^8.2.3",
60+
"babel-loader": "^8.2.5",
5961
"storybook-addon-designs": "6.2.1",
60-
"storybook-color-picker": "2.3.0"
62+
"storybook-color-picker": "2.3.1"
6163
}
6264
}

‎docs/src/@primer/gatsby-theme-doctocat/nav.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@
4646
children:
4747
- title: Alerts
4848
url: /components/alerts
49-
- title: Autocomplete
50-
url: /components/autocomplete
5149
- title: Avatars
5250
url: /components/avatars
5351
- title: Blankslate

‎docs/src/stories/components/Layout/LayoutBeta.stories.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,6 @@ export const LayoutTemplate = ({
371371
paneWidth && layoutClassName + '--paneWidth-' + `${paneWidth}`,
372372
panePosition && layoutClassName + '--panePos-' + `${panePosition}`,
373373
hasPaneDivider && layoutClassName + '--hasPaneDivider',
374-
paneIsSticky && layoutClassName + '--isPaneSticky',
375374

376375
layoutClassName + '--responsive-' + `${responsiveVariant}`,
377376
responsiveVariant === 'separateRegions' && layoutClassName + '--responsive-primary-' + `${primaryRegion}`,
@@ -403,6 +402,7 @@ export const LayoutTemplate = ({
403402
className={clsx(
404403
layoutClassName + '-region',
405404
layoutClassName + '-pane',
405+
paneIsSticky && layoutClassName + '-pane--sticky',
406406
paneDividerWhenNarrow &&
407407
layoutClassName +
408408
'-region--dividerNarrow-' +
@@ -433,6 +433,7 @@ export const LayoutTemplate = ({
433433
className={clsx(
434434
layoutClassName + '-region',
435435
layoutClassName + '-pane',
436+
paneIsSticky && layoutClassName + '-pane--sticky',
436437
paneDividerWhenNarrow &&
437438
layoutClassName +
438439
'-region--dividerNarrow-' +

‎docs/src/stories/components/Layout/SplitPageLayout.stories.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ Playground.args = {
163163
// Pane
164164
hasPane: true,
165165
paneWidth: 'wide',
166+
paneIsSticky: true,
166167

167168
// Content
168169
contentWidth: 'full',

‎docs/src/stories/components/ToggleSwitch/ToggleSwitch.stories.jsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React from 'react'
2+
3+
export default {
4+
title: 'Components/ToggleSwitch',
5+
parameters: {
6+
layout: 'padded'
7+
},
8+
excludeStories: ['ToggleSwitchTemplate'],
9+
controls: { expanded: true },
10+
argTypes: {
11+
checked: {
12+
control: {type: 'boolean'},
13+
description: 'checkbox state'
14+
},
15+
disabled: {
16+
description: 'disabled field',
17+
control: {type: 'boolean'}
18+
},
19+
size: {
20+
options: ['medium', 'small'],
21+
control: {
22+
type: 'inline-radio'
23+
},
24+
description: 'size'
25+
},
26+
labelPosition: {
27+
options: ['start', 'end'],
28+
control: {
29+
type: 'inline-radio'
30+
},
31+
description: 'label position'
32+
}
33+
}
34+
}
35+
36+
function classNamesForSwitch(disabled, checked, size, labelPosition) {
37+
const classNames = ['ToggleSwitch'];
38+
39+
if (checked) {
40+
classNames.push("ToggleSwitch--checked")
41+
}
42+
if (disabled) {
43+
classNames.push("ToggleSwitch--disabled")
44+
}
45+
if (size === 'small') {
46+
classNames.push("ToggleSwitch--small")
47+
}
48+
if (labelPosition === 'end') {
49+
classNames.push('ToggleSwitch--statusAtEnd')
50+
}
51+
52+
return classNames.join(' ')
53+
}
54+
55+
export const ToggleSwitchTemplate = ({disabled, checked, size, labelPosition}) => (
56+
<>
57+
<toggle-switch class={classNamesForSwitch(disabled, checked, size, labelPosition)}>
58+
<span aria-hidden="true" className="ToggleSwitch-status">
59+
<div className="ToggleSwitch-statusOn" style={{visibility: checked ? 'visible' : 'hidden' }}>On</div>
60+
<div className="ToggleSwitch-statusOff" style={{visibility: checked ? 'hidden' : 'visible' }}>Off</div>
61+
</span>
62+
63+
<button
64+
className="ToggleSwitch-track"
65+
role="switch"
66+
aria-checked={checked ? 'true' : 'false'}
67+
aria-disabled={disabled ? "true" : "false"}>
68+
<div className="ToggleSwitch-icons" aria-hidden="true">
69+
<div className="ToggleSwitch-lineIcon">
70+
<svg
71+
width={size === 'small' ? 12 : 16}
72+
height={size === 'small' ? 12 : 16}
73+
viewBox="0 0 16 16"
74+
fill="currentColor"
75+
xmlns="http://www.w3.org/2000/svg">
76+
<path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
77+
</svg>
78+
</div>
79+
80+
<div className="ToggleSwitch-circleIcon">
81+
<svg
82+
width={size === 'small' ? 12 : 16}
83+
height={size === 'small' ? 12 : 16}
84+
viewBox="0 0 16 16"
85+
fill="currentColor"
86+
xmlns="http://www.w3.org/2000/svg">
87+
<path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
88+
</svg>
89+
</div>
90+
</div>
91+
92+
<div className="ToggleSwitch-knob" />
93+
</button>
94+
</toggle-switch>
95+
</>
96+
)
97+
98+
export const Playground = ToggleSwitchTemplate.bind({})
99+
Playground.args = {
100+
disabled: false,
101+
checked: false,
102+
size: 'medium',
103+
labelPosition: 'start'
104+
}

0 commit comments

Comments
 (0)