@neo4j-ndl/base 1.8.4 → 1.8.6

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Change Log
2
2
 
3
+ ## 1.8.6
4
+
5
+ ### Patch Changes
6
+
7
+ - 7f3fcac: added checked icon mark in switch component for better accessibility
8
+
9
+ ## 1.8.5
10
+
11
+ ### Patch Changes
12
+
13
+ - cff6177: add keyboard navigation example, focusable cells prop for styling and minor table fixes
14
+
3
15
  ## 1.8.4
4
16
 
5
17
  ### Patch Changes
package/lib/NOTICE.txt CHANGED
@@ -85,6 +85,8 @@ Third-party licenses
85
85
  │ │ ├─ URL: https://github.com/gregberge/svgr/tree/main/packages/cli
86
86
  │ │ ├─ VendorName: Greg Bergé
87
87
  │ │ └─ VendorUrl: https://react-svgr.com
88
+ │ ├─ @table-nav/core@npm:0.0.5 (via npm:^0.0.5)
89
+ │ ├─ @table-nav/react@npm:0.0.5 [d75d7] (via npm:^0.0.5 [d75d7])
88
90
  │ ├─ @tanstack/react-table@npm:8.9.3 [a2e03] (via npm:^8.9.3 [a2e03])
89
91
  │ │ ├─ URL: git+https://github.com/tanstack/table.git
90
92
  │ │ ├─ VendorName: Tanner Linsley
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
4
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
5
5
  */
6
6
  exports.__esModule = true;
7
7
  exports.tokens = void 0;
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
4
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
5
5
  */
6
6
  exports.__esModule = true;
7
7
  exports.tokens = void 0;
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
4
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
5
5
  */
