Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global focus styles #1744

Merged
merged 69 commits into from
Apr 20, 2022
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
69 commits
Select commit Hold shift + click to select a range
deda0d0
setup base focus styles
langermank Nov 2, 2021
b1ab3ca
add feature stories
langermank Nov 2, 2021
1e6be4a
Merge branch 'main' of https://github.com/primer/css into global-focu…
langermank Nov 9, 2021
cf582b5
add stories for focusable things, delete outline:0
langermank Nov 9, 2021
85f3431
switch back to box-shadow
langermank Nov 9, 2021
b7e5c98
support class
langermank Nov 9, 2021
84aa9d6
stylelint
langermank Nov 9, 2021
9b17a70
fix theme viewer
langermank Nov 9, 2021
ba93d3d
switch back to outline, address feedback
langermank Nov 10, 2021
55e0753
lint
langermank Nov 10, 2021
905a856
Merge branch 'main' into global-focus-styles
langermank Nov 11, 2021
6cca16f
temp stashing stories here
langermank Nov 11, 2021
57ae3b8
Merge branch 'global-focus-styles' of https://github.com/primer/css i…
langermank Nov 16, 2021
c033dcb
Merge branch 'main' of https://github.com/primer/css into global-focu…
langermank Nov 16, 2021
d0425dc
Create giant-bees-talk.md
jonrohan Nov 16, 2021
e38caea
I think we got it!
langermank Nov 17, 2021
2fade4e
address input directly
langermank Nov 17, 2021
d2e21e7
checkbox/radio outline offset
langermank Nov 17, 2021
b84e0b0
lint
langermank Nov 17, 2021
5341273
change actionlist to just use focus
langermank Nov 17, 2021
af58aed
Merge branch 'main' into global-focus-styles
langermank Nov 18, 2021
6844e0d
Merge branch 'main' into global-focus-styles
langermank Nov 18, 2021
59f8d43
Merge branch 'main' into global-focus-styles
jonrohan Nov 19, 2021
751376b
Merge branch 'main' into global-focus-styles
langermank Nov 19, 2021
17a4622
Merge branch 'main' into global-focus-styles
langermank Nov 22, 2021
5fcefff
Merge branch 'main' of https://github.com/primer/css into global-focu…
langermank Dec 14, 2021
168a9f8
merge
langermank Dec 14, 2021
0eb5ffd
Update giant-bees-talk.md
langermank Dec 14, 2021
c9c792f
Merge branch 'global-focus-styles' of https://github.com/primer/css i…
langermank Dec 14, 2021
d570060
address marketing styles
langermank Dec 14, 2021
b703198
Merge branch 'main' of https://github.com/primer/css into global-focu…
langermank Dec 22, 2021
eb3a61c
tabnav focus fix
langermank Dec 22, 2021
771d0dd
reach all buttons
langermank Dec 22, 2021
6770984
attempt windows hc selector
langermank Dec 22, 2021
500d091
Merge branch 'main' into global-focus-styles
jonrohan Jan 12, 2022
db25d10
Stylelint auto-fixes
actions-user Jan 12, 2022
c8d4ba3
Merge branch 'main' into global-focus-styles
langermank Jan 12, 2022
303b5a3
fixes
langermank Jan 12, 2022
8809254
Merge branch 'global-focus-styles' of https://github.com/primer/css i…
langermank Jan 12, 2022
33af9b5
add focus style testing page
langermank Jan 13, 2022
6b77caa
Merge branch 'main' of https://github.com/primer/css into global-focu…
langermank Jan 13, 2022
457a0a7
Stylelint auto-fixes
actions-user Jan 13, 2022
a53a2ad
add href for testing
langermank Jan 14, 2022
53b6c7a
Merge branch 'global-focus-styles' of https://github.com/primer/css i…
langermank Jan 14, 2022
75615c7
remove position relative to fix chrome bug
langermank Jan 14, 2022
592f4a3
fix details scenario
langermank Jan 14, 2022
a7078ae
add offset to WHC
langermank Jan 14, 2022
2b41913
maintain offset specificity in whc
langermank Jan 14, 2022
74fc060
inset tabnav focus
langermank Jan 14, 2022
6381c0a
switch offset to inset
langermank Mar 8, 2022
fb4c581
Merge branch 'main' of https://github.com/primer/css into global-focu…
langermank Mar 8, 2022
7e4b863
fix actionlist focus
langermank Mar 8, 2022
60be9a8
lint
langermank Mar 8, 2022
a900e35
better scoping, handle forms for safari
langermank Mar 18, 2022
0f1ae23
Merge branch 'main' of https://github.com/primer/css into global-focu…
langermank Apr 5, 2022
aa7e158
moving specific styles from dotcom
langermank Apr 11, 2022
ba84876
address autocomplete
langermank Apr 11, 2022
65b92ac
Merge branch 'main' into global-focus-styles
langermank Apr 11, 2022
f84d027
cleanup
langermank Apr 11, 2022
692aea9
Merge branch 'global-focus-styles' of https://github.com/primer/css i…
langermank Apr 11, 2022
dbeb7a8
cleanup
langermank Apr 11, 2022
d19fd5d
selected focus states
langermank Apr 19, 2022
5251269
Merge branch 'main' into global-focus-styles
langermank Apr 19, 2022
fd71b36
adjust marketing focus
langermank Apr 20, 2022
33e9712
use offset instead for marketing
langermank Apr 20, 2022
be2ab1a
Stylelint auto-fixes
actions-user Apr 20, 2022
f2b6102
Merge branch 'main' into global-focus-styles
langermank Apr 20, 2022
a859750
Merge branch 'next_major' into global-focus-styles
langermank Apr 20, 2022
f84874e
fix merge
langermank Apr 20, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion docs/.storybook/preview-head.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,26 @@
Helvetica Neue, sans-serif;
color: var(--color-fg-default);
background-color: var(--color-canvas-default);
padding: 0;
height: 100vh;
}

