GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-03 05:04:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

A11y addon: improve alignment and styles

Browse Source
This commit is contained in:
domyen 2021-05-05 18:22:22 -04:00
parent 927f2f5057
commit 34fe1c8538
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
addons/a11y/src/components/Report/Elements.tsx
View File

@ -24,7 +24,10 @@ const HighlightToggleElement = styled.span({
fontWeight: 'normal', fontWeight: 'normal',
alignSelf: 'center', alignSelf: 'center',
paddingRight: 15, paddingRight: 15,
input: { margin: 0 }, input: {
margin: 0,
display: 'block',
},
}); });
interface ElementProps { interface ElementProps {

6
addons/a11y/src/components/Report/Item.tsx
View File

@ -33,6 +33,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
const HeaderBar = styled.div<{}>(({ theme }) => ({ const HeaderBar = styled.div<{}>(({ theme }) => ({
padding: theme.layoutMargin, padding: theme.layoutMargin,
paddingLeft: theme.layoutMargin - 3, paddingLeft: theme.layoutMargin - 3,
lineHeight: '20px',
background: 'none', background: 'none',
color: 'inherit', color: 'inherit',
textAlign: 'left', textAlign: 'left',
@ -51,7 +52,10 @@ const HighlightToggleElement = styled.span({
float: 'right', float: 'right',
marginRight: 15, marginRight: 15,
alignSelf: 'center', alignSelf: 'center',
input: { margin: 0 }, input: {
margin: 0,
display: 'block',
},
}); });
interface ItemProps { interface ItemProps {

13
addons/a11y/src/components/Tabs.tsx
View File

@ -18,17 +18,16 @@ const Container = styled.div({
const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({ const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
cursor: 'pointer', cursor: 'pointer',
userSelect: 'none', userSelect: 'none',
marginBottom: 3,
marginRight: 3,
color: theme.color.dark, color: theme.color.dark,
})); }));
const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) => { const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth, theme }) => {
const maxWidthBeforeBreak = 450; const maxWidthBeforeBreak = 450;
return { return {
cursor: 'pointer', cursor: 'pointer',
fontSize: '14px', fontSize: 13,
padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px', lineHeight: '20px',
padding: elementWidth > maxWidthBeforeBreak ? '10px 15px 10px 0' : '10px 0px 3px 15px',
height: '40px', height: '40px',
border: 'none', border: 'none',
marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0, marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
@ -36,12 +35,12 @@ const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) =>
display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block', display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
alignItems: 'center', alignItems: 'center',
width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%', width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)', borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : `1px solid ${theme.appBorderColor}`,
input: { input: {
marginLeft: 10, marginLeft: 10,
marginRight: 0, marginRight: 0,
marginTop: 0, marginTop: -1,
marginBottom: 0, marginBottom: 0,
}, },
}; };