Commit 6757da21 authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Migrate `GroupListItem` to tailwind

parent a1015ade
import classnames from 'classnames';
import { orgName } from '../../helpers/group-list-item-common';
import { withServices } from '../../service-context';
import { useSidebarStore } from '../../store';
......@@ -139,7 +141,14 @@ function GroupListItem({
)}
</ul>
{!isSelectable && (
<p className="GroupListItem__footer">
<p
className={classnames(
// Left padding to match submenu items above. Turn off hyphenation
// as it causes this content to hyphenate awkwardly.
'p-2 pl-9 bg-grey-1 hyphens-none'
)}
data-testid="unselectable-group-note"
>
This group is restricted to specific URLs.
</p>
)}
......
......@@ -301,7 +301,10 @@ describe('GroupListItem', () => {
);
const submenu = getSubmenu(wrapper);
assert.equal(submenu.exists('.GroupListItem__footer'), expectDisabled);
assert.equal(
submenu.exists('[data-testid="unselectable-group-note"]'),
expectDisabled
);
});
});
......@@ -312,7 +315,7 @@ describe('GroupListItem', () => {
});
assert.equal(wrapper.find('MenuItem').first().prop('isDisabled'), true);
const submenu = getSubmenu(wrapper);
assert.equal(submenu.exists('.GroupListItem__footer'), true);
assert.isTrue(submenu.exists('[data-testid="unselectable-group-note"]'));
});
[
......
@use '../../variables' as var;
// Footer to display at the bottom of a menu item.
.GroupListItem__footer {
background-color: var.$grey-1;
margin: 0;
// TODO consolidate
padding-top: 15px;
padding: 10px;
// Align the left edge of the footer text with menu item labels above.
padding-left: 35px;
white-space: normal;
// Override default hyphenation which is applied to all `p` elements in the
// app.
hyphens: none;
}
......@@ -11,7 +11,6 @@
// ----------
@use './FilterSelect';
@use './GroupList';
@use './GroupListItem';
@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