Implement approved tag (pill) styling change #1760
Comments
|
@jenn-franklin Button with icon styles:
Existing pills (live on the site):
New styling(exploration below)
Notes:
My recommendation is that we go with:
I think it's better for the pill to be different in height than the button because a button should have prominence and button and pill will typically appear on a form together. The height in my mock-up is 30px. I imagine I could go even less high if needed but 30px is a good start. Since we use Regular for the existing pill I can go with that and see how it works. I can forgo the pipe separator since we aren't using it in any of the existing pill iterations and perhaps it simplifies things. I'll start by building the component to this spec and then loop back around. |
Do we have guidance on touch target sizes? My understanding is they are recommended to be a minimum of 44px x 44px. (See material-components/material-components-android#1279, for example.) Does that affect the height we want for the pills? |
|
@anselmbradford What is the touch target for our standard button component? Standard buttons are 35px in height (visually) but do you know what we have the touch target size set to? Increasing the touch target for standard buttons is out of scope for this specific effort but I can open a separate issue if that is something you want to explore at this time. What I am suggesting here is an increase in the existing height of the pills from 22px to 30px. So the touch target would improve with this change, and we could look at extending the area that responds to user input outside of that visual area, if possible, to more closely align with the guidance. |
|
@anselmbradford @jenn-franklin Specs for R1:
Note: The states shown at the top have not been updated to the 30px height. But the pills in the mock-up below the states example is set to 30px. For discussion We do use the Multiselect component on our website to filter categorized content, like here where you can filter reports by predefined topics and categories. But some use cases are much broader than that - where we're using the pill to visually indicate that an item (in a list) has been selected. That item does not necessarily represent a group or category of things. But both use cases will use this same pill component - and the same multiselect component.
|
|
@natalia-fitzgerald Thanks for working on this and 👍 to all the specs you've chosen. Before reading your spec preferences, I had decided I preferred Teal 20, 30px height and no pipe separator. I was intrigued by Avenir Next Medium, but I don't think it's needed or particularly helpful. Regular weight is accessible and will help keep the design's footprint small. Great to seeing about making the touch target 45px. I think you can do that without going larger than 30px with the visual design. I agree with your comment that this should have less visual prominence than our button. I like the idea of calling this a tag. Seems like a fitting description to me, and I like aligning with USWDS's naming conventions when possible. It doesn't feel right to me to group this with buttons. It feels to me that it serves a different function and the interaction is kind of the reverse of a button's interaction in that when you click on a tag, you remove something vs. when you click on a button, you advance. |
|
@jenn-franklin So if we separate this into a "Tag" component do we need to we need to think bigger picture about what these other tag-related components should be and should be called? That is out of scope for my effort - and it might be that these particular components (3 and 4 below) only appear in the context of the filterable list/post preview. But it's good to be thinking about it/discussing it while we're exploring the tag component. My effort will address the styling of 1 and 2 below, the "Tag" component for the Multiselect component. In a separate effort we could update the post preview topic tag link to match the teal styling (so that these components seem more visually related (currently the tag/pill is Navy and the topic tag is Gold).
|
Specs for Tag component:Default
Focus
Hover
Hover/Focus
Active
|
Will be using this class selector for styling the pills |
natalia-fitzgerald
changed the title
|
@meissadia I think the only change is to the background color for the Focus state. It should be Teal 20. |
In 2018 and 2020 we approved new styling for the pill component. This issue will implement this change in the Design System.
As part of the React component work we have already implemented this update. We would now like to push the change to the Design System. Satellite apps will have to be handled separately but the risk is low given that satellite apps are currently using different styling than the CFPB core website.
Describe the solution you'd like
Updated styling:
Existing CSS for pills
.o-multiselect_choices button {
border: none;
background: none;
padding: 0;
.o-multiselect_choices li {
display: inline-block;
margin-right: 0.625em;
}
.o-multiselect_choices label {
display: inline-block;
padding: 2px 5px;
padding-right: 1.78571429em;
background-color: #5674a3;
border-radius: 0.28571429em;
color: #ffffff;
cursor: pointer;
font-size: 0.875em;
position: relative;
}
.o-multiselect_choices label .cf-icon-svg {
position: absolute;
top: 2px;
right: 5px;
fill: #d3daeb;
}
.cf-icon-svg {
height: 1.1875em;
vertical-align: text-top;
fill: currentcolor;
Mock-up of approved implementation:
The text was updated successfully, but these errors were encountered: