Adjusted empty tag style (#6465)
Fixed Issue #6307 corrected - border style - font color - font weight added - Empty Tag story
This commit is contained in:
@ -88,6 +88,11 @@ export const RecordBoardColumnHeader = () => {
|
|||||||
: 'transparent'
|
: 'transparent'
|
||||||
}
|
}
|
||||||
text={columnDefinition.title}
|
text={columnDefinition.title}
|
||||||
|
weight={
|
||||||
|
columnDefinition.type === RecordBoardColumnDefinitionType.Value
|
||||||
|
? 'regular'
|
||||||
|
: 'medium'
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{!!boardColumnTotal && <StyledAmount>${boardColumnTotal}</StyledAmount>}
|
{!!boardColumnTotal && <StyledAmount>${boardColumnTotal}</StyledAmount>}
|
||||||
<StyledNumChildren>{recordCount}</StyledNumChildren>
|
<StyledNumChildren>{recordCount}</StyledNumChildren>
|
||||||
|
|||||||
@ -26,7 +26,9 @@ const StyledTag = styled.h3<{
|
|||||||
color === 'transparent' ? color : theme.tag.background[color]};
|
color === 'transparent' ? color : theme.tag.background[color]};
|
||||||
border-radius: ${BORDER_COMMON.radius.sm};
|
border-radius: ${BORDER_COMMON.radius.sm};
|
||||||
color: ${({ color, theme }) =>
|
color: ${({ color, theme }) =>
|
||||||
color === 'transparent' ? theme.tag.text['gray'] : theme.tag.text[color]};
|
color === 'transparent'
|
||||||
|
? theme.font.color.tertiary
|
||||||
|
: theme.tag.text[color]};
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: ${({ theme }) => theme.font.size.md};
|
font-size: ${({ theme }) => theme.font.size.md};
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -39,7 +41,7 @@ const StyledTag = styled.h3<{
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: 0 ${spacing2};
|
padding: 0 ${spacing2};
|
||||||
border: ${({ variant, theme }) =>
|
border: ${({ variant, theme }) =>
|
||||||
variant === 'outline' ? `2px dashed ${theme.tag.background['gray']}` : ''};
|
variant === 'outline' ? `1px dashed ${theme.border.color.strong}` : ''};
|
||||||
|
|
||||||
gap: ${spacing1};
|
gap: ${spacing1};
|
||||||
|
|
||||||
|
|||||||
@ -90,3 +90,16 @@ export const Catalog: CatalogStory<Story, typeof Tag> = {
|
|||||||
},
|
},
|
||||||
decorators: [CatalogDecorator],
|
decorators: [CatalogDecorator],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const EmptyTag: Story = {
|
||||||
|
decorators: [ComponentDecorator],
|
||||||
|
args: {
|
||||||
|
color: 'transparent',
|
||||||
|
text: 'No Value',
|
||||||
|
variant: 'outline',
|
||||||
|
weight: 'medium',
|
||||||
|
},
|
||||||
|
parameters: {
|
||||||
|
container: { width: 'auto' },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user