Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
RocketChat
Rocket.Chat.Fuselage
Commits
0801f280
Unverified
Commit
0801f280
authored
Mar 19, 2020
by
gabriellsh
Committed by
GitHub
Mar 19, 2020
Browse files
feat: Focus visible (#165)
parent
374c2797
Changes
11
Hide whitespace changes
Inline
Side-by-side
packages/fuselage-polyfills/index.js
0 → 100644
View file @
0801f280
require
(
'
focus-visible
'
);
packages/fuselage-polyfills/package.json
0 → 100644
View file @
0801f280
{
"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
View file @
0801f280
...
...
@@ -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
View file @
0801f280
...
...
@@ -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
View file @
0801f280
...
...
@@ -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
View file @
0801f280
@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
View file @
0801f280
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
}
>
<
S
croll
B
ox
>
<
ItemsW
rapper
children
=
{
children
}
role
=
'
tablist
'
/>
<
/
Scroll
Box
>
<
/
Container
>
;
return
<
Box
is
=
'
div
'
componentClassName
=
'
rcx-tabs
'
{...
props
}
>
<
Box
is
=
'
div
'
componentClassName
=
'
rcx-tabs__s
croll
-b
ox
'
>
<
Box
is
=
'
div
'
componentClassName
=
'
rcx-tabs__w
rapper
'
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
View file @
0801f280
...
...
@@ -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
View file @
0801f280
...
...
@@ -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
View file @
0801f280
...
...
@@ -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
View file @
0801f280
...
...
@@ -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"
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment