feat(fuselage): Adds Tag focus state (#1303)

RocketChat · Feb 26, 2024 · 168ff5b · 168ff5b
1 parent 0e8e988
commit 168ff5b
Show file tree

Hide file tree

Showing 9 changed files with 447 additions and 26 deletions.
diff --git a/.changeset/warm-ducks-walk.md b/.changeset/warm-ducks-walk.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): Adds `Tag` focus state
diff --git a/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss b/packages/fuselage/src/components/Message/MessageSystem/MessageSystem.styles.scss
@@ -2,6 +2,7 @@
 @use '../../../styles/functions.scss';
 @use '../../../styles/colors.scss';
 @use '../../../styles/typography.scss';
+@use '../../../styles/mixins/templates.scss';
 @use '../mixins.scss';
 
 $message-system-background-color-selected: functions.theme(
@@ -68,5 +69,5 @@ $message-system-background-color-selected: functions.theme(
     align-items: center;
   }
 
-  @include mixins.focus-state();
+  @include templates.focus-state;
 }
diff --git a/packages/fuselage/src/components/Message/Messages.styles.scss b/packages/fuselage/src/components/Message/Messages.styles.scss
@@ -2,6 +2,7 @@
 @use '../../styles/functions.scss';
 @use '../../styles/colors.scss';
 @use '../../styles/mixins/size.scss';
+@use '../../styles/mixins/templates.scss';
 @use '../../styles/typography.scss';
 @use './mixins.scss';
 
@@ -104,7 +105,7 @@ $message-highlight-colors-background-other-color: theme(
     background-color: $message-background-color-hover;
   }
 
-  @include mixins.focus-state();
+  @include templates.focus-state;
 
   &--selected {
     background: $message-background-color-selected !important;
@@ -186,7 +187,7 @@ $message-highlight-colors-background-other-color: theme(
 
       @extend %rcx-margins-header;
 
-      @include mixins.focus-state();
+      @include templates.focus-state;
     }
 
     &__name {

diff --git a/packages/fuselage/src/components/Message/mixins.scss b/packages/fuselage/src/components/Message/mixins.scss
@@ -1,7 +1,5 @@
 @use '../../styles/lengths.scss';
 @use '../../styles/colors.scss';
-@import '../../styles/mixins/states.scss';
-@import '../../styles/mixins/shadows.scss';
 
 @mixin container() {
   &-container {
@@ -37,16 +35,3 @@
     display: none;
   }
 }
-
-@mixin focus-state {
-  border-width: lengths.border-width('default');
-  border-style: solid;
-  border-color: transparent;
-
-  @include on-focus-visible {
-    border-color: colors.stroke(highlight);
-    border-radius: lengths.border-radius(medium);
-    outline: 0;
-    @include use-button-focus-shadow(colors.stroke(extra-light-highlight));
-  }
-}
diff --git a/packages/fuselage/src/components/Tag/Tag.spec.tsx b/packages/fuselage/src/components/Tag/Tag.spec.tsx
@@ -1,10 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
-import { Tag } from '.';
+import * as stories from './Tag.stories';
 
-describe('[Tag Component]', () => {
-  it('renders without crashing', () => {
-    render(<Tag />);
-  });
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[Tag Rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });
diff --git a/packages/fuselage/src/components/Tag/Tag.styles.scss b/packages/fuselage/src/components/Tag/Tag.styles.scss
@@ -1,6 +1,7 @@
 @use '../../styles/colors.scss';
 @use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
+@use '../../styles/mixins/templates.scss';
 
 $tag-colors-default-color: theme(
   'tag-colors-default-color',
@@ -136,9 +137,10 @@ $tag-colors-disabled-background-color: theme(
   background-color: $tag-colors-default-background-color;
 
   @include typography.use-font-scale(micro);
+  @include templates.focus-state;
 
   &--clickable {
-    @include clickable();
+    @include clickable;
     @include use-clickable-colors(
       $tag-colors-default-color,
       $tag-colors-default-hover-background-color