feat: Focus visible (#165)

packages/fuselage-polyfills/index.js

+require('focus-visible');

packages/fuselage-polyfills/package.json

+{
+  "name": "@rocket.chat/fuselage-polyfills",
+  "version": "0.4.1",
+  "description": "A bundle of useful poly/ponyfills used by fuselage",
+  "author": {
+    "name": "Rocket.Chat",
+    "url": "https://rocket.chat/"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RocketChat/Rocket.Chat.Fuselage.git"
+  },
+  "bugs": {
+    "url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "focus-visible": "^5.0.2"
+  }
+}

packages/fuselage/.storybook/config.js

@@ -86,6 +86,7 @@ addDecorator(withTests({ results }));
 configure(() => {
   require('normalize.css/normalize.css');
   require('@rocket.chat/icons/dist/rocketchat.css');
+  require('@rocket.chat/fuselage-polyfills');
 
   if (process.env.NODE_ENV === 'loki') {
     const style = document.createElement('style');

packages/fuselage/package.json

@@ -49,6 +49,7 @@
     "@babel/preset-react": "^7.7.4",
     "@rocket.chat/eslint-config": "^0.4.0",
     "@rocket.chat/fuselage-hooks": "^0.4.1",
+    "@rocket.chat/fuselage-polyfills": "^0.4.1",
     "@storybook/addon-actions": "5.2.8",
     "@storybook/addon-backgrounds": "5.2.8",
     "@storybook/addon-centered": "5.2.8",

packages/fuselage/src/components/Button/stories.mdx

@@ -98,7 +98,7 @@ Indicates an actionable user action.
       default: {},
       hover: { className: 'hover' },
       active: { className: 'active' },
-      focus: { className: 'focus' },
+      'focus': { className: 'focus focus-visible' },
       disabled: { disabled: true },
     }}
   />
@@ -120,7 +120,7 @@ Indicates an actionable user action.
       default: {},
       hover: { className: 'hover' },
       active: { className: 'active' },
-      focus: { className: 'focus' },
+      'focus': { className: 'focus focus-visible' },
       disabled: { disabled: true },
     }}
   />
@@ -142,7 +142,7 @@ Indicates an actionable user action.
       default: {},
       hover: { className: 'hover' },
       active: { className: 'active' },
-      focus: { className: 'focus' },
+      'focus': { className: 'focus focus-visible' },
       disabled: { disabled: true },
     }}
   />
@@ -164,7 +164,7 @@ Indicates an actionable user action.
       default: {},
       hover: { className: 'hover' },
       active: { className: 'active' },
-      focus: { className: 'focus' },
+      'focus': { className: 'focus focus-visible' },
       disabled: { disabled: true },
     }}
   />
@@ -186,7 +186,7 @@ Indicates an actionable user action.
       default: {},
       hover: { className: 'hover' },
       active: { className: 'active' },
-      focus: { className: 'focus' },
+      'focus': { className: 'focus focus-visible' },
       disabled: { disabled: true },
     }}
   />
@@ -208,7 +208,7 @@ Indicates an actionable user action.
       default: {},
       hover: { className: 'hover' },
       active: { className: 'active' },
-      focus: { className: 'focus' },
+      'focus': { className: 'focus focus-visible' },
       disabled: { disabled: true },
     }}
   />

packages/fuselage/src/components/Button/styles.scss

