Skip to content

Commit c033dcb

Browse files
langermanklangermank
committed
Merge branch 'main' of https://github.com/primer/css into global-focus-styles
2 parents 57ae3b8 + f824581 commit c033dcb

25 files changed

+1310
-217
lines changed

‎.changeset/heavy-rivers-retire.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Remove `Label` bg hack

‎.vscode/story-template.code-snippets‎

Lines changed: 55 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -7,71 +7,70 @@
77
"// import { StoryTemplateName } from './OtherStoryFile.stories' // import stories for component compositions",
88
"",
99
"export default {",
10-
" title: 'Components/ComponentName',",
11-
" excludeStories: ['ComponentTemplateName'],",
12-
" argTypes: {",
13-
" booleanExample: {",
14-
" control: { type: 'boolean' },",
15-
" description: 'true/false toggle to controls',",
16-
" table: {",
17-
" category: 'Pick one: CSS, HTML, Interactive'",
18-
" }",
19-
" },",
20-
" selectExample: {",
21-
" options: [0, 1, 2, 3], // iterator",
22-
" mapping: ['string1', 'string2', 'string3', 'string4'], // values",
23-
" control: {",
24-
" type: 'select',",
25-
" labels: ['string1-label', 'string2-label', 'string3-label', 'string4-label'] // public labels",
26-
" },",
27-
" description: 'select menu mapping to strings (example: use for variant class names)',",
28-
" table: {",
29-
" category: 'Pick one: CSS, HTML, Interactive'",
30-
" }",
31-
" },",
32-
" stringExample: {",
33-
" name: 'stringExample',",
34-
" type: 'string',",
35-
" description: 'text box control',",
36-
" table: {",
37-
" category: 'Pick one: CSS, HTML, Interactive'",
38-
" }",
39-
" },",
40-
" children: {",
41-
" description: 'creates a slot for children',",
42-
" table: {",
43-
" category: 'HTML'",
44-
" }",
45-
" },",
10+
" title: 'Components/ComponentName',",
11+
" excludeStories: ['ComponentTemplateName'],",
12+
" layout: 'padded',",
13+
" argTypes: {",
14+
" booleanExample: {",
15+
" control: {type: 'boolean'},",
16+
" description: 'true/false toggle to controls',",
17+
" table: {",
18+
" category: 'Pick one: CSS, HTML, Interactive'",
19+
" }",
20+
" },",
21+
" radioExample: {",
22+
" options: ['string1', 'string2', 'string3', 'string4'],",
23+
" control: {",
24+
" type: 'inline-radio',",
25+
" },",
26+
" description: 'radio buttons mapping to strings (example: use for variant class names)',",
27+
" table: {",
28+
" category: 'Pick one: CSS, HTML, Interactive'",
29+
" }",
30+
" },",
31+
" stringExample: {",
32+
" name: 'stringExample',",
33+
" type: 'string',",
34+
" description: 'text box control',",
35+
" table: {",
36+
" category: 'Pick one: CSS, HTML, Interactive'",
37+
" }",
38+
" },",
39+
" children: {",
40+
" description: 'creates a slot for children',",
41+
" table: {",
42+
" category: 'HTML'",
43+
" }",
4644
" }",
45+
" }",
4746
"}",
4847
"",
4948
"// build every component case here in the template (private api)",
50-
"export const ComponentTemplateName = ({ booleanExample, selectExample, stringExample, children }) => (",
51-
" <div",
52-
" // use clsx for multiple classnames",
53-
" className={clsx('defaultClass', selectExample && `${selectExample}`, booleanExample && 'defaultClass--modifier')}",
54-
" // use undefined for values that shouldn't be set if false",
55-
" aria-hidden={booleanExample ? 'true' : undefined}",
56-
" >",
57-
" {/* use {children} for wrapper component templates */}",
58-
" <>",
59-
" {stringExample}",
60-
" {children}",
61-
" </>",
62-
" </div>",
49+
"export const ComponentTemplateName = ({booleanExample, radioExample, stringExample, children}) => (",
50+
" <div",
51+
" // use clsx for multiple classnames",
52+
" className={clsx('defaultClass', radioExample && `radioExample`, booleanExample && 'defaultClass--modifier')}",
53+
" // use undefined for values that shouldn't be set if false",
54+
" // aria-hidden={booleanExample ? 'true' : undefined}",
55+
" >",
56+
" {/* use {children} for wrapper component templates */}",
57+
" <>",
58+
" {stringExample}",
59+
" {children}",
60+
" </>",
61+
" </div>",
6362
")",
6463
"",
6564
"// create a \"playground\" demo page that may set some defaults and allow story to access component controls",
6665
"export const Playground = ComponentTemplateName.bind({})",
6766
"Playground.args = {",
68-
" stringExample: 'Default text',",
69-
" booleanExample: false,",
70-
" children: (",
71-
" <>",
72-
" <StoryTemplateName someProp=\"Use props from other stories\" />",
73-
" </>",
74-
" )",
67+
" stringExample: 'Default text',",
68+
" booleanExample: false",
69+
" // children: (",
70+
" // <>",
71+
" // <StoryTemplateName {...StoryTemplateName.args} />",
72+
" // </>",
73+
" // )",
7574
"}",
7675
""
7776
],

