Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-02-11 04:27:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace remaining React ARIA components with Compound components (#2576)

Browse Source 
* Fix issues detected by Knip

Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies.

* Replace remaining React ARIA components with Compound components

* fix button position

* disable scrollbars to resolve overlapping button

---------

Co-authored-by: Timo <toger5@hotmail.de>
This commit is contained in:
Robin
2024-08-28 08:44:39 -04:00
committed by GitHub
parent 7bca541cb6
commit 0db51d9dfd
62 changed files with 668 additions and 2603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/button/Button.module.css
View File

@@ -1,5 +1,5 @@
/*
Copyright 2021 New Vector Ltd
Copyright 2024 New Vector Ltd
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,240 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.button,
.toolbarButton,
.toolbarButtonSecondary,
.iconButton,
.iconCopyButton,
.secondary,
.secondaryHangup,
.copyButton,
.dropdownButton {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
padding: 0;
border: none;
cursor: pointer;
text-decoration: none;
box-sizing: border-box;
}
.secondary,
.secondaryHangup,
.button,
.copyButton {
padding: 8px 20px;
border-radius: 8px;
font-size: var(--font-size-body);
font-weight: 600;
}
.button {
color: var(--stopgap-color-on-solid-accent);
background-color: var(--cpd-color-text-action-accent);
}
.button:focus-visible,
.toolbarButton:focus-visible,
.toolbarButtonSecondary:focus-visible,
.iconButton:focus-visible,
.iconCopyButton:focus-visible,
.secondary:focus-visible,
.secondaryHangup:focus-visible,
.copyButton:focus-visible {
outline: auto;
}
.toolbarButton:disabled {
background-color: var(--cpd-color-bg-action-primary-disabled);
box-shadow: none;
}
.toolbarButton,
.toolbarButtonSecondary {
width: 50px;
height: 50px;
border-radius: 50px;
background-color: var(--cpd-color-bg-canvas-default);
color: var(--cpd-color-icon-primary);
border: 1px solid var(--cpd-color-gray-400);
box-shadow: var(--subtle-drop-shadow);
}
.toolbarButton.on,
.toolbarButton.off {
background-color: var(--cpd-color-bg-action-primary-rest);
color: var(--cpd-color-icon-on-solid-primary);
}
.toolbarButtonSecondary.on {
background-color: var(--cpd-color-text-success-primary);
}
.toolbarButton:active,
.toolbarButtonSecondary:active {
background-color: var(--cpd-color-bg-subtle-primary);
border: none;
box-shadow: none;
}
.toolbarButton.on:active,
.toolbarButton.off:active {
background-color: var(--cpd-color-bg-action-primary-pressed);
}
.iconButton:not(.stroke) svg * {
fill: var(--cpd-color-bg-action-primary-rest);
}
.iconButton:not(.stroke):tertiary svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.iconButton.on:not(.stroke) svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.iconButton.on.stroke svg * {
stroke: var(--cpd-color-icon-accent-tertiary);
}
.hangupButton {
background-color: var(--cpd-color-bg-critical-primary);
border-color: var(--cpd-color-border-critical-subtle);
.endCall > svg {
color: var(--stopgap-color-on-solid-accent);
}
.hangupButton:active {
background-color: var(--cpd-color-bg-critical-pressed);
}
.secondary,
.copyButton {
color: var(--cpd-color-text-action-accent);
border: 2px solid var(--cpd-color-text-action-accent);
background-color: transparent;
}
.secondaryHangup {
color: var(--cpd-color-text-critical-primary);
border: 2px solid var(--cpd-color-border-critical-primary);
background-color: transparent;
}
.copyButton.secondaryCopy {
color: var(--cpd-color-text-primary);
border-color: var(--cpd-color-border-interactive-primary);
}
.copyButton {
width: 100%;
height: 40px;
transition:
border-color 250ms,
background-color 250ms;
}
.copyButton span {
font-weight: 600;
font-size: var(--font-size-body);
margin-right: 10px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.copyButton svg {
flex-shrink: 0;
}
.copyButton:not(.on) svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.copyButton.on {
border-color: transparent;
background-color: var(--cpd-color-text-action-accent);
color: white;
}
.copyButton.on svg * {
stroke: white;
}
.copyButton.secondaryCopy:not(.on) svg * {
fill: var(--cpd-color-bg-action-primary-rest);
}
.iconCopyButton svg * {
fill: var(--cpd-color-icon-secondary);
}
.iconCopyButton.on svg *,
.iconCopyButton.on:hover svg * {
fill: transparent;
stroke: var(--cpd-color-text-action-accent);
}
.dropdownButton {
color: var(--cpd-color-text-primary);
padding: 2px 8px;
border-radius: 8px;
}
.dropdownButton:active,
.dropdownButton.on {
background-color: var(--cpd-color-bg-action-secondary-pressed);
}
.dropdownButton svg {
margin-left: 8px;
}
.dropdownButton svg * {
fill: var(--cpd-color-icon-primary);
}
.lg {
height: 40px;
}
.linkButton {
background-color: transparent;
border: none;
color: var(--cpd-color-text-action-accent);
cursor: pointer;
}
@media (hover: hover) {
.toolbarButton:hover,
.toolbarButtonSecondary:hover {
background-color: var(--cpd-color-bg-subtle-primary);
border: none;
box-shadow: none;
}
.toolbarButton.on:hover,
.toolbarButton.off:hover {
background-color: var(--cpd-color-bg-action-primary-hovered);
}
.iconButton:not(.stroke):hover svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.hangupButton:hover {
background-color: var(--cpd-color-bg-critical-hovered);
}
.iconCopyButton:hover svg * {
fill: var(--cpd-color-icon-accent-tertiary);
}
.dropdownButton:hover {
background-color: var(--cpd-color-bg-action-secondary-hovered);
}
}