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.

Sign up for GitHub

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

Jump to bottom

Fix misc errors and warnings. #191

Closed
wants to merge 1 commit into from
Closed

Fix misc errors and warnings. #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion catalog/index.js
View file
Open in desktop
Expand Up @@ -801,7 +801,7 @@ const components = [
Label: styled.span`
margin-right: 8px;
`,
DownArrow: styled.img.attrs({ src: DownArrow })``,
DownArrow: styled.img.attrs(props => ({ src: DownArrow }))``,
},
},
{
Expand Down
4 changes: 2 additions & 2 deletions catalog/listbox/variations.md
View file
Open in desktop
Expand Up @@ -17,8 +17,8 @@ state: { isOpen: false, selected: 0 }
>
<ListboxToggle primary medium icon={<DownArrow />} styleOverrides={{width: '100px'}}>{browserList[state.selected]}</ListboxToggle>
<ListboxMenu>
{browserList.map((name, index) => <ListItem id={index}>{name}</ListItem>)}
<ListItem id="ie" disabled>Internet Explorer</ListItem>
{browserList.map((name, index) => <ListItem id={index} key={index}>{name}</ListItem>)}
<ListItem id="ie" key="ie" disabled>Internet Explorer</ListItem>
</ListboxMenu>
</Listbox>
</ListboxDemo>
Expand Down
16 changes: 8 additions & 8 deletions components/accordion/styled-header.jsx
View file
Open in desktop
Expand Up @@ -11,10 +11,10 @@ export const HeadingWrapper = styled.div`
renderCustomIndicator ? '[title] 1fr [indicator] min-content' : '[title] auto [space] 0'};
`;

export const Heading = styled.header.attrs({
export const Heading = styled.header.attrs(props => ({
role: 'heading',
'aria-level': ({ ariaLevel }) => ariaLevel,
})`
'aria-level': props.ariaLevel,
}))`
${resetStyles};

grid-column: 1 / span 2;
Expand All @@ -23,12 +23,12 @@ export const Heading = styled.header.attrs({
width: 100%;
`;

export const Button = styled.button.attrs({
export const Button = styled.button.attrs(props => ({
role: 'button',
'aria-expanded': ({ isExpanded }) => isExpanded,
'aria-controls': ({ panelId }) => `accordion-panel-${panelId}`,
id: ({ headerId }) => `accordion-header-${headerId}`,
})`
'aria-expanded': props.isExpanded,
'aria-controls': `accordion-panel-${props.panelId}`,
id: `accordion-header-${props.headerId}`,
}))`
${resetStyles};

padding: 0;
Expand Down
8 changes: 4 additions & 4 deletions components/accordion/styled-panel.jsx
View file
Open in desktop
@@ -1,11 +1,11 @@
import styled from 'styled-components';
import { resetStyles } from '../utils';

export const Panel = styled.div.attrs({
export const Panel = styled.div.attrs(props => ({
role: 'region',
'aria-labelledby': ({ headerId }) => `accordion-header-${headerId}`,
id: ({ panelId }) => `accordion-panel-${panelId}`,
})`
'aria-labelledby': `accordion-header-${props.headerId}`,
id: `accordion-panel-${props.panelId}`,
}))`
${resetStyles};

grid-area: panel;
Expand Down
2 changes: 1 addition & 1 deletion components/button/styled.jsx
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ const buttonColors = {
disabled: '#bedcf2',
};

export const ButtonContentWrapper = styled.div.attrs({ tabIndex: '-1' })`
export const ButtonContentWrapper = styled.div.attrs(_ => ({ tabIndex: '-1' }))`
display: grid;
grid-auto-flow: column;
grid-column-gap: 6px;
Expand Down
12 changes: 6 additions & 6 deletions components/dropdown/styled.jsx
View file
Open in desktop
Expand Up @@ -10,12 +10,12 @@ export const DropdownMenuContent = styled.div`
flex-direction: column;
`;

export const MenuItem = styled.button.attrs({
export const MenuItem = styled.button.attrs(props => ({
// Menu items should not be in the tab order. They are only reachable by the arrow keys
tabIndex: '-1',
role: ({ role }) => role || 'menuitem',
role: props.role || 'menuitem',
'aria-disabled': ({ isDisabled }) => isDisabled,
})`
}))`
${resetStyles};
outline: none;
border: none;
Expand All @@ -36,7 +36,7 @@ export const MenuItem = styled.button.attrs({
}
`;

export const MenuItemContent = styled.span.attrs({ tabIndex: '-1' })`
export const MenuItemContent = styled.span.attrs(_ => ({ tabIndex: '-1' }))`
${({ isDisabled }) => isDisabled && `color: ${colors.gray22}`};

