@automattic/jetpack-components 0.45.7 → 0.45.8
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
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
### This is a list detailing changes for the Jetpack RNA Components package releases.
|
|
4
4
|
|
|
5
|
+
## [0.45.8] - 2023-12-19
|
|
6
|
+
### Changed
|
|
7
|
+
- Updated package dependencies. [#34694, #34696]
|
|
8
|
+
|
|
5
9
|
## [0.45.7] - 2023-12-13
|
|
6
10
|
### Added
|
|
7
11
|
- Added `className` prop to RecordMeterBar component [#34182]
|
|
@@ -902,6 +906,7 @@
|
|
|
902
906
|
### Changed
|
|
903
907
|
- Update node version requirement to 14.16.1
|
|
904
908
|
|
|
909
|
+
[0.45.8]: https://github.com/Automattic/jetpack-components/compare/0.45.7...0.45.8
|
|
905
910
|
[0.45.7]: https://github.com/Automattic/jetpack-components/compare/0.45.6...0.45.7
|
|
906
911
|
[0.45.6]: https://github.com/Automattic/jetpack-components/compare/0.45.5...0.45.6
|
|
907
912
|
[0.45.5]: https://github.com/Automattic/jetpack-components/compare/0.45.4...0.45.5
|
|
@@ -22,6 +22,9 @@ interface ToggleControlProps {
|
|
|
22
22
|
/** The label for the toggle. */
|
|
23
23
|
label?: React.ReactNode;
|
|
24
24
|
|
|
25
|
+
/** The size of the toggle. */
|
|
26
|
+
size?: 'small' | 'normal';
|
|
27
|
+
|
|
25
28
|
/** A callback function invoked when the toggle is clicked. */
|
|
26
29
|
onChange: ( value: boolean ) => void;
|
|
27
30
|
}
|
|
@@ -33,6 +36,7 @@ const ToggleControl: React.FC< ToggleControlProps > = ( {
|
|
|
33
36
|
help,
|
|
34
37
|
toggling,
|
|
35
38
|
label,
|
|
39
|
+
size = 'normal',
|
|
36
40
|
onChange,
|
|
37
41
|
} ) => {
|
|
38
42
|
const showChecked =
|
|
@@ -55,6 +59,8 @@ const ToggleControl: React.FC< ToggleControlProps > = ( {
|
|
|
55
59
|
checked={ showChecked }
|
|
56
60
|
className={ classNames( styles.toggle, className, {
|
|
57
61
|
[ styles[ 'is-toggling' ] ]: toggling,
|
|
62
|
+
[ styles[ 'is-small' ] ]: size === 'small',
|
|
63
|
+
[ styles[ 'no-label' ] ]: ! label,
|
|
58
64
|
} ) }
|
|
59
65
|
disabled={ disabled }
|
|
60
66
|
help={ help }
|
|
@@ -3,30 +3,41 @@
|
|
|
3
3
|
/// Overrides the @wordpress/components ToggleControl component.
|
|
4
4
|
/// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle
|
|
5
5
|
.toggle {
|
|
6
|
+
--base-width: 8px;
|
|
7
|
+
|
|
8
|
+
&.is-small {
|
|
9
|
+
--base-width: 6px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&.no-label :global(.components-toggle-control__label) {
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
6
16
|
:global {
|
|
7
17
|
.components-form-toggle {
|
|
8
18
|
--wp-admin-theme-color: var( --jp-green-40 );
|
|
9
19
|
|
|
20
|
+
|
|
10
21
|
&__input:focus + .components-form-toggle__track {
|
|
11
22
|
box-shadow: 0 0 0 2px var( --jp-white ), 0 0 0 4px var( --jp-green-50 );
|
|
12
23
|
}
|
|
13
24
|
|
|
14
25
|
.components-form-toggle__track {
|
|
15
|
-
width:
|
|
16
|
-
height:
|
|
26
|
+
width: calc( var(--base-width) * 6 );
|
|
27
|
+
height: calc( var(--base-width) * 3 );
|
|
17
28
|
border-radius: 12px;
|
|
18
29
|
border-width: 2px;
|
|
19
30
|
}
|
|
20
31
|
|
|
21
32
|
.components-form-toggle__thumb {
|
|
22
|
-
width:
|
|
23
|
-
height:
|
|
24
|
-
top:
|
|
25
|
-
left:
|
|
33
|
+
width: calc(var(--base-width) * 2);
|
|
34
|
+
height: calc(var(--base-width) * 2);
|
|
35
|
+
top: calc(var(--base-width) / 2);
|
|
36
|
+
left: calc(var(--base-width) / 2);
|
|
26
37
|
}
|
|
27
38
|
|
|
28
39
|
&.is-checked .components-form-toggle__thumb {
|
|
29
|
-
transform: translateX(
|
|
40
|
+
transform: translateX( calc( var(--base-width) * 3 ) );
|
|
30
41
|
}
|
|
31
42
|
}
|
|
32
43
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/jetpack-components",
|
|
3
|
-
"version": "0.45.
|
|
3
|
+
"version": "0.45.8",
|
|
4
4
|
"description": "Jetpack Components Package",
|
|
5
5
|
"author": "Automattic",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -38,11 +38,11 @@
|
|
|
38
38
|
"@babel/core": "7.23.5",
|
|
39
39
|
"@babel/preset-react": "7.23.3",
|
|
40
40
|
"@jest/globals": "29.4.3",
|
|
41
|
-
"@storybook/addon-actions": "7.
|
|
42
|
-
"@storybook/blocks": "7.
|
|
43
|
-
"@storybook/react": "7.
|
|
44
|
-
"@testing-library/dom": "
|
|
45
|
-
"@testing-library/react": "
|
|
41
|
+
"@storybook/addon-actions": "7.6.5",
|
|
42
|
+
"@storybook/blocks": "7.6.5",
|
|
43
|
+
"@storybook/react": "7.6.5",
|
|
44
|
+
"@testing-library/dom": "9.3.3",
|
|
45
|
+
"@testing-library/react": "14.1.2",
|
|
46
46
|
"@testing-library/user-event": "14.5.1",
|
|
47
47
|
"@types/jest": "29.5.10",
|
|
48
48
|
"@types/qrcode.react": "1.0.4",
|