‎docs/.storybook/main.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ module.exports = {
66
'@storybook/addon-essentials',
77
'@storybook/preset-scss',
88
'@whitespace/storybook-addon-html',
9-
'storybook-addon-designs'
9+
'storybook-addon-designs',
10+
'storybook-color-picker'
1011
]
1112
}

‎docs/.storybook/manager-head.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<style>
2+
{# storybook ui overrides #}
3+
#color-picker {
4+
max-width: 40vw;
5+
}
6+
7+
.css-10x86lf-Colors {
8+
width: 20ch !important;
9+
}
10+
</style>

‎docs/.storybook/preview.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import '../../src/docs.scss'
22
import '../../src/index.scss'
33
import '../../src/base/index.scss'
4+
import '../src/stories/helpers/storybook-styles.scss'
45
import renderToHTML from '../src/stories/helpers/code-snippet-html-helper'
56

67
const customViewports = {

‎docs/content/components/labels.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ Labels come in a few different functional classes. Use to communicate the conten
5757

5858
### Label sizes
5959

60-
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
60+
If space allows, add the `Label--large` modifier to add a bit more padding to labels.
6161

6262
```html live
6363
<span class="Label Label--gray-darker mr-1">Default</span>
@@ -66,7 +66,7 @@ If space allows, add the `Label--large` modidfier to add a bit more padding to l
6666

6767
### Inline labels
6868

69-
Sometimes when adding a label the line-height can be incrased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.
69+
Sometimes when adding a label the line-height can be increased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.
7070

7171
```html live
7272
<p class="col-4">
@@ -97,7 +97,7 @@ If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
9797

9898
## States
9999

100-
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
100+
Use state labels to inform users of an item's status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
101101

102102
- `State`
103103
- `State State--draft`
@@ -151,7 +151,7 @@ Use the `Counter` component to add a count to navigational elements and buttons.
151151

152152
1. the default `Counter`,
153153
2. the `Counter--primary` with a stronger background color
154-
3. and `Counter--secondary` with a more subtler text color.
154+
3. and `Counter--secondary` with a more subtle text color.
155155

156156
Note: When a counter is empty, its visibility will be hidden.
157157

@@ -172,7 +172,7 @@ Use the `Counter` in navigation to indicate the number of items without the user
172172
</div>
173173
```
174174

175-
You can also have icons and emoji in counters. Or use utilities for counters with different background colors.
175+
You can also have icons and emojis in counters. Or use utilities for counters with different background colors.
176176

177177
```html live
178178
<span class="Counter mr-1">1.5K</span>

‎docs/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"develop": "ln -sf ../dist . && gatsby develop -H 0.0.0.0",
88
"build-content": "gatsby build --prefix-paths",
99
"build": "./script/now-build.sh && ./script/build-storybook.sh",
10-
"storybook": "start-storybook -p 6006",
10+
"storybook": "NODE_ENV=test start-storybook -p 6006",
1111
"build-storybook": "./script/build-storybook.sh"
1212
},
1313
"dependencies": {
@@ -58,6 +58,7 @@
5858
"@storybook/react": "6.3.12",
5959
"@whitespace/storybook-addon-html": "^5.0.0",
6060
"babel-loader": "^8.2.3",
61-
"storybook-addon-designs": "6.2.0"
61+
"storybook-addon-designs": "6.2.0",
62+
"storybook-color-picker": "2.1.4"
6263
}
6364
}

