Skip to content

Commit 0801f28

Browse files
gabriellshgabriellsh
authored
feat: Focus visible (#165)
1 parent 374c279 commit 0801f28

File tree

11 files changed

+67
-70
lines changed

11 files changed

+67
-70
lines changed

‎packages/fuselage-polyfills/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
require('focus-visible');

‎packages/fuselage-polyfills/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@rocket.chat/fuselage-polyfills",
3+
"version": "0.4.1",
4+
"description": "A bundle of useful poly/ponyfills used by fuselage",
5+
"author": {
6+
"name": "Rocket.Chat",
7+
"url": "https://rocket.chat/"
8+
},
9+
"license": "MIT",
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/RocketChat/Rocket.Chat.Fuselage.git"
13+
},
14+
"bugs": {
15+
"url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
16+
},
17+
"main": "index.js",
18+
"dependencies": {
19+
"focus-visible": "^5.0.2"
20+
}
21+
}

‎packages/fuselage/.storybook/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ addDecorator(withTests({ results }));
8686
configure(() => {
8787
require('normalize.css/normalize.css');
8888
require('@rocket.chat/icons/dist/rocketchat.css');
89+
require('@rocket.chat/fuselage-polyfills');
8990

9091
if (process.env.NODE_ENV === 'loki') {
9192
const style = document.createElement('style');

‎packages/fuselage/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
"@babel/preset-react": "^7.7.4",
5050
"@rocket.chat/eslint-config": "^0.4.0",
5151
"@rocket.chat/fuselage-hooks": "^0.4.1",
52+
"@rocket.chat/fuselage-polyfills": "^0.4.1",
5253
"@storybook/addon-actions": "5.2.8",
5354
"@storybook/addon-backgrounds": "5.2.8",
5455
"@storybook/addon-centered": "5.2.8",

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ Indicates an actionable user action.
9898
default: {},
9999
hover: { className: 'hover' },
100100
active: { className: 'active' },
101-
focus: { className: 'focus' },
101+
'focus': { className: 'focus focus-visible' },
102102
disabled: { disabled: true },
103103
}}
104104
/>
@@ -120,7 +120,7 @@ Indicates an actionable user action.
120120
default: {},
121121
hover: { className: 'hover' },
122122
active: { className: 'active' },
123-
focus: { className: 'focus' },
123+
'focus': { className: 'focus focus-visible' },
124124
disabled: { disabled: true },
125125
}}
126126
/>
@@ -142,7 +142,7 @@ Indicates an actionable user action.
142142
default: {},
143143
hover: { className: 'hover' },
144144
active: { className: 'active' },
145-
focus: { className: 'focus' },
145+
'focus': { className: 'focus focus-visible' },
146146
disabled: { disabled: true },
147147
}}
148148
/>
@@ -164,7 +164,7 @@ Indicates an actionable user action.
164164
default: {},
165165
hover: { className: 'hover' },
166166
active: { className: 'active' },
167-
focus: { className: 'focus' },
167+
'focus': { className: 'focus focus-visible' },
168168
disabled: { disabled: true },
169169
}}
170170
/>
@@ -186,7 +186,7 @@ Indicates an actionable user action.
186186
default: {},
187187
hover: { className: 'hover' },
188188
active: { className: 'active' },
189-
focus: { className: 'focus' },
189+
'focus': { className: 'focus focus-visible' },
190190
disabled: { disabled: true },
191191
}}
192192
/>
@@ -208,7 +208,7 @@ Indicates an actionable user action.
208208
default: {},
209209
hover: { className: 'hover' },
210210
active: { className: 'active' },
211-
focus: { className: 'focus' },
211+
'focus': { className: 'focus focus-visible' },
212212
disabled: { disabled: true },
213213
}}
214214
/>

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