-@mixin button-with-colors(
-  $color,
-  $background-color,
-  $border-color,
-  $hover-background-color,
-  $hover-border-color,
-  $active-background-color,
-  $active-border-color,
-  $focus-background-color,
-  $focus-border-color,
-  $focus-shadow-color,
-  $disabled-color,
-  $disabled-background-color,
-  $disabled-border-color,
-) {
-  color: $color;
-  border-color: $border-color;
-  background-color: $background-color;
-
-  &.focus,
-  &:focus {
-    border-color: $focus-border-color;
-    background-color: $focus-background-color;
-    @include use-focus-shadow($focus-shadow-color);
-  }
-
-  &.hover,
-  &:hover {
-    border-color: $hover-border-color;
-    background-color: $hover-background-color;
-    @include use-no-shadow;
-  }
-
-  &.active,
-  &:active {
-    border-color: $active-border-color;
-    background-color: $active-background-color;
-    @include use-no-shadow;
-  }
-
-  &.disabled,
-  &:disabled {
-    color: $disabled-color;
-    border-color: $disabled-border-color;
-    background-color: $disabled-background-color;
-  }
-}
-
 %button-secondary-color { // TODO: primitive atomic component
-  @include button-with-colors(
+  @include as-button (
     $background-color: $button-colors-secondary-background-color,
     $border-color: $button-colors-secondary-border-color,
     $color: $button-colors-secondary-color,

packages/fuselage/src/components/Tabs/index.js

 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
 
 import { Box } from '../Box';
 
-const Container = Box.extend('rcx-tabs');
-const ItemsWrapper = Box.extend('rcx-tabs__wrapper');
-const ScrollBox = Box.extend('rcx-tabs__scroll-box');
-const ItemContainer = Box.extend('rcx-tabs__item', 'button');
-
 export function Tabs({
   children,
   ...props
 }) {
-  return <Container {...props}>
-    <ScrollBox>
-      <ItemsWrapper children={children} role='tablist'/>
-    </ScrollBox>
-  </Container>;
+  return <Box is='div' componentClassName='rcx-tabs' {...props}>
+    <Box is='div' componentClassName='rcx-tabs__scroll-box'>
+      <Box is='div' componentClassName='rcx-tabs__wrapper' children={children} role='tablist'/>
+    </Box>
+  </Box>;
 }
 
 Tabs.displayName = 'Tabs';
@@ -24,7 +20,9 @@ export const TabsItem = forwardRef(function TabsItem({
   selected,
   ...props
 }, ref) {
-  return <ItemContainer
+  return <Box
+    is='button'
+    componentClassName='rcx-tabs__item'
     aria-selected={selected ? 'true' : 'false'}
     mod-selected={selected}
     ref={ref}
@@ -33,4 +31,8 @@ export const TabsItem = forwardRef(function TabsItem({
   />;
 });
 
+TabsItem.propTypes = {
+  selected: PropTypes.bool,
+};
+
 Tabs.Item = TabsItem;

packages/fuselage/src/components/Tabs/styles.scss

@@ -80,9 +80,7 @@
     color: $tabs-disabled-color;
   }
 
-  &.focus,
-  &:focus {
-
+  @include on-focus-visible {
     padding-inline: $spaces-x16;
 
     border-color: $tabs-focus-border-color;

packages/fuselage/src/styles/mixins/states.scss

@@ -23,6 +23,22 @@
   }
 }
 
+@mixin on-focus-visible {
+  &:focus-visible {
+    @content;
+  }
+
+  @at-root .js-focus-visible &:focus.focus-visible, .js-focus-visible &.focus.focus-visible {
+    @content;
+  }
+
+  @at-root html:not(.js-focus-visible) & {
+    @include on-focus {
+      @content;
+    }
+  }
+}
+
 @mixin on-disabled {
   *:disabled &,
   &:disabled,

packages/fuselage/src/styles/primitives/button.scss

@@ -22,7 +22,7 @@
 
   appearance: none;
 
-  @include on-focus {
+  @include on-focus-visible {
     border-color: $focus-border-color;
     background-color: $focus-background-color;
     @include use-focus-shadow($focus-shadow-color);

yarn.lock

@@ -8432,6 +8432,11 @@ focus-lock@^0.6.3:
   resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
   integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
+focus-visible@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.0.2.tgz#4fae9cf40458b73c10701c9774c462e3ccd53caf"
+  integrity sha512-zT2fj/bmOgEBjqGbURGlowTmCwsIs3bRDMr/sFZz8Ly7VkEiwuCn9swNTL3pPuf8Oua2de7CLuKdnuNajWdDsQ==
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"