From adfa635203dfa245bf9771e8bce70212e432be6e Mon Sep 17 00:00:00 2001 From: Issermann Hannah Date: Mon, 28 Nov 2022 10:34:09 +0100 Subject: [PATCH 01/13] Split example in two + add example border --- site/content/docs/5.2/content/tables.md | 261 +++++++++++++++--------- 1 file changed, 162 insertions(+), 99 deletions(-) diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 7de7cb096e..37a214a821 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -641,7 +641,7 @@ Add a [`.form-check` div]({{< docsref "/forms/checks-radios#checks" >}}) within The selection behavior isn't implemented yet. This feature will be delivered with [#410]({{< param repo >}}/issues/410) as an example. {{< /callout >}} -
+
@@ -777,69 +777,67 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ```html -
-
- - - - - - - - - - - - - - - - - - ... - - - - - - - - ... - ... - ... - ... - ... - -
-
- - -
- 		Column headerColumn headerColumn headerColumn header
-
- - -
- 		Cell textCell textCell textCell text
-
- - -
- 		Cell textCell textCell textCell text
-
+ + + + + + + + + + + + + + + + + + + ... + + + + + + + + ... + ... + ... + ... + ... + +
+
+ + +
+ 		Column headerColumn headerColumn headerColumn header
+
+ + +
+ 		Cell textCell textCell textCell text
+
+ + +
+ 		Cell textCell textCell textCell text
``` ### With icons or thumbnails Use SVG to display thumbnails or icons in your table data cell elements. -
+
@@ -863,14 +861,14 @@ Use SVG to display thumbnails or icons in your table data cell elements.
@@ -878,12 +876,12 @@ Use SVG to display thumbnails or icons in your table data cell elements. - + @@ -898,19 +896,19 @@ Use SVG to display thumbnails or icons in your table data cell elements. - + @@ -918,12 +916,12 @@ Use SVG to display thumbnails or icons in your table data cell elements. - + @@ -940,10 +938,10 @@ Use SVG to display thumbnails or icons in your table data cell elements. @@ -963,7 +961,7 @@ Use SVG to display thumbnails or icons in your table data cell elements.
@@ -978,19 +976,71 @@ Use SVG to display thumbnails or icons in your table data cell elements. + +
- - Thumbnail - + + Document + Cell text Cell text Cell text
- +
Cell text Cell text
-
- +
+
- - Thumbnail - + + Document + Cell text Cell text Cell text
- +
-
+
Cell text Cell text
+
+ +```html + + + Document + + + Cell text + +``` +
+ + - + + + + + + + + + + + + + + + + @@ -1001,16 +1051,36 @@ Use SVG to display thumbnails or icons in your table data cell elements. + + + + + + + @@ -1024,22 +1094,15 @@ Use SVG to display thumbnails or icons in your table data cell elements. ```html - ``` -
+
+
+
+ 		Column headerColumn headerColumn headerColumn header
+
+ +
- - Document - + + Thumbnail + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Thumbnail + Cell text
- -
- - Document - + + Thumbnail + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Thumbnail + Cell text - - Thumbnail + + Thumbnail Cell text - - Document - - - Cell text -
From 018c4dfbd412114aeb816c9f50e547e7197465fa Mon Sep 17 00:00:00 2001 From: Issermann Hannah Date: Thu, 1 Dec 2022 17:50:12 +0100 Subject: [PATCH 02/13] Adjust row height for tables containing icons or thumbnails to comply with design --- scss/_tables.scss | 16 ++ scss/_variables.scss | 4 + site/assets/scss/_alerts.scss | 2 +- site/content/docs/5.2/content/tables.md | 191 +++++++----------- site/content/docs/5.2/migration.md | 12 ++ .../shortcodes/ods-incompatibility-alert.html | 2 +- .../shortcodes/ods-recommendation-alert.html | 13 ++ 7 files changed, 121 insertions(+), 119 deletions(-) create mode 100644 site/layouts/shortcodes/ods-recommendation-alert.html diff --git a/scss/_tables.scss b/scss/_tables.scss index 3f80b529fe..d4bcb86173 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -55,6 +55,13 @@ width: $spacer * 2; max-width: $spacer * 2; } + + // Use negative margins on icons in tables to preserve row height + svg, + img { + margin-top: $table-cell-icon-margin-top; + margin-bottom: $table-cell-icon-margin-bottom; + } // End mod } @@ -80,6 +87,15 @@ > :not(caption) > * > * { padding: $table-cell-padding-y-sm $table-cell-padding-x-sm add($table-cell-padding-y-sm, 1px); // Boosted mod } + + // Boosted mod + // Use negative margins on icons in tables to preserve row height + svg, + img { + margin-top: $table-cell-icon-margin-top-sm; + margin-bottom: $table-cell-icon-margin-bottom-sm; + } + // End mod } // Boosted mod: no .table-bordered diff --git a/scss/_variables.scss b/scss/_variables.scss index 614c472217..a83dc3c6cf 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -788,8 +788,12 @@ $mark-bg-dark: $white !default; // Boosted mod // scss-docs-start table-variables $table-cell-padding-y: .875rem !default; $table-cell-padding-x: $spacer * .5 !default; +$table-cell-icon-margin-top: -.688rem !default; // Boosted mod +$table-cell-icon-margin-bottom: -.438rem !default; // Boosted mod $table-cell-padding-y-sm: .5625rem !default; $table-cell-padding-x-sm: $table-cell-padding-x !default; +$table-cell-icon-margin-top-sm: -.563rem !default; // Boosted mod +$table-cell-icon-margin-bottom-sm: -.313rem !default; // Boosted mod $table-cell-vertical-align: top !default; $table-line-height: 1.25 !default; // Boosted mod diff --git a/site/assets/scss/_alerts.scss b/site/assets/scss/_alerts.scss index 2b4076ceb0..18355d5d53 100644 --- a/site/assets/scss/_alerts.scss +++ b/site/assets/scss/_alerts.scss @@ -1,4 +1,4 @@ -.bd-ods-incompatibility-alert { +.bd-ods-alert { .alert-heading ~ p { &:not(:first-of-type) { margin-top: map-get($spacers, 1); diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 37a214a821..fc4903055a 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -14,6 +14,12 @@ Due to the widespread use of `
` elements across third-party widgets like Using the most basic table markup, here's how `.table`-based tables look in Boosted. + +{{< ods-recommendation-alert >}} +In order to get the row height recommended by Orange Design System, please use the `.table-sm` class in addition to `.table`. +You can refer to [small tables]({{< docsref "/content/tables#small-tables" >}}) paragraph. +{{< /ods-recommendation-alert >}} + {{< table class="table" simplified="false" >}} ## Variants @@ -200,6 +206,11 @@ Behind the scenes it looks like this: Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half. + +{{< ods-recommendation-alert >}} +These compact tables are recommended by Orange Design System. +{{< /ods-recommendation-alert >}} + {{< table class="table table-sm" >}} {{< table class="table table-dark table-sm" >}} @@ -835,7 +846,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ### With icons or thumbnails -Use SVG to display thumbnails or icons in your table data cell elements. +Use SVG to display thumbnails or icons in your compact table data cell elements.
@@ -861,14 +872,14 @@ Use SVG to display thumbnails or icons in your table data cell elements.
@@ -876,12 +887,12 @@ Use SVG to display thumbnails or icons in your table data cell elements. - + @@ -896,19 +907,19 @@ Use SVG to display thumbnails or icons in your table data cell elements. - + @@ -916,12 +927,12 @@ Use SVG to display thumbnails or icons in your table data cell elements. - + @@ -938,10 +949,10 @@ Use SVG to display thumbnails or icons in your table data cell elements. @@ -961,7 +972,7 @@ Use SVG to display thumbnails or icons in your table data cell elements.
@@ -976,91 +987,19 @@ Use SVG to display thumbnails or icons in your table data cell elements. - -
- - Document - + + Thumbnail + Cell text Cell text Cell text
- +
Cell text Cell text
-
- +
+
- - Document - + + Thumbnail + Cell text Cell text Cell text
- +
-
+
Cell text Cell text
-
- -```html - - - Document - - - Cell text - -``` -
- - - - - - - - - - - - - - - - - - - - - - - - - @@ -1071,16 +1010,16 @@ Use SVG to display thumbnails or icons in your table data cell elements. @@ -1093,15 +1032,29 @@ Use SVG to display thumbnails or icons in your table data cell elements. ```html - +
+
-
- - 		Column headerColumn headerColumn headerColumn header
-
- - -
- 		- - Thumbnail - - - Cell text - Cell textCell textCell text
-
- - -
- 		- - Thumbnail - - - Cell text - Cell textCell textCell text
-
- -
- - Thumbnail - + + Document + Cell text
- -
- - Thumbnail - + + Document + Cell text - - Thumbnail - - - Cell text -
+ ... + + ... + + ... +
+ + Thumbnail + + + Cell text + + + Document + + + Cell text +
``` +Use SVG to display icons or thumbnails in your table data cell elements. +
@@ -1214,12 +1167,16 @@ Use SVG to display thumbnails or icons in your table data cell elements. ```html - +
- - Yes - - -
+ ... + + ... +
+ + Yes + + +
``` ## Sass diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index 83b7145de0..63bc424ef6 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -26,6 +26,18 @@ If you need more details about the changes, please refer to the [v5.2.3 release] + Review ``` +### CSS and Sass variables + +-
+ New Sass variables: +
    +
  • $table-cell-icon-margin-top
    • +
  • $table-cell-icon-margin-bottom
    • +
  • $table-cell-icon-margin-top-sm
    • +
  • $table-cell-icon-margin-bottom-sm
    • +
