Commit 30f18b3b authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Migrate `FilterSelect` to tailwind

parent 1adb25a4
import { Icon } from '@hypothesis/frontend-shared';
import classnames from 'classnames';
import Menu from './Menu';
import MenuItem from './MenuItem';
......@@ -35,14 +36,28 @@ function FilterSelect({
const selected = selectedOption ?? defaultOption;
const menuLabel = (
<span className="FilterSelect__menu-label">
{icon && <Icon name={icon} classes="text-xl hyp-u-margin--right--3" />}
<span
className={classnames(
// Don't allow the label text to wrap
'shrink-0 flex items-center gap-x-2',
'text-color-text font-bold text-lg'
)}
>
{icon && <Icon name={icon} classes="w-4 h-4" />}
{selected.display}
</span>
);
return (
<Menu label={menuLabel} title={title} contentClass="FilterSelect__menu">
<Menu
label={menuLabel}
title={title}
contentClass={classnames(
// Don't let filter list get too terribly tall. On shorter screens,
// restrict to 70vh; set a static max-height for taller screens.
'max-h-[70vh] tall:max-h-[504px] overflow-y-auto'
)}
>
{filterOptions.map(filterOption => (
<MenuItem
onClick={() => onSelect(filterOption)}
......
@use '../../mixins/utils';
@use '../../variables' as var;
.FilterSelect {
&__menu {
// Prevent the list from overflowing off screen in most cases.
max-height: 70vh;
overflow-y: auto;
// Limit the length for large screens.
@media only screen and (min-height: 44em) {
max-height: 36em;
}
}
&__menu-label {
@include utils.font--large;
align-items: center;
color: var.$color-text;
display: flex;
// Prevent label from wrapping if top bar is too narrow to fit all of its
// items.
flex-shrink: 0;
font-weight: bold;
}
}
......@@ -9,7 +9,6 @@
// UI (Preact) Components
// ----------
@use './FilterSelect';
@use './StyledText';
// TODO: Evaluate all classes below after components have been converted to
......
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