Merge branch 'main' into feat/callout-visual

RocketChat · Oct 13, 2023 · eb7bcb9 · eb7bcb9
2 parents 24d3255 + 9ce0dd4
commit eb7bcb9
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 10 deletions.
diff --git a/.changeset/cuddly-cars-jam.md b/.changeset/cuddly-cars-jam.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): change `SidebarItem` focus color
diff --git a/.changeset/selfish-plants-divide.md b/.changeset/selfish-plants-divide.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): option to use `Tag` as link
diff --git a/.changeset/selfish-scissors-sit.md b/.changeset/selfish-scissors-sit.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): Remove underline prevention on anchor elements
diff --git a/packages/fuselage/src/components/Field/Field.styles.scss b/packages/fuselage/src/components/Field/Field.styles.scss
@@ -64,8 +64,6 @@
     @include typography.use-font-scale(p2);
     margin-block: lengths.margin(2);
 
-    text-decoration: none;
-
     color: colors.font(info);
     @extend %--with-inline-elements;
   }

diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss b/packages/fuselage/src/components/Sidebar/Sidebar.styles.scss
@@ -35,7 +35,7 @@ $sidebar-color-stroke-default: theme(
 
 $sidebar-color-stroke-focus: theme(
   'sidebar-color-stroke-focus',
-  colors.stroke(medium)
+  colors.stroke(highlight)
 );
 
 $sidebar-item-color: theme('sidebar-item-color', colors.font(secondary-info));

diff --git a/packages/fuselage/src/components/States/States.styles.scss b/packages/fuselage/src/components/States/States.styles.scss
@@ -98,8 +98,6 @@ $variants: (
     @include typography.use-font-scale(p2);
     margin-block: lengths.margin(16);
 
-    text-decoration: none;
-
     color: colors.font(info);
     @extend %--with-inline-elements;
   }

diff --git a/packages/fuselage/src/components/Tag/Tag.stories.tsx b/packages/fuselage/src/components/Tag/Tag.stories.tsx
@@ -94,3 +94,8 @@ export const Large = Template.bind({});
 Large.args = {
   large: true,
 };
+
+export const AsLink = Template.bind({});
+AsLink.args = {
+  href: '#',
+};
diff --git a/packages/fuselage/src/components/Tag/Tag.tsx b/packages/fuselage/src/components/Tag/Tag.tsx
@@ -2,6 +2,7 @@ import type { AllHTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 
 import { prependClassName } from '../../helpers/prependClassName';
+import Box from '../Box/Box';
 
 type TagProps = {
   medium?: boolean;
@@ -15,7 +16,7 @@ type TagProps = {
     | 'featured';
   disabled?: boolean;
   icon?: ReactNode;
-} & AllHTMLAttributes<HTMLSpanElement>;
+} & Omit<AllHTMLAttributes<HTMLSpanElement | HTMLAnchorElement>, 'is'>;
 
 export const Tag = ({
   large,
@@ -26,6 +27,7 @@ export const Tag = ({
   variant,
   children,
   icon,
+  href,
   ...props
 }: TagProps) => {
   const modifiers = [
@@ -34,19 +36,22 @@ export const Tag = ({
     large && 'large',
     disabled && 'disabled',
     onClick && 'clickable',
+    href && 'clickable',
   ]
     .filter(Boolean)
     .map((modifier) => `rcx-tag--${modifier}`)
     .join(' ');
 
   return (
-    <span
+    <Box
+      is={href ? 'a' : 'span'}
       className={prependClassName(className as string, `rcx-tag ${modifiers}`)}
       onClick={onClick}
+      href={href}
       {...props}
     >
       {icon}
       <span className='rcx-tag__inner'>{children}</span>
-    </span>
+    </Box>
   );
 };
diff --git a/packages/fuselage/src/styles/primitives/traits/rich-text.scss b/packages/fuselage/src/styles/primitives/traits/rich-text.scss
@@ -31,8 +31,6 @@
 
   a {
     &:link {
-      text-decoration: none;
-
       color: colors.font(info);
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,8 +31,6 @@ @@
       a {
         &:link {
-          text-decoration: none;
           color: colors.font(info);
         }
@@ Expand Down @@