Commit f5b9ba5e authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Use `LabeledButton` in AdderToolbar

Use `LabeledButton` instead of a `<button>` element in AdderToolbar
buttons, and extract pattern to `frontend-shared` SASS module.
parent bdceaff3
import classnames from 'classnames';
import { SvgIcon } from '@hypothesis/frontend-shared';
import { LabeledButton, SvgIcon } from '@hypothesis/frontend-shared';
import { useShortcut } from '../../shared/shortcut';
......@@ -17,18 +17,17 @@ function ToolbarButton({ badgeCount, icon, label, onClick, shortcut }) {
const title = shortcut ? `${label} (${shortcut})` : label;
return (
<button
className="AdderToolbar__button"
<LabeledButton
classes="LabeledIconButton AdderToolbar__button"
icon={icon}
onClick={onClick}
aria-label={title}
title={title}
>
{icon && <SvgIcon name={icon} className="AdderToolbar__icon" />}
{typeof badgeCount === 'number' && (
<span className="AdderToolbar__badge">{badgeCount}</span>
)}
<span className="AdderToolbar__label">{label}</span>
</button>
<span className="LabeledIconButton__label">{label}</span>
</LabeledButton>
);
}
......
......@@ -79,23 +79,6 @@ $adder-transition-duration: 80ms;
@include layout.row;
}
.AdderToolbar__button {
@include layout.column($align: center);
@include buttons.reset;
cursor: pointer;
color: var.$grey-mid;
font-size: var.$annotator-adder-font-size;
line-height: var.$annotator-adder-line-height;
padding: var.$layout-space--small;
transition: color $adder-transition-duration;
}
.AdderToolbar__label {
margin-top: var.$layout-space--xxsmall;
transition: color $adder-transition-duration;
}
.AdderToolbar__badge {
// The badge should be vertically aligned with icons in other toolbar buttons
// and the label underneath should also align with labels in other buttons.
......@@ -103,7 +86,7 @@ $adder-transition-duration: 80ms;
border-radius: var.$annotator-border-radius;
color: var.$color-text--inverted;
font-weight: bold;
// For positioning the number appropriately withint the badge background
// For positioning the number appropriately within the badge background
padding: 2px 4px;
}
......
......@@ -33,6 +33,32 @@
}
}
// Used in the AdderToolbar, a transparent button that has an icon and a small
// label below the icon
.LabeledIconButton {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
&:hover:not([disabled]) {
background-color: transparent;
}
cursor: pointer;
font-weight: normal;
font-size: var.$annotator-adder-font-size;
line-height: var.$annotator-adder-line-height;
padding: var.$layout-space--small;
transition: color 80ms;
background: transparent;
&__label {
margin-top: var.$layout-space--xxsmall;
transition: color 80ms;
}
}
// Override any background color on a LabeledButton
.TransparentButton {
background-color: transparent;
......
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