+1-49
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,5 @@
1-
@mixin button-with-colors(
2-
$color,
3-
$background-color,
4-
$border-color,
5-
$hover-background-color,
6-
$hover-border-color,
7-
$active-background-color,
8-
$active-border-color,
9-
$focus-background-color,
10-
$focus-border-color,
11-
$focus-shadow-color,
12-
$disabled-color,
13-
$disabled-background-color,
14-
$disabled-border-color,
15-
) {
16-
color: $color;
17-
border-color: $border-color;
18-
background-color: $background-color;
19-
20-
&.focus,
21-
&:focus {
22-
border-color: $focus-border-color;
23-
background-color: $focus-background-color;
24-
@include use-focus-shadow($focus-shadow-color);
25-
}
26-
27-
&.hover,
28-
&:hover {
29-
border-color: $hover-border-color;
30-
background-color: $hover-background-color;
31-
@include use-no-shadow;
32-
}
33-
34-
&.active,
35-
&:active {
36-
border-color: $active-border-color;
37-
background-color: $active-background-color;
38-
@include use-no-shadow;
39-
}
40-
41-
&.disabled,
42-
&:disabled {
43-
color: $disabled-color;
44-
border-color: $disabled-border-color;
45-
background-color: $disabled-background-color;
46-
}
47-
}
48-
491
%button-secondary-color { // TODO: primitive atomic component
50-
@include button-with-colors(
2+
@include as-button (
513
$background-color: $button-colors-secondary-background-color,
524
$border-color: $button-colors-secondary-border-color,
535
$color: $button-colors-secondary-color,

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

+13-11
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import React, { forwardRef } from 'react';
2+
import PropTypes from 'prop-types';
23

34
import { Box } from '../Box';
45

5-
const Container = Box.extend('rcx-tabs');
6-
const ItemsWrapper = Box.extend('rcx-tabs__wrapper');
7-
const ScrollBox = Box.extend('rcx-tabs__scroll-box');
8-
const ItemContainer = Box.extend('rcx-tabs__item', 'button');
9-
106
export function Tabs({
117
children,
128
...props
139
}) {
14-
return <Container {...props}>
15-
<ScrollBox>
16-
<ItemsWrapper children={children} role='tablist'/>
17-
</ScrollBox>
18-
</Container>;
10+
return <Box is='div' componentClassName='rcx-tabs' {...props}>
11+
<Box is='div' componentClassName='rcx-tabs__scroll-box'>
12+
<Box is='div' componentClassName='rcx-tabs__wrapper' children={children} role='tablist'/>
13+
</Box>
14+
</Box>;
1915
}
2016

2117
Tabs.displayName = 'Tabs';
@@ -24,7 +20,9 @@ export const TabsItem = forwardRef(function TabsItem({
2420
selected,
2521
...props
2622
}, ref) {
27-
return <ItemContainer
23+
return <Box
24+
is='button'
25+
componentClassName='rcx-tabs__item'
2826
aria-selected={selected ? 'true' : 'false'}
2927
mod-selected={selected}
3028
ref={ref}
@@ -33,4 +31,8 @@ export const TabsItem = forwardRef(function TabsItem({
3331
/>;
3432
});
3533

34+
TabsItem.propTypes = {
35+
selected: PropTypes.bool,
36+
};
37+
3638
Tabs.Item = TabsItem;

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,7 @@
8080
color: $tabs-disabled-color;
8181
}
8282

83-
&.focus,
84-
&:focus {
85-
83+
@include on-focus-visible {
8684
padding-inline: $spaces-x16;
8785

8886
border-color: $tabs-focus-border-color;

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

+16
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,22 @@
2323
}
2424
}
2525

26+
@mixin on-focus-visible {
27+
&:focus-visible {
28+
@content;
29+
}
30+
31+
@at-root .js-focus-visible &:focus.focus-visible, .js-focus-visible &.focus.focus-visible {
32+
@content;
33+
}
34+
35+
@at-root html:not(.js-focus-visible) & {
36+
@include on-focus {
37+
@content;
38+
}
39+
}
40+
}
41+
2642
@mixin on-disabled {
2743
*:disabled &,
2844
&:disabled,

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
appearance: none;
2424

25-
@include on-focus {
25+
@include on-focus-visible {
2626
border-color: $focus-border-color;
2727
background-color: $focus-background-color;
2828
@include use-focus-shadow($focus-shadow-color);

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -8432,6 +8432,11 @@ focus-lock@^0.6.3:
84328432
resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
84338433
integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
84348434

8435+
focus-visible@^5.0.2:
8436+
version "5.0.2"
8437+
resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.0.2.tgz#4fae9cf40458b73c10701c9774c462e3ccd53caf"
8438+
integrity sha512-zT2fj/bmOgEBjqGbURGlowTmCwsIs3bRDMr/sFZz8Ly7VkEiwuCn9swNTL3pPuf8Oua2de7CLuKdnuNajWdDsQ==
8439+
84358440
for-in@^0.1.3:
84368441
version "0.1.8"
84378442
resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"

0 commit comments

Comments
 (0)