‎docs/src/stories/components/ActionList/ActionListItem.stories.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default {
1616
options: [0, 1, 2], // iterator
1717
mapping: ['', 'ActionList-content--sizeMedium', 'ActionList-content--sizeLarge'], // values
1818
control: {
19-
type: 'select',
19+
type: 'inline-radio',
2020
labels: ['default', 'medium', 'large']
2121
},
2222
description: 'small (default), medium, large',

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

Lines changed: 40 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,6 @@ export default {
7373
category: 'CSS'
7474
}
7575
},
76-
dropdownBtn: {
77-
control: {type: 'boolean'},
78-
table: {
79-
category: 'CSS'
80-
}
81-
},
8276
leadingVisual: {
8377
name: 'leadingVisual',
8478
type: 'string',
@@ -87,28 +81,19 @@ export default {
8781
category: 'HTML'
8882
}
8983
},
90-
icon: {
91-
name: 'icon',
84+
trailingVisual: {
85+
name: 'trailingVisual',
9286
type: 'string',
9387
description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
9488
table: {
9589
category: 'HTML'
9690
}
9791
},
98-
id: {
99-
name: 'id',
100-
type: 'string',
101-
description: 'label id for icon only buttons',
102-
table: {
103-
category: 'HTML'
104-
}
105-
},
106-
trailingVisual: {
107-
name: 'trailingVisual',
108-
type: 'string',
109-
description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
92+
trailingAction: {
93+
defaultValue: false,
94+
control: {type: 'boolean'},
11095
table: {
111-
category: 'HTML'
96+
category: 'CSS'
11297
}
11398
},
11499
selected: {
@@ -117,10 +102,31 @@ export default {
117102
table: {
118103
category: 'CSS'
119104
}
105+
},
106+
focusElement: {
107+
control: {type: 'boolean'},
108+
description: 'set focus on one element',
109+
table: {
110+
category: 'Interactive'
111+
}
112+
},
113+
focusAllElements: {
114+
control: {type: 'boolean'},
115+
description: 'set focus on all elements for viewing in all themes',
116+
table: {
117+
category: 'Interactive'
118+
}
120119
}
121120
}
122121
}
123122

123+
const focusMethod = function getFocus() {
124+
// find the focusable element
125+
var button = document.getElementsByTagName('button')[0]
126+
// set focus on element
127+
button.focus()
128+
}
129+
124130
export const ButtonTemplate = ({
125131
label,
126132
variant,
@@ -129,11 +135,11 @@ export const ButtonTemplate = ({
129135
fullWidth,
130136
leadingVisual,
131137
trailingVisual,
138+
trailingAction,
132139
selected,
133140
closeBtn,
134-
dropdownBtn,
135-
icon,
136-
id
141+
focusElement,
142+
focusAllElements
137143
}) => (
138144
<>
139145
<button
@@ -143,23 +149,15 @@ export const ButtonTemplate = ({
143149
variant && `${variant}`,
144150
size && `${size}`,
145151
fullWidth && 'btn-block',
146-
closeBtn && 'close-button'
152+
closeBtn && 'close-button',
153+
focusAllElements && 'focus'
147154
)}
148-
aria-selected={selected && selected}
149-
aria-labelledby={id}
155+
aria-selected={selected}
150156
>
151157
{leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />}
152-
<span hidden={icon} id={id}>
153-
{label}
154-
</span>
155-
{icon && <span className="" dangerouslySetInnerHTML={{__html: icon}} />}
156-
{trailingVisual && (
157-
<>
158-
<span className="" dangerouslySetInnerHTML={{__html: trailingVisual}} />{' '}
159-
{dropdownBtn && <span class="dropdown-caret"></span>}
160-
</>
161-
)}
162-
158+
<span>{label}</span>
159+
{trailingVisual && <span className="" dangerouslySetInnerHTML={{__html: trailingVisual}} />}
160+
{trailingAction && <span class="dropdown-caret"></span>}
163161
{closeBtn && (
164162
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
165163
<path
@@ -169,10 +167,13 @@ export const ButtonTemplate = ({
169167
</svg>
170168
)}
171169
</button>
170+
{focusElement && focusMethod()}
172171
</>
173172
)
174173

175174
export const Playground = ButtonTemplate.bind({})
176175
Playground.args = {
177-
closeBtn: false
176+
closeBtn: false,
177+
focusElement: false,
178+
focusAllElements: false
178179
}

‎docs/src/stories/components/Button/ButtonFeatures.stories.jsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,3 @@ SelectedWithLeadingVisual.args = {
5353
leadingVisual:
5454
'<svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
5555
}
56-
57-
export const IconOnly = ButtonTemplate.bind({})
58-
IconOnly.storyName = 'Icon only'
59-
IconOnly.args = {
60-
label: 'Description of action',
61-
id: 'my-button-label',
62-
icon: '<svg class="octicon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 2.5h12.5a.25.25 0 01.25.25v7.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25v-7.5a.25.25 0 01.25-.25zM14.25 1H1.75A1.75 1.75 0 000 2.75v7.5C0 11.216.784 12 1.75 12h3.727c-.1 1.041-.52 1.872-1.292 2.757A.75.75 0 004.75 16h6.5a.75.75 0 00.565-1.243c-.772-.885-1.193-1.716-1.292-2.757h3.727A1.75 1.75 0 0016 10.25v-7.5A1.75 1.75 0 0014.25 1zM9.018 12H6.982a5.72 5.72 0 01-.765 2.5h3.566a5.72 5.72 0 01-.765-2.5z"></path></svg>'
63-
}

0 commit comments

Comments
 (0)