fix: colors and button flags (#750)

RocketChat · Jun 22, 2022 · 9c0c0c1 · 9c0c0c1
1 parent 17012f8
commit 9c0c0c1
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 100 deletions.
diff --git a/packages/fuselage/src/components/Button/Button.stories.tsx b/packages/fuselage/src/components/Button/Button.stories.tsx
@@ -54,23 +54,23 @@ export const Variants: ComponentStory<typeof Button> = () => (
       <Button m='2px' danger>
         Danger
       </Button>
-      <Button m='2px' secondaryDanger>
+      <Button m='2px' secondary danger>
         Secondary Danger
       </Button>
     </Box>
     <Box display='flex' flexDirection='column'>
       <Button m='2px' warning>
         Warning
       </Button>
-      <Button m='2px' secondaryWarning>
+      <Button m='2px' secondary warning>
         Secondary Warning
       </Button>
     </Box>
     <Box display='flex' flexDirection='column'>
       <Button m='2px' success>
         Success
       </Button>
-      <Button m='2px' secondarySuccess>
+      <Button m='2px' secondary success>
         Secondary Success
       </Button>
     </Box>
@@ -147,23 +147,26 @@ export const States = () => (
         },
         'secondary-danger': {
           children: 'Button',
-          secondaryDanger: true,
+          secondary: true,
+          danger: true,
         },
         'warning': {
           children: 'Button',
           warning: true,
         },
         'secondary-warning': {
           children: 'Button',
-          secondaryWarning: true,
+          secondary: true,
+          warning: true,
         },
         'success': {
           children: 'Button',
           success: true,
         },
         'secondary-success': {
           children: 'Button',
-          secondarySuccess: true,
+          secondary: true,
+          success: true,
         },
       }}
     />
@@ -209,23 +212,26 @@ export const States = () => (
         },
         'secondary-danger': {
           children: 'Button',
-          secondaryDanger: true,
+          secondary: true,
+          danger: true,
         },
         'warning': {
           children: 'Button',
           warning: true,
         },
         'secondary-warning': {
           children: 'Button',
-          secondaryWarning: true,
+          secondary: true,
+          warning: true,
         },
         'success': {
           children: 'Button',
           success: true,
         },
         'secondary-success': {
           children: 'Button',
-          secondarySuccess: true,
+          secondary: true,
+          success: true,
         },
       }}
     />
