Unverified Commit 0801f280 authored by gabriellsh's avatar gabriellsh Committed by GitHub
Browse files

feat: Focus visible (#165)

parent 374c2797
{
"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"
}
}
......@@ -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');
......
......@@ -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",
......
......@@ -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 },
}}
/>
......
@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,
......
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;
......@@ -80,9 +80,7 @@
color: $tabs-disabled-color;
}
&.focus,
&:focus {
@include on-focus-visible {
padding-inline: $spaces-x16;
border-color: $tabs-focus-border-color;
......
......@@ -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,
......
......@@ -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);
......
......@@ -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"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment