GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-02 05:03:44 +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',
alignSelf: 'center',
paddingRight: 15,
input: { margin: 0 },
input: {
margin: 0,
display: 'block',
},
});
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 }) => ({
padding: theme.layoutMargin,
paddingLeft: theme.layoutMargin - 3,
lineHeight: '20px',
background: 'none',
color: 'inherit',
textAlign: 'left',
@ -51,7 +52,10 @@ const HighlightToggleElement = styled.span({
float: 'right',
marginRight: 15,
alignSelf: 'center',
input: { margin: 0 },
input: {
margin: 0,
display: 'block',
},
});
interface ItemProps {

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

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