@@ -235,8 +241,3 @@ export const States = () => (
 export const AsIconButton: ComponentStory<typeof IconButton> = (args) => (
   <IconButton {...args} icon='arrow-back' onClick={action('click')} />
 );
-
-// export const Variants = Group.bind({});
-// export const Variants = Group.bind({});
-// export const Variants = Group.bind({});
-// export const Variants = Group.bind({});
diff --git a/packages/fuselage/src/components/Button/Button.tsx b/packages/fuselage/src/components/Button/Button.tsx
@@ -7,11 +7,8 @@ export type ButtonProps = ComponentProps<typeof Box> & {
   primary?: boolean;
   secondary?: boolean;
   danger?: boolean;
-  secondaryDanger?: boolean;
   warning?: boolean;
-  secondaryWarning?: boolean;
   success?: boolean;
-  secondarySuccess?: boolean;
 
   disabled?: boolean;
   small?: boolean;
@@ -26,11 +23,8 @@ export const Button = forwardRef(function Button(
     primary,
     secondary,
     danger,
-    secondaryDanger,
     warning,
-    secondaryWarning,
     success,
-    secondarySuccess,
     external,
     is = 'button',
     rel: _rel,
@@ -55,31 +49,23 @@ export const Button = forwardRef(function Button(
   const kindAndVariantProps = useMemo(() => {
     const variant =
       (primary && 'primary') ||
-      (secondary && 'secondary') ||
-      (danger && 'danger') ||
-      (secondaryDanger && 'secondary-danger') ||
-      (warning && 'warning') ||
-      (secondaryWarning && 'secondary-warning') ||
+      (secondary && success && 'secondary-success') ||
+      (secondary && warning && 'secondary-warning') ||
+      (secondary && danger && 'secondary-danger') ||
       (success && 'success') ||
-      (secondarySuccess && 'secondary-success');
+      (warning && 'warning') ||
+      (danger && 'danger') ||
+      (secondary && 'secondary');
 
+    console.log(variant);
     if (variant) {
       return {
         [`rcx-button--${[variant].filter(Boolean).join('-')}`]: true,
       };
     }
 
     return {};
-  }, [
-    primary,
-    secondary,
-    secondaryDanger,
-    danger,
-    warning,
-    secondaryWarning,
-    success,
-    secondarySuccess,
-  ]);
+  }, [primary, secondary, danger, warning, success]);
 
   return (
     <Box

diff --git a/packages/fuselage/src/components/Button/IconButton.stories.tsx b/packages/fuselage/src/components/Button/IconButton.stories.tsx
@@ -46,25 +46,25 @@ export const _IconButtonInfo: ComponentStory<typeof IconButton> = () => (
 );
 export const _IconButtonSecondaryInfo: ComponentStory<
   typeof IconButton
-> = () => <IconButton icon='balloon' secondaryInfo />;
+> = () => <IconButton icon='balloon' secondary info />;
 
 export const _IconButtonSuccess: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' success />
 );
 export const _IconButtonSecondarySuccess: ComponentStory<
   typeof IconButton
-> = () => <IconButton icon='balloon' secondarySuccess />;
+> = () => <IconButton icon='balloon' secondary success />;
 
 export const _IconButtonWarning: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' warning />
 );
 export const _IconButtonSecondaryWarning: ComponentStory<
   typeof IconButton
-> = () => <IconButton icon='balloon' secondaryWarning />;
+> = () => <IconButton icon='balloon' secondary warning />;
 
 export const _IconButtonDanger: ComponentStory<typeof IconButton> = () => (
   <IconButton icon='balloon' danger />
 );
 export const _IconButtonSecondaryDanger: ComponentStory<
   typeof IconButton
-> = () => <IconButton icon='balloon' secondaryDanger />;
+> = () => <IconButton icon='balloon' secondary danger />;
diff --git a/packages/fuselage/src/components/Button/IconButton.tsx b/packages/fuselage/src/components/Button/IconButton.tsx
@@ -18,13 +18,9 @@ type IconButtonProps = ComponentProps<typeof Box> &
     primary?: boolean;
     secondary?: boolean;
     info?: boolean;
-    secondaryInfo?: boolean;
     danger?: boolean;
-    secondaryDanger?: boolean;
     warning?: boolean;
-    secondaryWarning?: boolean;
     success?: boolean;
-    secondarySuccess?: boolean;
   };
 
 const getSize = ({ mini }: ButtonSize) => (mini ? 'x16' : 'x20');
@@ -37,13 +33,9 @@ export const IconButton = forwardRef(
       primary,
       info,
       secondary,
-      secondaryInfo,
       danger,
-      secondaryDanger,
       warning,
-      secondaryWarning,
       success,
-      secondarySuccess,
       square,
       small,
       tiny,
@@ -54,15 +46,15 @@ export const IconButton = forwardRef(
   ) => {
     const kindAndVariantProps = useMemo(() => {
       const variant =
+        (secondary && info && 'secondary-info') ||
+        (secondary && danger && 'secondary-danger') ||
+        (secondary && warning && 'secondary-warning') ||
+        (secondary && success && 'secondary-success') ||
         ((primary || info) && 'info') ||
-        (secondary && 'secondary') ||
-        (secondaryInfo && 'secondary-info') ||
-        (danger && 'danger') ||
-        (secondaryDanger && 'secondary-danger') ||
-        (warning && 'warning') ||
-        (secondaryWarning && 'secondary-warning') ||
         (success && 'success') ||
-        (secondarySuccess && 'secondary-success');
+        (warning && 'warning') ||
+        (danger && 'danger') ||
+        (secondary && 'secondary');
 
       if (variant) {
         return {
@@ -71,18 +63,7 @@ export const IconButton = forwardRef(
       }
 
       return {};
-    }, [
-      primary,
-      info,
-      secondary,
-      secondaryInfo,
-      danger,
-      secondaryDanger,
-      warning,
-      secondaryWarning,
-      success,
-      secondarySuccess,
-    ]);
+    }, [primary, info, secondary, danger, warning, success]);
 
     return (
       <Box

diff --git a/packages/fuselage/src/components/Sidebar/Item.stories.tsx b/packages/fuselage/src/components/Sidebar/Item.stories.tsx
@@ -65,9 +65,9 @@ export const Default: ComponentStory<typeof SidebarItem> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction secondary icon='phone' />
         </SidebarItemActions>
       </SidebarItemContainer>
@@ -92,9 +92,9 @@ export const Default: ComponentStory<typeof SidebarItem> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction secondary icon='phone' />
         </SidebarItemActions>
       </SidebarItemContainer>
@@ -129,9 +129,9 @@ export const Default: ComponentStory<typeof SidebarItem> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction secondary icon='phone' />
         </SidebarItemActions>
       </SidebarItemContainer>

diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx b/packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx
@@ -91,9 +91,9 @@ export const Default: ComponentStory<typeof Sidebar> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction icon='phone' secondary />
         </SidebarItemActions>
       </SidebarItemContainer>
@@ -118,9 +118,9 @@ export const Default: ComponentStory<typeof Sidebar> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction icon='phone' secondary />
         </SidebarItemActions>
       </SidebarItemContainer>
@@ -155,9 +155,9 @@ export const Default: ComponentStory<typeof Sidebar> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction icon='phone' secondary />
         </SidebarItemActions>
       </SidebarItemContainer>
@@ -218,9 +218,9 @@ export const WithFooter: ComponentStory<typeof Sidebar> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction icon='phone' secondary />
         </SidebarItemActions>
       </SidebarItemContainer>
@@ -245,9 +245,9 @@ export const WithFooter: ComponentStory<typeof Sidebar> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction icon='phone' secondary />
         </SidebarItemActions>
       </SidebarItemContainer>
@@ -282,9 +282,9 @@ export const WithFooter: ComponentStory<typeof Sidebar> = () => (
       </SidebarItemContent>
       <SidebarItemContainer>
         <SidebarItemActions>
-          <SidebarItemAction secondarySuccess icon='phone' />
-          <SidebarItemAction secondaryDanger icon='circle-cross' />
-          <SidebarItemAction secondaryInfo icon='trash' />
+          <SidebarItemAction secondary success icon='phone' />
+          <SidebarItemAction secondary danger icon='circle-cross' />
+          <SidebarItemAction secondary info icon='trash' />
           <SidebarItemAction icon='phone' secondary />
         </SidebarItemActions>
       </SidebarItemContainer>
@@ -336,7 +336,7 @@ export const WithFooter: ComponentStory<typeof Sidebar> = () => (
         </SidebarItemContent>
         <SidebarItemContainer>
           <SidebarItemActions>
-            <SidebarItemAction secondaryDanger icon='phone-off' />
+            <SidebarItemAction secondary danger icon='phone-off' />
           </SidebarItemActions>
         </SidebarItemContainer>
       </SidebarItem>

diff --git a/packages/fuselage/src/components/StatusBullet/icons/away.svg b/packages/fuselage/src/components/StatusBullet/icons/away.svg