@nl-rvo/css-table 1.3.2 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/design-tokens.json +22 -0
  3. package/dist/index.css +21 -0
  4. package/dist/index.min.css +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/package.json +1 -1
  7. package/src/index.scss +9 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # `@nl-rvo/css-table`
2
2
 
3
+ ## 1.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6e7620a: Add 'overflow-wrap: break-word' to table cells.
8
+
9
+ ## 1.4.0
10
+
11
+ ### Minor Changes
12
+
13
+ - d9727b9: Table columns now have a optional size field allowing for default set widths
14
+
3
15
  ## 1.3.2
4
16
 
5
17
  ### Patch Changes
package/design-tokens.json CHANGED
@@ -75,6 +75,28 @@
75
75
  }
76
76
  }
77
77
  }
78
+ },
79
+ "size": {
80
+ "xs": {
81
+ "syntax": "<length>",
82
+ "inherits": true
83
+ },
84
+ "sm": {
85
+ "syntax": "<length>",
86
+ "inherits": true
87
+ },
88
+ "md": {
89
+ "syntax": "<length>",
90
+ "inherits": true
91
+ },
92
+ "lg": {
93
+ "syntax": "<length>",
94
+ "inherits": true
95
+ },
96
+ "xl": {
97
+ "syntax": "<length>",
98
+ "inherits": true
99
+ }
78
100
  }
79
101
  },
