mirror of https://github.com/apache/superset.git
clickable labels have outlines, storybook shows them (#11034)
This commit is contained in:
parent
66e49807ef
commit
d056e3dfd3
|
@ -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}"`}
|
||||
|
|
|
@ -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'};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
Loading…
Reference in New Issue