darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-25 00:33:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make remove ('x') links buttons

Browse Source 
The text never had underlines like our other
link-button components so always looked like
buttons. If they look like buttons, they should
act like them too and have those semantics.

This give them a role of button and uses the class
and data attribute for the button component from
GOVUK Frontend to make them work like one.

These changes include a fair amount of styles to
override those the govuk-button class brings in.
I've tried to mark those ones to at least make
that obvious.
This commit is contained in:
Tom Byers
2021-10-22 11:54:41 +01:00
parent 9d59edb3ce
commit c34fd4de6e
2 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/assets/stylesheets/components/area-list.scss
View File

@@ -19,51 +19,58 @@
right: -2px; // cover list-item border-right right: -2px; // cover list-item border-right
bottom: -2px; // cover list-item border-bottom bottom: -2px; // cover list-item border-bottom
width: 35px; width: 35px;
background: $govuk-blue;
color: $white;
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
padding: (govuk-spacing(1) + 1px) 0 govuk-spacing(1); padding: (govuk-spacing(1) + 1px) 0 govuk-spacing(1);
border: 2px solid $govuk-blue; border: 2px solid $govuk-blue;
border-left: none; border-left: none;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
font-size: inherit; // counter govuk-button styles
line-height: inherit; // counter govuk-button styles
// The box-shadow that separates the remove link from the list item is hidden in // set styles so they don't get overriden by govuk-button styles
// high contrast mode. Remake using a border instead &,
@media (-ms-high-contrast: active), (forced-colors: active) { &:hover {
& { background: $govuk-blue;
border-left: 2px solid $govuk-blue;
}
} }
&:hover, &:hover {
&:focus {
color: $light-blue-25; color: $light-blue-25;
} }
// The box-shadow that separates the remove link from the list item is hidden in
// high contrast mode. Remake using a border instead
// Also sets text colour to match govuk-button
@media (-ms-high-contrast: active), (forced-colors: active) { @media (-ms-high-contrast: active), (forced-colors: active) {
&,
&:link,
&:active,
&:hover, &:hover,
&:focus { &:focus:not(:active):not(:hover) {
color: CanvasText; border-left: 2px solid $govuk-blue;
color: LinkText;
} }
} }
&:focus { // set styles so they don't get overriden by govuk-button styles
&,
&:focus:not(:active):not(:hover) {
box-shadow: -2px 0 0 0 $black, inset 1px 0 0 0 rgba($white, 0.1);
}
outline: none; // set styles so they don't get overriden by govuk-button styles
background: $govuk-focus-colour; &:focus:not(:active):not(:hover) {
color: $black;
border-color: $black; border-color: $black;
} }
// counter background colours being overridden // show outline to make focus visible when background colours are overridden
@media (-ms-high-contrast: active), (forced-colors: active) { @media (-ms-high-contrast: active), (forced-colors: active) {
&:focus {
// set styles so they don't get overriden by govuk-button styles
&:focus:not(:active):not(:hover) {
outline: 3px solid transparent; outline: 3px solid transparent;
color: CanvasText;
} }
} }
} }
@@ -86,7 +93,7 @@
} }
.govuk-button { .govuk-button--secondary {
margin-left: 3px; margin-left: 3px;
} }

2
app/templates/views/broadcast/preview-areas.html
View File

@@ -31,7 +31,7 @@
{% endif %} {% endif %}
<li class="area-list-item"> <li class="area-list-item">
{{ area.name }} {{ area.name }}
<a class="area-list-item-remove" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}"> <a class="area-list-item-remove govuk-button" data-module="govuk-button" role="button" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">
<svg id="area-list-item-remove__icon" width="12" height="12" viewbox="0 0 12 12" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g> <svg id="area-list-item-remove__icon" width="12" height="12" viewbox="0 0 12 12" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg"> <g>
<title id="area__{{ loop.index }}">Remove {{ area.name }}</title> <title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
<g transform="rotate(45),translate(1, -7.5)"> <g transform="rotate(45),translate(1, -7.5)">