fix(tables): preserve table row heights with icons and thumbnails #1674

hannahiss · 2022-12-01T17:04:41Z

Related issues

Description

Table lines with icons or thumbnails of 30px x 30px should have a 40px height for standard tables (having .table-sm class) and 50px for large tables (having only .table class).

Motivation & Context

After a design review, it has been concluded that:

there are two sizes of table rows : standard (40px) and large (50px) in a design point of view
the row heights should be preserved even when containing icons or thumbnaisl (having a 30 x 30 size)

So, the action to do are:

ODS examples should be reviewed to comply with these elements (Franco's actions)
Boosted code should be adjusted to comply with these elements:
- implement new shortcode to add blue Boosted callout (info)
- rename Boosted class bd-ods-incompatibility-alert to bd-ods-alert because it is no longer used only for ODS incompatibilities, but also for recommendations
- add Boosted info callout at the top of tables page to notice developpers that recommended tables should have the class .table-sm
- add Boosted info callout in paragraph "Small tables" to notice developpers that this is the recommended tables
- add negative margins to img and svg to preserve row heights
- update migration guide to notice new variables Sass
- add class bd-example when missing

Types of change

Bug fix (non-breaking which fixes an issues)
New feature (non-breaking change which adds functionality)
Refactoring (non-breaking change)
Breaking change (fix or feature that would change existing functionality)

Live previews

https://deploy-preview-1674--boosted.netlify.app/docs/content/tables/#with-icons-or-thumbnails

Checklist

I have read the contributing guidelines
My code follows the code style of the project (using npm run lint)
My change introduces changes to the documentation
My change introduces changes to the migration guide
I have updated the documentation accordingly
I have added tests to cover my changes
All new and existing tests passed

… with design

netlify · 2022-12-01T17:06:41Z

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	`f928e8e`
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/642d18c6015ce700080084e6
😎 Deploy Preview	https://deploy-preview-1674--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

louismaximepiton

Few comments about the actual PR !

site/layouts/shortcodes/ods-recommendation-alert.html

site/content/docs/5.2/content/tables.md

scss/_tables.scss

scss/_variables.scss

louismaximepiton

Some few things to tackle and we're good to go.

site/content/docs/5.2/content/tables.md

scss/_variables.scss

scss/_tables.scss

# Conflicts: # site/content/docs/5.2/migration.md

# Conflicts: # .bundlewatch.config.json

…missing bd-example. Reorganize variables.

sonarcloud · 2023-01-06T11:02:17Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

louismaximepiton

LGTM 🚀

# Conflicts: # site/content/docs/5.3/migration.md

hannahiss · 2023-03-06T10:30:20Z

PR is ok, updated and approved, waiting for design review (card "Dev. Design review >> Tables: Row height with icons and/or thumbnails")

Franco-Riccitelli · 2023-03-15T10:49:37Z

Design review of the table sizes

The sizes of the table row heights at 40px and 50px are all good.
Vertical positioning of the text in the tables rows are also good.

Changes: For the 40px high rows - the vertical positioning of the icons and thumbnails in the table need to move down 1px.

…table sizes)

Franco-Riccitelli · 2023-03-24T13:46:12Z

The vertical positioning of the icons and thumbnails in the table looks good. No more issues.

julien-deramond · 2023-04-05T06:17:01Z

scss/_tables.scss