.theme-wrap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
height: 100vh;
}

.theme-wrap .story-wrap {
padding: 1rem;
height: unset;
}

.sb-main-padded .theme-wrap {
margin: -1rem;
}

.sb-main-padded div:not(.theme-wrap) > [data-dark-theme] {
margin: -1rem;
padding: 1rem;
}
</style>
133 changes: 124 additions & 9 deletions docs/src/stories/components/Button/Button.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,146 @@ export default {
design: {
type: 'figma',
url: 'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4371%3A7128'
}
},
layout: 'padded'
},

excludeStories: ['ButtonTemplate'],
argTypes: {
variant: {
options: [0, 1, 2, 3], // iterator
mapping: [null, 'btn-primary', 'btn-outline', 'btn-danger'], // values
options: [0, 1, 2, 3, 4, 5, 6, 7], // iterator
mapping: [
null,
'btn-primary',
'btn-outline',
'btn-danger',
'btn-link',
'btn-invisible',
'btn-with-count',
'btn-octicon'
], // values
control: {
type: 'select',
labels: ['default', 'primary', 'outline', 'danger']
labels: ['default', 'primary', 'outline', 'danger', 'link', 'invisible', 'close', 'with-count', 'icon-only']
},
defaultValue: ''
table: {
category: 'CSS'
}
},
size: {
options: [0, 1, 2], // iterator
mapping: [null, 'btn-sm', 'btn-large'], // values
control: {
type: 'select',
labels: ['default', 'small', 'large']
},
table: {
category: 'CSS'
}
},
label: {
defaultValue: 'Button',
type: 'string',
name: 'label',
description: 'string'
description: 'string',
table: {
category: 'HTML'
}
},
disabled: {
defaultValue: false,
control: {type: 'boolean'},
table: {
category: 'Interactive'
}
},
fullWidth: {
defaultValue: false,
control: {type: 'boolean'},
table: {
category: 'CSS'
}
},
closeBtn: {
control: {type: 'boolean'},
table: {
category: 'CSS'
}
},
leadingVisual: {
name: 'leadingVisual',
type: 'string',
description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
table: {
category: 'HTML'
}
},
trailingVisual: {
name: 'trailingVisual',
type: 'string',
description: 'Paste [Octicon](https://primer.style/octicons/) in control field',
table: {
category: 'HTML'
}
},
trailingAction: {
defaultValue: false,
control: {type: 'boolean'},
table: {
category: 'CSS'
}
},
selected: {
defaultValue: false,
control: {type: 'boolean'},
table: {
category: 'CSS'
}
}
}
}

