iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clickable labels have outlines, storybook shows them (#11034)

This commit is contained in:
Evan Rusackas 2020-09-24 20:50:44 -07:00 committed by GitHub
parent 66e49807ef
commit d056e3dfd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
superset-frontend/src/components/Label/Label.stories.tsx
View File

@ -44,6 +44,14 @@ export const bsStyleKnob = {
export const LabelGallery = () => (
<>
<h4>Non-interactive</h4>
{Object.values(bsStyleKnob.options).map(opt => (
<Label key={opt} bsStyle={opt}>
{`style: "${opt}"`}
</Label>
))}
<br />
<h4>Interactive</h4>
{Object.values(bsStyleKnob.options).map(opt => (
<Label key={opt} bsStyle={opt} onClick={action('clicked')}>
{`style: "${opt}"`}

41
superset-frontend/src/components/Label/index.tsx
View File

@ -44,57 +44,90 @@ const SupersetLabel = styled(BootstrapLabel)`
&:last-of-type {
margin-right: 0;
}
border-width: 1px;
border-style: solid;
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
transition: background-color ${({ theme }) => theme.transitionTiming}s;
&.label-warning {
background-color: ${({ theme }) => theme.colors.warning.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.warning.dark1 : 'transparent'};
&:hover {
background-color: ${({ theme, onClick }) =>
onClick ? theme.colors.warning.dark1 : theme.colors.warning.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.warning.dark2 : 'transparent'};
}
}
&.label-danger {
background-color: ${({ theme }) => theme.colors.error.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.error.dark1 : 'transparent'};
&:hover {
background-color: ${({ theme, onClick }) =>
onClick ? theme.colors.error.dark1 : theme.colors.error.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.error.dark2 : 'transparent'};
}
}
&.label-success {
background-color: ${({ theme }) => theme.colors.success.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.success.dark1 : 'transparent'};
&:hover {
background-color: ${({ theme, onClick }) =>
onClick ? theme.colors.success.dark1 : theme.colors.success.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.success.dark2 : 'transparent'};
}
}
&.label-default {
background-color: ${({ theme }) => theme.colors.grayscale.base};
background-color: ${({ theme }) => theme.colors.grayscale.light3};
color: ${({ theme }) => theme.colors.grayscale.dark1};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.grayscale.light1 : 'transparent'};
&:hover {
background-color: ${({ theme, onClick }) =>
onClick ? theme.colors.grayscale.dark1 : theme.colors.grayscale.base};
onClick ? theme.colors.primary.light2 : theme.colors.grayscale.light3};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.primary.light1 : 'transparent'};
}
}
&.label-info {
background-color: ${({ theme }) => theme.colors.info};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.info.dark1 : 'transparent'};
&:hover {
background-color: ${({ theme, onClick }) =>
onClick ? theme.colors.info.dark1 : theme.colors.info.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.info.dark2 : 'transparent'};
}
}
&.label-primary {
background-color: ${({ theme }) => theme.colors.primary.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.primary.dark1 : 'transparent'};
&:hover {
background-color: ${({ theme, onClick }) =>
onClick ? theme.colors.primary.dark1 : theme.colors.primary.base};
onClick ? theme.colors.primary.dark2 : theme.colors.primary.base};
border-color: ${({ theme, onClick }) =>
onClick
? theme.colors.primary.dark2
: 'transparent'}; /* would be nice if we had a darker color, but that's the floor! */
}
}
/* note this is NOT a supported bootstrap label Style... this overrides default */
&.label-secondary {
background-color: ${({ theme }) => theme.colors.secondary.base};
color: ${({ theme }) => theme.colors.grayscale.light4};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.secondary.dark1 : 'inherit'};
&:hover {
background-color: ${({ theme, onClick }) =>
onClick ? theme.colors.secondary.dark1 : theme.colors.secondary.base};
border-color: ${({ theme, onClick }) =>
onClick ? theme.colors.secondary.dark2 : 'inherit'};
}
}
`;