@automattic/jetpack-components 6.1.0 → 6.1.1

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 (14) hide show
  1. package/CHANGELOG.md +6 -2
  2. package/build/components/dot-pager/style.scss +2 -2
  3. package/build/components/global-notices/styles.module.scss +3 -3
  4. package/build/components/icons/style.module.scss +2 -2
  5. package/build/components/navigator-modal/styles.scss +11 -9
  6. package/build/components/selectable-card/_selectable-card.scss +2 -2
  7. package/build/components/swipeable/style.scss +2 -2
  8. package/components/dot-pager/style.scss +2 -2
  9. package/components/global-notices/styles.module.scss +3 -3
  10. package/components/icons/style.module.scss +2 -2
  11. package/components/navigator-modal/styles.scss +11 -9
  12. package/components/selectable-card/_selectable-card.scss +2 -2
  13. package/components/swipeable/style.scss +2 -2
  14. package/package.json +22 -21
package/CHANGELOG.md CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [6.1.1] - 2026-11-02
6
+ ### Changed
7
+ - Update package dependencies. [#53869]
8
+
5
9
  ## [6.1.0] - 2026-10-28
6
10
  ### Added
7
11
  - Add a PeriodSelector component: a dropdown of period presets with optional previous and next buttons. [#54149]
@@ -259,8 +263,7 @@
259
263
  ## [1.11.3] - 2026-05-21
260
264
  ### Changed
261
265
  - Mark ContextualUpgradeTrigger as @deprecated. Use Notice from @wordpress/ui instead. The implementation is unchanged. [#48909]
262
- - Update package dependencies. [#48405]
263
- - Update package dependencies. [#49012]
266
+ - Update package dependencies. [#48405] [#49012]
264
267
 
265
268
  ## [1.11.2] - 2026-05-19
266
269
  ### Changed
@@ -2048,6 +2051,7 @@
2048
2051
  ### Changed
2049
2052
  - Update node version requirement to 14.16.1
2050
2053
 
2054
+ [6.1.1]: https://github.com/Automattic/jetpack-components/compare/6.1.0...6.1.1
2051
2055
  [6.1.0]: https://github.com/Automattic/jetpack-components/compare/6.0.0...6.1.0
2052
2056
  [6.0.0]: https://github.com/Automattic/jetpack-components/compare/5.0.1...6.0.0
2053
2057
  [5.0.1]: https://github.com/Automattic/jetpack-components/compare/5.0.0...5.0.1
package/build/components/dot-pager/style.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/mixins";
2
2
  @use "@automattic/jetpack-base-styles/root-variables";
3
3
 
4
4
  .dot-pager {
@@ -13,7 +13,7 @@
13
13
  opacity: 1;
14
14
  visibility: visible;
15
15
 
16
- @include gb.reduce-motion( "transition" );
16
+ @include mixins.reduce-motion( "transition" );
17
17
  }
18
18
 
19
19
  .dot-pager__controls {
package/build/components/global-notices/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/mixins";
2
2
 
3
3
  .global-notices {
4
4
 
@@ -10,14 +10,14 @@
10
10
  // Modals have 100000, so this needs to be above them
11
11
  z-index: 100001;
12
12
 
13
- @include gb.break-small {
13
+ @include mixins.break-small {
14
14
  width: auto;
15
15
  inset-inline: unset; // left and right
16
16
  inset-block-start: 4rem;
17
17
  inset-inline-end: 1rem;
18
18
  }
19
19
 
20
- @include gb.break-medium {
20
+ @include mixins.break-medium {
21
21
  inset-block-start: 3rem;
22
22
  }
23
23
  }
package/build/components/icons/style.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/colors";
2
2
 
3
3
  .star-icon {
4
4
  fill: #000;
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  .socialIcon {
13
- fill: gb.$gray-700;
13
+ fill: colors.$gray-700;
14
14
 
15
15
  &.bluesky {
16
16
  fill: var(--jetpack-social-logo-color-bluesky);
package/build/components/navigator-modal/styles.scss CHANGED
@@ -1,4 +1,6 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/breakpoints";
2
+ @use "@wordpress/base-styles/colors";
3
+ @use "@wordpress/base-styles/mixins";
2
4
 
3
5
  .components-modal__screen-overlay:has(.jp-navigator-modal) {
4
6
  z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
@@ -9,7 +11,7 @@
9
11
  container-name: navigator-modal;
10
12
  width: 100%;
11
13
 
12
- @include gb.break-medium() {
14
+ @include mixins.break-medium() {
13
15
  max-height: 90%;
14
16
  }
15
17
 
@@ -37,7 +39,7 @@
37
39
  justify-content: space-between;
38
40
  padding: 1.5rem;
39
41
  height: 4.5rem;
40
- border-bottom: 1px solid gb.$gray-200;
42
+ border-bottom: 1px solid colors.$gray-200;
41
43
  flex-shrink: 0;
42
44
 
43
45
  h1 {
@@ -45,7 +47,7 @@
45
47
  font-size: 15px;
46
48
  font-weight: 500;
47
49
  line-height: 24px;
48
- color: gb.$gray-900;
50
+ color: colors.$gray-900;
49
51
  }
50
52
  }
51
53
 
@@ -60,7 +62,7 @@
60
62
  overflow: auto;
61
63
  flex-direction: column;
62
64
 
63
- @container navigator-modal (width >= #{gb.$break-small}) {
65
+ @container navigator-modal (width >= #{breakpoints.$break-small}) {
64
66
  flex-direction: row;
65
67
  }
66
68
  }
@@ -71,11 +73,11 @@
71
73
  flex-direction: column;
72
74
  gap: 1.5rem;
73
75
 
74
- @container navigator-modal (width >= #{gb.$break-small}) {
76
+ @container navigator-modal (width >= #{breakpoints.$break-small}) {
75
77
  flex-basis: 30%;
76
78
  height: 100%;
77
79
  flex-shrink: 0;
78
- border-inline-end: 1px solid gb.$gray-300;
80
+ border-inline-end: 1px solid colors.$gray-300;
79
81
  overflow: auto;
80
82
  }
81
83
  }
@@ -85,14 +87,14 @@
85
87
  height: 100%;
86
88
  flex: 1;
87
89
 
88
- @container navigator-modal (width >= #{gb.$break-small}) {
90
+ @container navigator-modal (width >= #{breakpoints.$break-small}) {
89
91
  overflow: auto;
90
92
  }
91
93
  }
92
94
 
93
95
  &__footer {
94
96
  padding: 1rem 1.5rem;
95
- border-top: 1px solid gb.$gray-300;
97
+ border-top: 1px solid colors.$gray-300;
96
98
  height: 4.5rem;
97
99
  flex-shrink: 0;
98
100
  }
package/build/components/selectable-card/_selectable-card.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/mixins";
2
2
 
3
3
  // Shared by CheckboxCard and RadioCard, which differ only in their control.
4
4
 
@@ -26,7 +26,7 @@
26
26
 
27
27
  &:has(:focus-visible) {
28
28
 
29
- @include gb.outset-ring__focus();
29
+ @include mixins.outset-ring__focus();
30
30
  }
31
31
 
32
32
  @media (prefers-reduced-motion: no-preference) {
package/build/components/swipeable/style.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/mixins";
2
2
 
3
3
  .swipeable__container {
4
4
  width: 100%;
@@ -19,7 +19,7 @@
19
19
  transition: all 0.5s ease-in-out;
20
20
  transition-property: transform, height;
21
21
 
22
- @include gb.reduce-motion( "transition" );
22
+ @include mixins.reduce-motion( "transition" );
23
23
  }
24
24
 
25
25
  .swipeable__page {
package/components/dot-pager/style.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/mixins";
2
2
  @use "@automattic/jetpack-base-styles/root-variables";
3
3
 
4
4
  .dot-pager {
@@ -13,7 +13,7 @@
13
13
  opacity: 1;
14
14
  visibility: visible;
15
15
 
16
- @include gb.reduce-motion( "transition" );
16
+ @include mixins.reduce-motion( "transition" );
17
17
  }
18
18
 
19
19
  .dot-pager__controls {
package/components/global-notices/styles.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/mixins";
2
2
 
3
3
  .global-notices {
4
4
 
@@ -10,14 +10,14 @@
10
10
  // Modals have 100000, so this needs to be above them
11
11
  z-index: 100001;
12
12
 
13
- @include gb.break-small {
13
+ @include mixins.break-small {
14
14
  width: auto;
15
15
  inset-inline: unset; // left and right
16
16
  inset-block-start: 4rem;
17
17
  inset-inline-end: 1rem;
18
18
  }
19
19
 
20
- @include gb.break-medium {
20
+ @include mixins.break-medium {
21
21
  inset-block-start: 3rem;
22
22
  }
23
23
  }
package/components/icons/style.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/colors";
2
2
 
3
3
  .star-icon {
4
4
  fill: #000;
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  .socialIcon {
13
- fill: gb.$gray-700;
13
+ fill: colors.$gray-700;
14
14
 
15
15
  &.bluesky {
16
16
  fill: var(--jetpack-social-logo-color-bluesky);
package/components/navigator-modal/styles.scss CHANGED
@@ -1,4 +1,6 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/breakpoints";
2
+ @use "@wordpress/base-styles/colors";
3
+ @use "@wordpress/base-styles/mixins";
2
4
 
3
5
  .components-modal__screen-overlay:has(.jp-navigator-modal) {
4
6
  z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
@@ -9,7 +11,7 @@
9
11
  container-name: navigator-modal;
10
12
  width: 100%;
11
13
 
12
- @include gb.break-medium() {
14
+ @include mixins.break-medium() {
13
15
  max-height: 90%;
14
16
  }
15
17
 
@@ -37,7 +39,7 @@
37
39
  justify-content: space-between;
38
40
  padding: 1.5rem;
39
41
  height: 4.5rem;
40
- border-bottom: 1px solid gb.$gray-200;
42
+ border-bottom: 1px solid colors.$gray-200;
41
43
  flex-shrink: 0;
42
44
 
43
45
  h1 {
@@ -45,7 +47,7 @@
45
47
  font-size: 15px;
46
48
  font-weight: 500;
47
49
  line-height: 24px;
48
- color: gb.$gray-900;
50
+ color: colors.$gray-900;
49
51
  }
50
52
  }
51
53
 
@@ -60,7 +62,7 @@
60
62
  overflow: auto;
61
63
  flex-direction: column;
62
64
 
63
- @container navigator-modal (width >= #{gb.$break-small}) {
65
+ @container navigator-modal (width >= #{breakpoints.$break-small}) {
64
66
  flex-direction: row;
65
67
  }
66
68
  }
@@ -71,11 +73,11 @@
71
73
  flex-direction: column;
72
74
  gap: 1.5rem;
73
75
 
74
- @container navigator-modal (width >= #{gb.$break-small}) {
76
+ @container navigator-modal (width >= #{breakpoints.$break-small}) {
75
77
  flex-basis: 30%;
76
78
  height: 100%;
77
79
  flex-shrink: 0;
78
- border-inline-end: 1px solid gb.$gray-300;
80
+ border-inline-end: 1px solid colors.$gray-300;
79
81
  overflow: auto;
80
82
  }
81
83
  }
@@ -85,14 +87,14 @@
85
87
  height: 100%;
86
88
  flex: 1;
87
89
 
88
- @container navigator-modal (width >= #{gb.$break-small}) {
90
+ @container navigator-modal (width >= #{breakpoints.$break-small}) {
89
91
  overflow: auto;
90
92
  }
91
93
  }
92
94
 
93
95
  &__footer {
94
96
  padding: 1rem 1.5rem;
95
- border-top: 1px solid gb.$gray-300;
97
+ border-top: 1px solid colors.$gray-300;
96
98
  height: 4.5rem;
97
99
  flex-shrink: 0;
98
100
  }
package/components/selectable-card/_selectable-card.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/mixins";
2
2
 
3
3
  // Shared by CheckboxCard and RadioCard, which differ only in their control.
4
4
 
@@ -26,7 +26,7 @@
26
26
 
27
27
  &:has(:focus-visible) {
28
28
 
29
- @include gb.outset-ring__focus();
29
+ @include mixins.outset-ring__focus();
30
30
  }
31
31
 
32
32
  @media (prefers-reduced-motion: no-preference) {
package/components/swipeable/style.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
1
+ @use "@wordpress/base-styles/mixins";
2
2
 
3
3
  .swipeable__container {
4
4
  width: 100%;
@@ -19,7 +19,7 @@
19
19
  transition: all 0.5s ease-in-out;
20
20
  transition-property: transform, height;
21
21
 
22
- @include gb.reduce-motion( "transition" );
22
+ @include mixins.reduce-motion( "transition" );
23
23
  }
24
24
 
25
25
  .swipeable__page {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "6.1.0",
3
+ "version": "6.1.1",
4
4
  "description": "Jetpack Components Package",
5
5
  "homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
6
6
  "bugs": {
@@ -89,36 +89,36 @@
89
89
  "extends @wordpress/browserslist-config"
90
90
  ],
91
91
  "dependencies": {
92
- "@automattic/jetpack-api": "^2.2.3",
93
- "@automattic/jetpack-boost-score-api": "^1.3.0",
94
- "@automattic/jetpack-script-data": "^0.6.11",
95
- "@automattic/number-formatters": "^1.2.12",
92
+ "@automattic/jetpack-api": "^2.2.4",
93
+ "@automattic/jetpack-boost-score-api": "^1.3.1",
94
+ "@automattic/jetpack-script-data": "^0.6.12",
95
+ "@automattic/number-formatters": "^1.3.0",
96
96
  "@babel/runtime": "^7",
97
97
  "@gravatar-com/hovercards": "0.16.0",
98
- "@wordpress/a11y": "4.57.0",
99
- "@wordpress/admin-ui": "2.12.0",
100
- "@wordpress/browserslist-config": "6.57.0",
101
- "@wordpress/components": "42.0.0",
102
- "@wordpress/compose": "8.10.0",
103
- "@wordpress/data": "10.57.0",
104
- "@wordpress/date": "5.57.0",
105
- "@wordpress/dom": "4.57.0",
106
- "@wordpress/element": "9.0.0",
107
- "@wordpress/i18n": "6.30.0",
108
- "@wordpress/icons": "18.0.0",
109
- "@wordpress/notices": "5.57.0",
110
- "@wordpress/theme": "2.3.0",
111
- "@wordpress/ui": "0.24.0",
98
+ "@wordpress/a11y": "5.0.0",
99
+ "@wordpress/admin-ui": "3.0.0",
100
+ "@wordpress/browserslist-config": "7.0.0",
101
+ "@wordpress/components": "43.0.0",
102
+ "@wordpress/compose": "9.0.0",
103
+ "@wordpress/data": "11.0.0",
104
+ "@wordpress/date": "6.0.0",
105
+ "@wordpress/dom": "5.0.0",
106
+ "@wordpress/element": "10.0.0",
107
+ "@wordpress/i18n": "7.0.0",
108
+ "@wordpress/icons": "19.0.0",
109
+ "@wordpress/notices": "6.0.0",
110
+ "@wordpress/theme": "3.0.0",
111
+ "@wordpress/ui": "0.25.0",
112
112
  "clsx": "2.1.1",
113
113
  "js-sha256": "0.11.1",
114
114
  "prop-types": "^15.7.2",
115
115
  "qrcode.react": "4.2.0",
116
- "social-logos": "^3.4.2",
116
+ "social-logos": "^3.4.3",
117
117
  "uplot": "1.6.31",
118
118
  "uplot-react": "1.1.4"
119
119
  },
120
120
  "devDependencies": {
121
- "@automattic/jetpack-base-styles": "^1.2.20",
121
+ "@automattic/jetpack-base-styles": "^2.0.0",
122
122
  "@babel/core": "7.29.7",
123
123
  "@jest/globals": "30.5.2",
124
124
  "@storybook/addon-docs": "10.6.3",
@@ -130,6 +130,7 @@
130
130
  "@types/react": "19.3.0",
131
131
  "@types/react-dom": "19.3.0",
132
132
  "@typescript/native-preview": "7.0.0-dev.20260707.2",
133
+ "@wordpress/base-styles": "14.0.0",
133
134
  "jest": "30.5.2",
134
135
  "react": "19.3.0",
135
136
  "react-dom": "19.3.0",