const Template = ({label, variant}) => (
export const ButtonTemplate = ({
label,
variant,
disabled,
size,
fullWidth,
leadingVisual,
trailingVisual,
trailingAction,
selected,
closeBtn
}) => (
<>
<button className={clsx('btn', variant && `${variant}`)}>{label}</button>
<button
disabled={disabled}
className={clsx(
'btn',
variant && `${variant}`,
size && `${size}`,
fullWidth && 'btn-block',
closeBtn && 'close-button'
)}
aria-selected={selected}
>
{leadingVisual && <span className="" dangerouslySetInnerHTML={{__html: leadingVisual}} />}
<span>{label}</span>
{trailingVisual && <span className="" dangerouslySetInnerHTML={{__html: trailingVisual}} />}
{trailingAction && <span class="dropdown-caret"></span>}
{closeBtn && (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<path
fill-rule="evenodd"
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
></path>
</svg>
)}
</button>
</>
)

export const Button = Template.bind({})
export const Playground = ButtonTemplate.bind({})
Playground.args = {
closeBtn: false
}
55 changes: 55 additions & 0 deletions docs/src/stories/components/Button/ButtonFeatures.stories.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from 'react'
import clsx from 'clsx'
import {ButtonTemplate} from './Button.stories'

export default {
title: 'Components/Button/Features'
}

export const LeadingVisual = ButtonTemplate.bind({})
LeadingVisual.storyName = 'Leading icon'
LeadingVisual.args = {
label: 'Open in Desktop',
leadingVisual:
'<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>'
}

export const TrailingVisual = ButtonTemplate.bind({})
TrailingVisual.storyName = 'Trailing icon'
TrailingVisual.args = {
label: 'Open in Desktop',
trailingVisual:
'<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>'
}

export const Disabled = ButtonTemplate.bind({})
Disabled.storyName = 'Disabled'
Disabled.args = {
label: 'Disabled',
disabled: true
}

export const DisabledWithLeadingVisual = ButtonTemplate.bind({})
DisabledWithLeadingVisual.storyName = 'Disabled with leading visual'
DisabledWithLeadingVisual.args = {
label: 'Disabled',
disabled: true,
leadingVisual:
'<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>'
}

export const Selected = ButtonTemplate.bind({})
Selected.storyName = 'Selected'
Selected.args = {
label: 'Selected',
selected: true
}

export const SelectedWithLeadingVisual = ButtonTemplate.bind({})
SelectedWithLeadingVisual.storyName = 'Selected with leading visual'
SelectedWithLeadingVisual.args = {
label: 'Selected',
selected: true,
leadingVisual:
'<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>'
}
141 changes: 141 additions & 0 deletions docs/src/stories/components/Forms/Input.stories.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import React from 'react'
import clsx from 'clsx'

export default {
title: 'Components/Forms/Input',
parameters: {
layout: 'padded'
},
decorators: [
Story => (
<form>
<Story />
</form>
)
],
excludeStories: ['InputTemplate'],
argTypes: {
size: {
options: [0, 1, 2], // iterator
mapping: [null, 'input-sm', 'input-lg'], // values
control: {
type: 'select',
labels: ['default', 'small', 'large']
},
table: {
category: 'CSS'
}
},
block: {
description: 'full width',
control: {type: 'boolean'},
table: {
category: 'Interactive'
}
},
monospace: {
description: 'monospace text',
control: {type: 'boolean'},
table: {
category: 'Interactive'
}
},
contrast: {
description: 'change input background to light gray',
control: {type: 'boolean'},
table: {
category: 'Interactive'
}
},
disabled: {
description: 'disabled field',
control: {type: 'boolean'},
table: {
category: 'Interactive'
}
},
hideWebKit: {
description: 'hide WebKit autofill icon',
control: {type: 'boolean'},
table: {
category: 'Interactive'
}
},
placeholder: {
type: 'string',
name: 'placeholder',
description: 'string',
table: {
category: 'HTML'
}
},
label: {
type: 'string',
name: 'label',
description: 'string',
table: {
category: 'HTML'
}
},
type: {
name: 'type',
type: 'string',
description: 'type',
table: {
category: 'HTML'
}
},
id: {
name: 'id',
type: 'string',
description: 'id',
table: {
category: 'HTML'
}
}
}
}

export const InputTemplate = ({
label,
type,
id,
size,
block,
placeholder,
contrast,
disabled,
hideWebKit,
monospace
}) => (
<>
<label for={id}>{label}</label>
<input
className={clsx(
'form-control',
size && `${size}`,
block && 'input-block',
contrast && 'input-contrast',
hideWebKit && 'input-hide-webkit-autofill',
monospace && 'input-monospace'
)}
type={type}
id={id}
placeholder={placeholder}
disabled={disabled}
/>
</>
)

export const Playground = InputTemplate.bind({})
Playground.args = {
type: 'email',
id: 'some-id',
placeholder: 'Email address',
label: 'Enter email address',
block: false,
hideWebKit: false,
monospace: false,
contrast: false,
disabled: false
}
Loading