Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update table styles so nhsuk-table has bottom margin #1005

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Update table styles so nhsuk-table has bottom margin #1005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
145279e
Update table styles so nhsuk-table has bottom margin
edwardhorsford Sep 6, 2024
2492bae
Update changelog
edwardhorsford Sep 6, 2024
c7473ad
Make sure table class applies in all cases
edwardhorsford Sep 23, 2024
9ef85d5
Add missing space
edwardhorsford Sep 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

- Fix Sass deprecation on `mix` function (passing a number without unit) ([PR 995](https://github.com/nhsuk/nhsuk-frontend/pull/995))
- Add nhsukAttributes macro, copied from GOV.UK ([PR 998](https://github.com/nhsuk/nhsuk-frontend/pull/998))
- Update table styles so tables always have bottom margin ([PR 1005](https://github.com/nhsuk/nhsuk-frontend/pull/1005))

## 8.3.0 - 24 July 2024

Expand Down
14 changes: 11 additions & 3 deletions packages/components/tables/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,16 @@
}
}

.nhsuk-table {
@include nhsuk-font($size: 19);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the reason for adding this? Could this perhaps mess up any specific type styling that people may have added in their tables?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It mirrors what GOV.UK do - providing some default sizing. I'd hope it wouldn't override any specific sizing as it should be less specific than any added by users. Not 100% confident about that though.


width: 100%;
@include nhsuk-responsive-margin(7, "bottom");

border-spacing: 0;
border-collapse: collapse;
}

/* Table row hover
========================================================================== */

Expand Down Expand Up @@ -72,8 +82,6 @@
*/

.nhsuk-table-responsive {
margin-bottom: 0;
width: 100%;

thead {
@include visually-hidden; /* [1] */
Expand All @@ -85,7 +93,7 @@

.nhsuk-table__body {
.nhsuk-table-responsive__heading {
font-weight: $nhsuk-font-bold;
@include nhsuk-typography-weight-bold;
padding-right: nhsuk-spacing(3);
text-align: left; /* [8] */

Expand Down
2 changes: 1 addition & 1 deletion packages/components/tables/template.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<h{{ headingLevel }} class="nhsuk-table__heading-tab">{{ params.heading | safe }}</h{{ headingLevel }}>
{%- endif %}
{%- endif %}
<table {%- if params.responsive %} role="table"{% endif %} class="nhsuk-table{%- if params.responsive %}-responsive{% endif %}
<table {%- if params.responsive %} role="table"{% endif %} class="nhsuk-table {%- if params.responsive %} nhsuk-table-responsive{% endif %}
{%- if params.tableClasses %} {{ params.tableClasses }}{% endif %}"
{{- nhsukAttributes(params.attributes) }}>
{%- if params.caption %}
Expand Down