+  // Use negative margins on icons in tables to preserve row height
+  svg,
+  img {
+    margin-top: $table-cell-icon-margin-top;


TBH I was a bit afraid when I read it on how the rendering would be with bigger images. But one can disable the default behavior by doing this so I suppose it's OK: <svg class="... my-0" width="5rem" height="5rem" .../>. Here's the rendering FYI:

sonarcloud · 2023-04-05T06:45:02Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

hannahiss added 4 commits November 28, 2022 10:34

Split example in two + add example border

adfa635

Merge branch 'main' into main-his-tables-icons-thumbnails

d51004c

Merge branch 'main' into main-his-tables-icons-thumbnails

e9ef51c

Adjust row height for tables containing icons or thumbnails to comply…

018c4df

… with design

hannahiss marked this pull request as draft December 2, 2022 08:17

hannahiss marked this pull request as ready for review December 2, 2022 08:28

isabellechanclou mentioned this pull request Dec 2, 2022

docs: add design callouts in all the documentation when incompatibility with ODS #1614

Closed

7 tasks

julien-deramond added v5 fix labels Dec 5, 2022

louismaximepiton requested changes Dec 8, 2022

View reviewed changes

julien-deramond added the upcoming design review label Dec 12, 2022

This comment was marked as resolved.

Sign in to view

hannahiss mentioned this pull request Dec 15, 2022

Add new info callout for ODS recommendation #1709

Merged

7 tasks

hannahiss added 2 commits December 15, 2022 15:21

Remove info callout for ODS recommendation (see PR #1709)

ac4000b

Remove info callout for ODS recommendation (see PR #1709)

89de3d2

hannahiss mentioned this pull request Dec 15, 2022

Move table-responsive class from <table> tag to <div> tag above #1710

Merged

7 tasks

Remove changes on table-responsive from this PR (See #1710)

4bc1777

hannahiss requested a review from louismaximepiton December 15, 2022 15:40

louismaximepiton requested changes Dec 15, 2022

View reviewed changes

hannahiss and others added 10 commits December 16, 2022 16:04

Merge branch 'main' into main-his-tables-icons-thumbnails

148add9

# Conflicts: # site/content/docs/5.2/migration.md

Fix indentation

254e71b

Merge branch 'main' into main-his-tables-icons-thumbnails

7cb670d

Merge branch 'main' into main-his-tables-icons-thumbnails

58624cd

Fix bundlewatch

0481299

Fix rem values

fc45a13

Reorder items alphabetically in migration guide note

581de59

Add break line to split normal and sm vars

559709b

Merge branch 'main' into main-his-tables-icons-thumbnails

48efe1c

# Conflicts: # .bundlewatch.config.json

Same margins for sm and standard tables. update migration guide. Add …

25d4a11

…missing bd-example. Reorganize variables.

Add boosted mod

19e4e63

louismaximepiton approved these changes Jan 6, 2023

View reviewed changes

Merge branch 'main' into main-his-tables-icons-thumbnails

0e05a1f

# Conflicts: # site/content/docs/5.3/migration.md

julien-deramond added ready for design review and removed upcoming design review labels Mar 7, 2023

Merge branch 'main' into main-his-tables-icons-thumbnails

4721637

hannahiss added 2 commits March 17, 2023 14:45

Merge branch 'main' into main-his-tables-icons-thumbnails

e03ad3c

Change after Franco's review: move icon/thumbnail 1px down (for both …

9fa99f0

…table sizes)

hannahiss added passed design review and removed ready for design review labels Mar 24, 2023

julien-deramond added 2 commits March 30, 2023 09:51

Merge branch 'main' into main-his-tables-icons-thumbnails

18ec3ed

Merge branch 'main' into main-his-tables-icons-thumbnails

53d6b59

julien-deramond approved these changes Apr 5, 2023

View reviewed changes

Merge branch 'main' into main-his-tables-icons-thumbnails

f928e8e

julien-deramond changed the title ~~Preserve table row heights with icons and thumbnails~~ fix(tables): preserve table row heights with icons and thumbnails Apr 5, 2023

julien-deramond merged commit 970fcaa into main Apr 5, 2023

julien-deramond deleted the main-his-tables-icons-thumbnails branch April 5, 2023 06:49

julien-deramond mentioned this pull request Apr 5, 2023

v5.3.0 Ship List #1762

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tables): preserve table row heights with icons and thumbnails #1674

fix(tables): preserve table row heights with icons and thumbnails #1674

hannahiss commented Dec 1, 2022 •

edited by louismaximepiton

Loading

netlify bot commented Dec 1, 2022 •

edited

Loading

louismaximepiton left a comment

This comment was marked as resolved.

louismaximepiton left a comment

sonarcloud bot commented Jan 6, 2023

louismaximepiton left a comment

hannahiss commented Mar 6, 2023

Franco-Riccitelli commented Mar 15, 2023

Franco-Riccitelli commented Mar 24, 2023

julien-deramond Apr 5, 2023

sonarcloud bot commented Apr 5, 2023

fix(tables): preserve table row heights with icons and thumbnails #1674

fix(tables): preserve table row heights with icons and thumbnails #1674

Conversation

hannahiss commented Dec 1, 2022 • edited by louismaximepiton Loading

Related issues

Description

Motivation & Context

Types of change

Live previews

Checklist

netlify bot commented Dec 1, 2022 • edited Loading

✅ Deploy Preview for boosted ready!

louismaximepiton left a comment

Choose a reason for hiding this comment

This comment was marked as resolved.

louismaximepiton left a comment

Choose a reason for hiding this comment

sonarcloud bot commented Jan 6, 2023

louismaximepiton left a comment

Choose a reason for hiding this comment

hannahiss commented Mar 6, 2023

Franco-Riccitelli commented Mar 15, 2023

Franco-Riccitelli commented Mar 24, 2023

julien-deramond Apr 5, 2023

Choose a reason for hiding this comment

sonarcloud bot commented Apr 5, 2023

hannahiss commented Dec 1, 2022 •

edited by louismaximepiton

Loading

netlify bot commented Dec 1, 2022 •

edited

Loading