Revert "feat(fuselage): Featured Tag variant (#922)" (#925)

This reverts commit 0bb5c90.
RocketChat · Dec 2, 2022 · 35b8d62 · 35b8d62
1 parent d18e9f8
commit 35b8d62
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 91 deletions.
diff --git a/packages/fuselage/src/components/Tag/Tag.stories.tsx b/packages/fuselage/src/components/Tag/Tag.stories.tsx
@@ -50,6 +50,15 @@ Secondary.args = {
   variant: 'secondary',
 };
 
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  children: (
+    <>
+      <Icon size='x12' mie='x4' name='team-lock' /> Team
+    </>
+  ),
+};
+
 export const _Danger = Template.bind({});
 _Danger.args = {
   variant: 'danger',
@@ -64,16 +73,6 @@ Warning.args = {
   variant: 'warning',
 };
 
-export const Featured = Template.bind({});
-Featured.args = {
-  variant: 'featured',
-};
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-  icon: <Icon size='x12' mie='x2' name='team-lock' />,
-};
-
 export const Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,

diff --git a/packages/fuselage/src/components/Tag/Tag.styles.scss b/packages/fuselage/src/components/Tag/Tag.styles.scss
@@ -12,11 +12,11 @@ $tag-colors-default-hover-color: theme(
 );
 $tag-colors-default-background-color: theme(
   'tag-colors-default-background-color',
-  colors.tag(default)
+  colors.surface(neutral)
 );
 $tag-colors-default-hover-background-color: theme(
   'tag-colors-default-hover-background-color',
-  colors.tag(default-hover)
+  colors.button(secondary-hover)
 );
 
 $tag-colors-primary-color: theme(
@@ -25,11 +25,11 @@ $tag-colors-primary-color: theme(
 );
 $tag-colors-primary-background-color: theme(
   'tag-colors-primary-background-color',
-  colors.tag(primary)
+  colors.button(primary-default)
 );
 $tag-colors-primary-hover-background-color: theme(
   'tag-colors-primary-hover-background-color',
-  colors.tag(primary-hover)
+  colors.button(primary-hover)
 );
 
 $tag-colors-secondary-color: theme(
@@ -38,11 +38,11 @@ $tag-colors-secondary-color: theme(
 );
 $tag-colors-secondary-background-color: theme(
   'tag-colors-secondary-background-color',
-  colors.tag(secondary)
+  colors.button(secondary-default)
 );
 $tag-colors-secondary-hover-background-color: theme(
   'tag-colors-secondary-hover-background-color',
-  colors.tag(secondary-hover)
+  colors.button(secondary-hover)
 );
 
 $tag-colors-danger-color: theme(
@@ -51,11 +51,11 @@ $tag-colors-danger-color: theme(
 );
 $tag-colors-danger-background-color: theme(
   'tag-colors-danger-background-color',
-  colors.tag(danger)
+  colors.button(danger-default)
 );
 $tag-colors-danger-hover-background-color: theme(
   'tag-colors-danger-hover-background-color',
-  colors.tag(danger-hover)
+  colors.button(danger-hover)
 );
 
 $tag-colors-secondary-danger-color: theme(
@@ -64,11 +64,11 @@ $tag-colors-secondary-danger-color: theme(
 );
 $tag-colors-secondary-danger-background-color: theme(
   'tag-colors-secondary-danger-background-color',
-  colors.tag(secondary)
+  colors.button(secondary-danger-default)
 );
 $tag-colors-secondary-danger-hover-background-color: theme(
   'tag-colors-secondary-danger-hover-background-color',
-  colors.tag(secondary-hover)
+  colors.button(secondary-danger-hover)
 );
 
 $tag-colors-warning-color: theme(
@@ -77,24 +77,11 @@ $tag-colors-warning-color: theme(
 );
 $tag-colors-warning-background-color: theme(
   'tag-colors-warning-background-color',
-  colors.tag(warning)
+  colors.button(warning-default)
 );
 $tag-colors-warning-hover-background-color: theme(
   'tag-colors-warning-hover-background-color',
-  colors.tag(warning-hover)
-);
-
-$tag-colors-featured-color: theme(
-  'tag-colors-featured-color',
-  colors.button(on-primary)
-);
-$tag-colors-featured-background-color: theme(
-  'tag-colors-featured-background-color',
-  colors.tag(featured)
-);
-$tag-colors-featured-hover-background-color: theme(
-  'tag-colors-featured-hover-background-color',
-  colors.tag(featured-hover)
+  colors.button(warning-hover)
 );
 
 $tag-colors-disabled-color: theme(
@@ -129,15 +116,6 @@ $tag-colors-disabled-background-color: theme(
 
   @include typography.use-font-scale(micro);
 
-  &__inner {
-    overflow: hidden;
-
-    min-width: 0;
-
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
   &--primary {
     color: $tag-colors-primary-color;
     background-color: $tag-colors-primary-background-color;
@@ -198,18 +176,6 @@ $tag-colors-disabled-background-color: theme(
     }
   }
 
-  &--featured {
-    color: $tag-colors-featured-color;
-    background-color: $tag-colors-featured-background-color;
-
-    &.rcx-tag--clickable {
-      &:hover {
-        color: $tag-colors-featured-color;
-        background-color: $tag-colors-featured-hover-background-color;
-      }
-    }
-  }
-
   &--disabled {
     cursor: not-allowed;
 

diff --git a/packages/fuselage/src/components/Tag/Tag.tsx b/packages/fuselage/src/components/Tag/Tag.tsx
@@ -1,20 +1,13 @@
-import type { AllHTMLAttributes, ReactNode } from 'react';
+import type { AllHTMLAttributes } from 'react';
 import React from 'react';
 
 import { prependClassName } from '../../helpers/prependClassName';
 
 type TagProps = {
   medium?: boolean;
   large?: boolean;
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | 'danger'
-    | 'warning'
-    | 'secondary-danger'
-    | 'featured';
+  variant?: 'primary' | 'secondary' | 'danger' | 'warning' | 'secondary-danger';
   disabled?: boolean;
-  icon?: ReactNode;
 } & AllHTMLAttributes<HTMLSpanElement>;
 
 export const Tag = ({
@@ -24,8 +17,6 @@ export const Tag = ({
   disabled,
   onClick,
   variant,
-  children,
-  icon,
   ...props
 }: TagProps) => {
   const modifiers = [
@@ -44,9 +35,6 @@ export const Tag = ({
       className={prependClassName(className as string, `rcx-tag ${modifiers}`)}
       onClick={onClick}
       {...props}
-    >
-      {icon}
-      <span className='rcx-tag__inner'>{children}</span>
-    </span>
+    />
   );
 };
diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
@@ -312,23 +312,3 @@ $-elevation-level: (
 @function elevation($level) {
   @return map.get($-elevation-level, $level);
 }
-
-$-tag-backgrounds: (
-  default: neutral(400),
-  default-hover: neutral(500),
-  primary: primary(500),
-  primary-hover: primary(600),
-  secondary: neutral(400),
-  secondary-hover: neutral(500),
-  danger: danger(500),
-  danger-hover: danger(600),
-  warning: warning(400),
-  warning-hover: warning(500),
-  featured: service-2(700),
-  featured-hover: service-2(800),
-);
-
-@function tag($type) {
-  $color: map.get($-tag-backgrounds, $type);
-  @return var(--rcx-color-tag-background-#{$type}, $color);
-}