Merge pull request #162 from web3ui/feature/tag/widthProp

feat(tag): width prop
web3ui · Feb 27, 2022 · 1647ee6 · 1647ee6
2 parents c75c7e9 + 930b5e3
commit 1647ee6
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/components/Tag/Tag.styles.ts b/src/components/Tag/Tag.styles.ts
@@ -24,7 +24,7 @@ import {
     coloredYellowDark,
 } from './styles/colors';
 
-type TStyleProps = Pick<TagProps, 'active' | 'theme' | 'tone'>;
+type TStyleProps = Pick<TagProps, 'active' | 'theme' | 'tone' | 'width'>;
 
 const getTheme = (theme: string, active?: boolean) => {
     switch (theme) {
@@ -60,6 +60,8 @@ const getColors = (color?: string, tone?: Tone) => {
 
 export const TagStyled = styled.div<TStyleProps>`
     ${initialStyles}
-    ${(p) => getTheme(p.theme, p.active)}
-    ${(p) => p.theme !== 'status' && p.color && getColors(p.color, p.tone)}
+    ${({ active, theme }) => getTheme(theme, active)}
+    ${({ color, theme, tone }) =>
+        theme !== 'status' && color && getColors(color, tone)}
+    width: ${({ width }) => width};
 `;
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
@@ -11,6 +11,7 @@ const Tag: React.FC<TagProps> = ({
     text = 'Tag',
     theme = 'regular',
     tone = 'light',
+    width = 'fit-content',
 }: TagProps) => {
     return (
         <TagStyled
@@ -21,6 +22,7 @@ const Tag: React.FC<TagProps> = ({
             id={id}
             theme={theme}
             tone={tone}
+            width={width}
         >
             {theme === 'status' && active && (
                 <Icon fill="inherit" size={16} svg={iconTypes.checkmark} />

diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts
@@ -30,4 +30,9 @@ export interface TagProps {
      * choose a tone for the selected color
      */
     tone?: Tone;
+
+    /**
+     * set width of tag
+     */
+    width?: string;
 }