6
6
  module.exports = {
7
7
  "transitions": {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
3
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
4
4
  */
5
5
  export const tokens = {
6
6
  "transitions": [
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
3
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
4
4
  */
5
5
  export const tokens = {
6
6
  "transitions": {
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
4
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
5
5
  */
6
6
  module.exports = {
7
7
  "transitions": {
@@ -459,7 +459,7 @@ video {
459
459
  */
460
460
  /**
461
461
  * Do not edit directly
462
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
462
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
463
463
  */
464
464
  :root {
465
465
  --transitions-values-properties-default: all;
@@ -1989,13 +1989,13 @@ a.ndl-btn{
1989
1989
  .ndl-form-item input[type='checkbox'][role='switch']::before {
1990
1990
  inline-size: var(--thumb-size);
1991
1991
  block-size: var(--thumb-size);
1992
- border-radius: 9999px;
1993
1992
 
1994
1993
  transition: transform var(--transitions-stripped),
1995
1994
  box-shadow var(--transitions-stripped);
1996
1995
  content: '';
1997
1996
  grid-area: track;
1998
1997
  transform: translateX(0);
1998
+ border-radius: 9999px;
1999
1999
  background-color: rgb(var(--palette-neutral-bg-weak));
2000
2000
  --tw-shadow: 0px 1px 2px 0px rgba(12, 26, 37, 0.18);
2001
2001
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
@@ -2006,6 +2006,25 @@ a.ndl-btn{
2006
2006
  }
2007
2007
  .ndl-form-item input[type='checkbox'][role='switch']::after {
2008
2008
  content: '';
2009
+ opacity: 0;
2010
+ }
2011
+ .ndl-form-item input[type='checkbox'][role='switch']:checked::after {
2012
+ content: '';
2013
+ opacity: 1;
2014
+ transition: opacity var(--transitions-stripped);
2015
+ background-color: rgb(var(--palette-primary-text));
2016
+ width: 100%;
2017
+ height: 100%;
2018
+ /* Trick to make CSS variables work properly with SVG masks */
2019
+ /* Source: https://stackoverflow.com/a/76006610/3247715 */
2020
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='%23006FD6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
2021
+ mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.25 6.375L5.25 9.375L9.75 2.625' stroke='%23006FD6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
2022
+ -webkit-mask-repeat: no-repeat;
2023
+ mask-repeat: no-repeat;
2024
+ -webkit-mask-size: 12px;
2025
+ mask-size: 12px;
2026
+ -webkit-mask-position: calc(100% - 4px) 5px;
2027
+ mask-position: calc(100% - 4px) 5px;
2009
2028
  }
2010
2029
  .ndl-form-item input[type='checkbox'][role='switch']:checked{
2011
2030
  background-color: rgb(var(--palette-primary-icon));
@@ -3254,8 +3273,19 @@ a.ndl-btn{
3254
3273
  * You should have received a copy of the GNU General Public License
3255
3274
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
3256
3275
  */
3276
+ .ndl-table-focusable-cells .ndl-focusable-cell {
3277
+ outline: none;
3278
+ border: 1px solid transparent;
3279
+ }
3280
+ .ndl-table-focusable-cells .ndl-focusable-cell:focus,
3281
+ .ndl-table-focusable-cells .ndl-focusable-cell:focus-visible {
3282
+ z-index: 2;
3283
+ border-radius: 2px;
3284
+ border: 1px solid rgb(var(--palette-primary-focus));
3285
+ }
3257
3286
  .ndl-table-root {
3258
3287
  /* Root wrapper div styles */
3288
+ isolation: isolate;
3259
3289
  display: flex;
3260
3290
  width: 100%;
3261
3291
  max-width: 100%;
@@ -3302,6 +3332,7 @@ a.ndl-btn{
3302
3332
  position: relative;
3303
3333
  background-color: rgb(var(--palette-neutral-bg-weak));
3304
3334
  overflow-y: auto;
3335
+ border-top-width: 0px;
3305
3336
  }
3306
3337
  /* Table body - Single row, multiple columns */
3307
3338
  .ndl-table-root .ndl-div-table .ndl-table-tbody .ndl-table-tr:not(:last-child):after {
@@ -3345,6 +3376,7 @@ a.ndl-btn{
3345
3376
  height: 48px;
3346
3377
  /* Fixed box shadow that does not match 1:1 the Figma - Agreed with the design team */
3347
3378
  box-shadow: 0 2px 8px rgb(var(--palette-neutral-bg-strongest), 10%);
3379
+ z-index: var(--z-index-alias-overlay);
3348
3380
  }
3349
3381
  /* Table head - Cell - Avoid hover effects on sibling cells when resizing */
3350
3382
  .ndl-table-root .ndl-div-table .ndl-table-thead.ndl-table-is-resizing .ndl-table-th {
@@ -3552,7 +3584,6 @@ a.ndl-btn{
3552
3584
  .ndl-table-root .ndl-table-navigation .ndl-table-pagination-icon{
3553
3585
  height: 1.25rem;
3554
3586
  width: 1.25rem;
3555
- color: rgb(var(--palette-neutral-text-weak));
3556
3587
  }
3557
3588
  .ndl-table-root .ndl-table-navigation .ndl-table-pagination-icon-button{
3558
3589
  position: relative;
@@ -3572,6 +3603,7 @@ a.ndl-btn{
3572
3603
  .ndl-table-root .ndl-table-navigation .ndl-table-pagination-icon-button:hover{
3573
3604
  background-color: rgb(var(--palette-primary-bg-strong));
3574
3605
  --tw-bg-opacity: 0.1;
3606
+ color: rgb(var(--palette-neutral-text-inverse));
3575
3607
  }
3576
3608
  .ndl-table-root .ndl-table-navigation .ndl-table-pagination-numeric-button {
3577
3609
  min-width: 36px;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
3
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
3
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
3
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
4
4
  */
5
5
 
6
6
  export const tokens = {
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 10 Jul 2023 22:42:05 GMT
3
+ // Generated on Wed, 12 Jul 2023 08:32:44 GMT
4
4
 
5
5
  $transitions-values-properties-default: all;
6
6
  $transitions-values-duration-default: 100ms;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 10 Jul 2023 22:42:05 GMT
3
+ * Generated on Wed, 12 Jul 2023 08:32:44 GMT
4
4
  */
5
5
  export const tokens: {
6
6
  transitions: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/base",
3
- "version": "1.8.4",
3
+ "version": "1.8.6",
4
4
  "description": "Neo4j base package for the design system",
5
5
  "author": "Neo4j Inc.",
6
6
  "homepage": "",