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

Update shared components in `MenuArrow`, `AutocompleteList`

As `MenuArrow` now uses two icons — `PointerUpIcon` and
`PointerDownIcon` — instead of a CSS transform (rotate 180 degrees)
for the down variant, absolute positioning had to be adjusted in the
components that use this arrow.

A future enhancement might be to make positioning easier/unnecessary for
components using `MenuArrow`. Some additional comments have been added
for now.

The shared components in `AutocompleteList` are also updated here.
parent 252a168e
...@@ -188,7 +188,7 @@ function AnnotationShareControl({ ...@@ -188,7 +188,7 @@ function AnnotationShareControl({
{showShareLinks && <ShareLinks shareURI={shareUri} />} {showShareLinks && <ShareLinks shareURI={shareUri} />}
<MenuArrow <MenuArrow
direction="down" direction="down"
classes="bottom-[-12px] right-1 touch:right-[9px]" classes="bottom-[-9px] right-1 touch:right-[9px]"
/> />
</Card> </Card>
)} )}
......
import { Card } from '@hypothesis/frontend-shared'; import { Card } from '@hypothesis/frontend-shared/lib/next';
import classnames from 'classnames'; import classnames from 'classnames';
import { useMemo } from 'preact/hooks'; import { useMemo } from 'preact/hooks';
...@@ -85,20 +85,23 @@ export default function AutocompleteList({ ...@@ -85,20 +85,23 @@ export default function AutocompleteList({
const isHidden = list.length === 0 || !open; const isHidden = list.length === 0 || !open;
return ( return (
<div className="relative"> <div className="relative">
<Card <div
classes={classnames( className={classnames(
{ hidden: isHidden }, { hidden: isHidden },
// Move the Card down a bit to make room for the up-pointing arrow // Move the Card down a bit to make room for the up-pointing arrow
'absolute top-[3px] z-3', 'absolute top-[3px] z-3',
// Override full-width of Card, but set a min-width of `10em` // Ensure Card width is not too narrow
'w-auto min-w-[10em] theme-clean:border p-0' 'min-w-[10em]'
)} )}
data-testid="autocomplete-list-container"
> >
<Card width="auto">
<ul tabIndex={-1} aria-label="Suggestions" role="listbox" {...props}> <ul tabIndex={-1} aria-label="Suggestions" role="listbox" {...props}>
{items} {items}
</ul> </ul>
<MenuArrow direction="up" classes="top-[-10px] left-[3px]" /> <MenuArrow direction="up" classes="top-[-8px] left-[3px]" />
</Card> </Card>
</div> </div>
</div>
); );
} }
...@@ -205,7 +205,7 @@ export default function Menu({ ...@@ -205,7 +205,7 @@ export default function Menu({
direction="up" direction="up"
classes={classnames( classes={classnames(
// Position menu-arrow caret near bottom right of menu label/toggle control // Position menu-arrow caret near bottom right of menu label/toggle control
'right-0 top-[calc(100%-6px)] w-[15px]', 'right-0 top-[calc(100%-3px)] w-[15px]',
arrowClass arrowClass
)} )}
/> />
......
import { Icon } from '@hypothesis/frontend-shared'; import {
PointerDownIcon,
PointerUpIcon,
} from '@hypothesis/frontend-shared/lib/next';
import classnames from 'classnames'; import classnames from 'classnames';
/** /**
...@@ -11,15 +14,19 @@ import classnames from 'classnames'; ...@@ -11,15 +14,19 @@ import classnames from 'classnames';
* Render a white-filled "pointer" arrow for use in menus and menu-like * Render a white-filled "pointer" arrow for use in menus and menu-like
* elements * elements
* *
* This will set up absolute positioning for this arrow, but the vertical and
* horizontal positioning will need to be tuned in the component using the
* arrow by adding additional utlity classes (`classes` prop here).
*
* @param {MenuArrowProps} props * @param {MenuArrowProps} props
*/ */
export default function MenuArrow({ classes, direction = 'up' }) { export default function MenuArrow({ classes, direction = 'up' }) {
const Icon = direction === 'up' ? PointerUpIcon : PointerDownIcon;
return ( return (
<Icon <Icon
name="pointer" name="pointer"
classes={classnames( className={classnames(
'absolute inline z-2 text-grey-3 fill-white', 'absolute inline z-2 text-grey-3 fill-white',
{ 'rotate-180': direction === 'down' },
classes classes
)} )}
/> />
......
...@@ -33,12 +33,18 @@ describe('AutocompleteList', () => { ...@@ -33,12 +33,18 @@ describe('AutocompleteList', () => {
it('hides the list container when `open` is false', () => { it('hides the list container when `open` is false', () => {
// `open` prop defaults to `false` // `open` prop defaults to `false`
const wrapper = createComponent(); const wrapper = createComponent();
assert.include(wrapper.find('Card').props().classes, 'hidden'); const container = wrapper.find(
'[data-testid="autocomplete-list-container"]'
);
assert.isTrue(container.getDOMNode().classList.contains('hidden'));
}); });
it('hides the list container when `list` is empty', () => { it('hides the list container when `list` is empty', () => {
const wrapper = createComponent({ open: true, list: [] }); const wrapper = createComponent({ open: true, list: [] });
assert.include(wrapper.find('Card').props().classes, 'hidden'); const container = wrapper.find(
'[data-testid="autocomplete-list-container"]'
);
assert.isTrue(container.getDOMNode().classList.contains('hidden'));
}); });
it('renders the items in order of the list prop', () => { it('renders the items in order of the list prop', () => {
......
...@@ -16,15 +16,11 @@ describe('MenuArrow', () => { ...@@ -16,15 +16,11 @@ describe('MenuArrow', () => {
it('should render an arrow pointing up by default', () => { it('should render an arrow pointing up by default', () => {
const wrapper = createComponent(); const wrapper = createComponent();
const arrowClasses = wrapper.find('Icon').props().classes; assert.isTrue(wrapper.find('PointerUpIcon').exists());
assert.notInclude(arrowClasses, 'rotate-180');
}); });
it('should render an arrow pointing down if direction is `down`', () => { it('should render an arrow pointing down if direction is `down`', () => {
const wrapper = createComponent({ direction: 'down' }); const wrapper = createComponent({ direction: 'down' });
const arrowClasses = wrapper.find('Icon').props().classes; assert.isTrue(wrapper.find('PointerDownIcon').exists());
assert.include(arrowClasses, 'rotate-180');
}); });
}); });
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