+
+ ## v5.2.2
diff --git a/site/layouts/shortcodes/ods-incompatibility-alert.html b/site/layouts/shortcodes/ods-incompatibility-alert.html index b46875c086..46208ebb20 100644 --- a/site/layouts/shortcodes/ods-incompatibility-alert.html +++ b/site/layouts/shortcodes/ods-incompatibility-alert.html @@ -2,7 +2,7 @@ Usage: `ods-incompatibility-alert` */ -}} - ```html @@ -862,190 +864,192 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ### With icons or thumbnails -Use SVG to display thumbnails or icons in your compact table data cell elements. +Use SVG to display icons or thumbnails in your compact table data cell elements (`40px` row height). It will automatically add negative margin to ensure vertical alignment (for icons or thumbnails smaller than `2.5rem`). -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
- - -
- 		Column headerColumn headerColumn headerColumn header
-
- - -
- 		- - Thumbnail - - - Cell text - Cell textCell textCell text
-
- - -
- 		- - Document - - - Cell text - Cell textCell textCell text
-
- - -
- 		- - Thumbnail - - - Cell text - Cell textCell textCell text
-
- - -
- 		- - Document - - - Cell text - Cell textCell textCell text
+
+
+ + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
- - 		- - Document - - - Cell text - Cell textCell textCell text
-
- - -
- 		- - Document - - - Cell text - Cell textCell textCell text
-
- - -
- 		- - Document - - - Cell text - Cell textCell textCell text
-
- - -
- 		- - Document - - - Cell text - Cell textCell textCell text
+ + +
+ +
Column headerColumn headerColumn headerColumn header
+
+ + +
+ 		+ + Thumbnail + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Document + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Thumbnail + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Document + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Document + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Document + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Document + + + Cell text + Cell textCell textCell text
+
+ + +
+ 		+ + Document + + + Cell text + Cell textCell textCell text
+
```html @@ -1072,118 +1076,120 @@ Use SVG to display thumbnails or icons in your compact table data cell elements.
``` -Use SVG to display icons or thumbnails in your table data cell elements. +Use SVG to display icons or thumbnails in your table data cell elements (`50px` row height). It will automatically add negative margin to ensure vertical alignment (for icons or thumbnails smaller than `2.5rem`). -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Column headerColumn headerColumn headerColumn header
Cell text - - Yes - - - - - Yes - - - - - Yes - - -
Cell text - - Yes - - - - - Yes - - - - - Yes - - -
Cell text - - Yes - - - - - Yes - - -
Cell text - - Yes - - - - - Yes - - -
Cell text - - Yes - - -
Cell text - - Yes - - -
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Column headerColumn headerColumn headerColumn header
Cell text + + Yes + + + + + Yes + + + + + Yes + + +
Cell text + + Yes + + + + + Yes + + + + + Yes + + +
Cell text + + Yes + + + + + Yes + + +
Cell text + + Yes + + + + + Yes + + +
Cell text + + Yes + + +
Cell text + + Yes + + +
+
```html diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index a42abb8e10..491c10f9a8 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -67,6 +67,8 @@ If you need more details about the changes, please refer to the [v5.3.0 release]
  • $card-title-color
  • $card-subtitle-color
  • $font-weight-medium
    • +
  • $table-cell-icon-margin-bottom
    • +
  • $table-cell-icon-margin-top
    • @@ -274,10 +276,6 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
  • $input-font-size-sm
  • $step-link-active-outline
  • $table-accent-bg
    • -
  • $table-cell-icon-margin-bottom
    • -
  • $table-cell-icon-margin-bottom-sm
    • -
  • $table-cell-icon-margin-top
    • -
  • $table-cell-icon-margin-top-sm
  • $table-striped-bg
  • $table-striped-bg-factor
  • $table-striped-color
    • From 19e4e63226be28a9496a56c98335aad661394fe9 Mon Sep 17 00:00:00 2001 From: Issermann Hannah Date: Fri, 6 Jan 2023 12:01:04 +0100 Subject: [PATCH 12/13] Add boosted mod --- scss/_variables.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index dad1527fb8..e83ba2d671 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -799,10 +799,10 @@ $mark-bg-dark: $white !default; // Boosted mod // Customizes the `.table` component with basic values, each used across all table variations. // scss-docs-start table-variables -$table-cell-padding-y: .875rem !default; -$table-cell-padding-x: $spacer * .5 !default; -$table-cell-padding-y-sm: .5625rem !default; -$table-cell-padding-x-sm: $table-cell-padding-x !default; +$table-cell-padding-y: .875rem !default; // Boosted mod +$table-cell-padding-x: $spacer * .5 !default; // Boosted mod +$table-cell-padding-y-sm: .5625rem !default; // Boosted mod +$table-cell-padding-x-sm: $table-cell-padding-x !default; // Boosted mod $table-cell-icon-margin-top: -.875rem !default; // Boosted mod $table-cell-icon-margin-bottom: -.625rem !default; // Boosted mod From 9fa99f0e7ccde5ef103fcb43b37f05a6970aa7f5 Mon Sep 17 00:00:00 2001 From: Hannah Issermann Date: Fri, 17 Mar 2023 15:12:02 +0100 Subject: [PATCH 13/13] Change after Franco's review: move icon/thumbnail 1px down (for both table sizes) --- scss/_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index b1fced63d6..4f2f81e0ed 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -869,7 +869,7 @@ $table-cell-padding-x: $spacer * .5 !default; // Boosted mod $table-cell-padding-y-sm: .5625rem !default; // Boosted mod $table-cell-padding-x-sm: $table-cell-padding-x !default; // Boosted mod -$table-cell-icon-margin-top: -.875rem !default; // Boosted mod +$table-cell-icon-margin-top: -.75rem !default; // Boosted mod $table-cell-icon-margin-bottom: -.625rem !default; // Boosted mod $table-cell-vertical-align: top !default; $table-line-height: 1.25 !default; // Boosted mod