padding: ${({ styleOverrides }) => styleOverrides.padding || thickness.eight};
Expand All @@ -59,10 +59,10 @@ export const MenuItemContent = styled.span.attrs({ tabIndex: '-1' })`
}
`;

export const MenuSeparator = styled.hr.attrs({
export const MenuSeparator = styled.hr.attrs(_ => ({
role: 'separator',
'aria-orientation': 'horizontal',
})`
}))`
border: 0;
border-top: 1px solid ${colors.gray14};
width: 100%;
Expand Down
10 changes: 5 additions & 5 deletions components/parameter-sentence/styled.jsx
View file
Open in desktop
Expand Up @@ -51,7 +51,7 @@ export const Button = styled.button`
}
`;

export const ButtonContent = styled.div.attrs({ tabIndex: '-1' })`
export const ButtonContent = styled.div.attrs(_ => ({ tabIndex: '-1' }))`
${selectStyling};
`;

Expand All @@ -77,10 +77,10 @@ export const InputContainer = styled.div`
}
`;

export const ParameterSentence = styled.form.attrs({
role: props => (props.isSearchForm ? 'search' : 'form'),
'aria-labelledby': ({ labelledBy }) => labelledBy,
})`
export const ParameterSentence = styled.form.attrs(props => ({
role: props.isSearchForm ? 'search' : 'form',
'aria-labelledby': props.labelledBy,
}))`
/* stylelint-disable no-empty-block https://github.com/stylelint/stylelint/issues/3494 */
`;

Expand Down
2 changes: 1 addition & 1 deletion components/popover/styled.jsx
View file
Open in desktop
Expand Up @@ -129,7 +129,7 @@ export const ReferenceContainer = styled.div`
display: inline-block;
`;

export const FocusCatcher = styled.div.attrs({ tabIndex: '-1' })`
export const FocusCatcher = styled.div.attrs(_ => ({ tabIndex: '-1' }))`
display: inline-block;

&:focus {
Expand Down
24 changes: 12 additions & 12 deletions components/tabs/styled.jsx
View file
Open in desktop
Expand Up @@ -39,13 +39,13 @@ const selectedTab = css`
border-left: 1px solid ${colors.gray14};
`;

export const Tab = styled.button.attrs({
export const Tab = styled.button.attrs(props => ({
role: 'tab',
'aria-selected': ({ selected }) => selected,
'aria-controls': ({ panelId }) => `panel:${panelId}`,
'aria-disabled': ({ disabled }) => disabled,
tabIndex: ({ selected }) => (selected ? '0' : '-1'),
})`
'aria-selected': props.selected,
'aria-controls': `panel:${props.panelId}`,
'aria-disabled': props.disabled,
tabIndex: props.selected ? '0' : '-1',
}))`
${resetStyles};

box-shadow: none;
Expand All @@ -66,7 +66,7 @@ export const Tab = styled.button.attrs({
}
`;

export const TabContent = styled.span.attrs({ tabIndex: -1 })`
export const TabContent = styled.span.attrs(_ => ({ tabIndex: -1 }))`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you use _ => here and elsewhere instead of () => when there are no parameters?

border-radius: ${borderRadius};
cursor: pointer;
white-space: nowrap;
Expand All @@ -86,7 +86,7 @@ export const TabContent = styled.span.attrs({ tabIndex: -1 })`
${({ selected }) => selected && selectedTab};
`;

export const TabList = styled.div.attrs({ role: 'tablist' })`
export const TabList = styled.div.attrs(_ => ({ role: 'tablist' }))`
border-bottom: 1px solid ${colors.gray14};
display: flex;
flex-direction: row;
Expand All @@ -96,11 +96,11 @@ export const TabList = styled.div.attrs({ role: 'tablist' })`
}
`;

export const TabPanel = styled.div.attrs({
export const TabPanel = styled.div.attrs(props => ({
role: 'tabpanel',
id: ({ panelId }) => `panel:${panelId}`,
'aria-expanded': ({ selected }) => selected,
})`
id: `panel:${props.panelId}`,
'aria-expanded': props.selected,
}))`
position: relative;
padding: ${thickness.eight};

Expand Down
4 changes: 2 additions & 2 deletions components/text-input-v2/react-select-async.jsx
View file
Open in desktop
Expand Up @@ -170,8 +170,8 @@ export const makeAsyncSelect = (SelectComponent: ComponentType<*>) =>
const options = passEmptyOptions
? []
: inputValue && loadedInputValue
? loadedOptions
: defaultOptions || [];
? loadedOptions
: defaultOptions || [];
return (
// $FlowFixMe
<SelectComponent
Expand Down