80
102
  "cell": {
package/dist/index.css CHANGED
@@ -77,6 +77,7 @@
77
77
  border-bottom-color: var(--rvo-table-cell-border-bottom-color);
78
78
  border-bottom-style: var(--rvo-table-cell-border-bottom-style);
79
79
  border-bottom-width: var(--rvo-table-cell-border-bottom-width);
80
+ overflow-wrap: break-word;
80
81
  padding-block-end: var(--rvo-table-cell-padding-block-end);
81
82
  padding-block-start: var(--rvo-table-cell-padding-block-start);
82
83
  padding-inline-end: var(--rvo-table-cell-padding-inline-end);
@@ -86,4 +87,24 @@
86
87
  .rvo-table-cell--numeric,
87
88
  .rvo-table-header--numeric {
88
89
  text-align: end;
90
+ }
91
+
92
+ .rvo-table-header--xs {
93
+ width: var(--rvo-table-header-size-xs);
94
+ }
95
+
96
+ .rvo-table-header--sm {
97
+ width: var(--rvo-table-header-size-sm);
98
+ }
99
+
100
+ .rvo-table-header--md {
101
+ width: var(--rvo-table-header-size-md);
102
+ }
103
+
104
+ .rvo-table-header--lg {
105
+ width: var(--rvo-table-header-size-lg);
106
+ }
107
+
108
+ .rvo-table-header--xl {
109
+ width: var(--rvo-table-header-size-xl);
89
110
  }
package/dist/index.min.css CHANGED
@@ -1 +1 @@
1
- .rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;display:flex;gap:var(--rvo-space-sm)}.rvo-table-header__sortable-container--numeric{justify-content:end}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}
1
+ .rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;display:flex;gap:var(--rvo-space-sm)}.rvo-table-header__sortable-container--numeric{justify-content:end}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);overflow-wrap:break-word;padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}.rvo-table-header--xs{width:var(--rvo-table-header-size-xs)}.rvo-table-header--sm{width:var(--rvo-table-header-size-sm)}.rvo-table-header--md{width:var(--rvo-table-header-size-md)}.rvo-table-header--lg{width:var(--rvo-table-header-size-lg)}.rvo-table-header--xl{width:var(--rvo-table-header-size-xl)}
package/dist/index.mjs CHANGED
@@ -1 +1 @@
1
- export default ".rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;display:flex;gap:var(--rvo-space-sm)}.rvo-table-header__sortable-container--numeric{justify-content:end}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}";
1
+ export default ".rvo-table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%}.rvo-table--responsive{overflow-x:auto;width:100%}.rvo-caption{font-size:var(--rvo-caption-font-size);padding-block-end:var(--rvo-caption-padding-block-end);text-align:start}.rvo-table-header{background-color:var(--rvo-table-header-background-color);border-bottom:var(--rvo-table-header-border-bottom-width) var(--rvo-table-header-border-bottom-style) var(--rvo-table-header-border-bottom-color);color:var(--rvo-table-header-color);font-weight:var(--rvo-table-header-font-weight);padding-block-end:var(--rvo-table-header-padding-block-end);padding-block-start:var(--rvo-table-header-padding-block-start);padding-inline-end:var(--rvo-table-header-padding-inline-end);padding-inline-start:var(--rvo-table-header-padding-inline-start);text-align:start}.rvo-table-header__sortable-container{align-items:center;display:flex;gap:var(--rvo-space-sm)}.rvo-table-header__sortable-container--numeric{justify-content:end}.rvo-table-header__sortable-button{min-inline-size:0;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0}.rvo--table-header__sorting-icon{display:flex;height:var(--rvo-icon-md-height);width:var(--rvo-icon-md-width)}.rvo-table-header--active-sort{text-decoration:var(--_rvo-table-header-color,underline);text-underline-offset:30%}.rvo-table-header--sortable:hover{background-color:var(--rvo-table-header-sortable-hover-background-color);cursor:pointer}.rvo-table-header--sortable:focus{background-color:var(--rvo-table-header-sortable-focus-background-color)}.rvo-table-cell{border-bottom:var(--rvo-table-cell-border-bottom-width) var(--rvo-table-cell-border-bottom-style) var(--rvo-table-cell-border-bottom-color);overflow-wrap:break-word;padding-block-end:var(--rvo-table-cell-padding-block-end);padding-block-start:var(--rvo-table-cell-padding-block-start);padding-inline-end:var(--rvo-table-cell-padding-inline-end);padding-inline-start:var(--rvo-table-cell-padding-inline-start)}.rvo-table-cell--numeric,.rvo-table-header--numeric{text-align:end}.rvo-table-header--xs{width:var(--rvo-table-header-size-xs)}.rvo-table-header--sm{width:var(--rvo-table-header-size-sm)}.rvo-table-header--md{width:var(--rvo-table-header-size-md)}.rvo-table-header--lg{width:var(--rvo-table-header-size-lg)}.rvo-table-header--xl{width:var(--rvo-table-header-size-xl)}";
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.3.2",
2
+ "version": "1.5.0",
3
3
  "author": "Community for NL Design System",
4
4
  "license": "CC0-1.0",
5
5
  "name": "@nl-rvo/css-table",
package/src/index.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  * @license CC0-1.0
3
3
  * Copyright (c) 2021 Community for NL Design System
4
4
  */
5
+ @use "../../../packages/component-library-css/src/collections/sizes.scss" as *;
6
+
5
7
  .rvo-table {
6
8
  border-collapse: collapse;
7
9
  border-spacing: 0;
@@ -76,6 +78,7 @@
76
78
  border-bottom-color: var(--rvo-table-cell-border-bottom-color);
77
79
  border-bottom-style: var(--rvo-table-cell-border-bottom-style);
78
80
  border-bottom-width: var(--rvo-table-cell-border-bottom-width);
81
+ overflow-wrap: break-word;
79
82
  padding-block-end: var(--rvo-table-cell-padding-block-end);
80
83
  padding-block-start: var(--rvo-table-cell-padding-block-start);
81
84
  padding-inline-end: var(--rvo-table-cell-padding-inline-end);
@@ -86,3 +89,9 @@
86
89
  .rvo-table-header--numeric {
87
90
  text-align: end;
88
91
  }
92
+
93
+ @each $size in $rvo-sizes {
94
+ .rvo-table-header--#{$size} {
95
+ width: var(--rvo-table-header-size-#{$size});
96
+ }
97
+ }