@automattic/jetpack-components 0.45.8 → 0.45.9
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.9] - 2024-01-02
|
|
6
|
+
### Changed
|
|
7
|
+
- Updated the design and fixed a11y for Quick Share buttons. [#34754]
|
|
8
|
+
|
|
5
9
|
## [0.45.8] - 2023-12-19
|
|
6
10
|
### Changed
|
|
7
11
|
- Updated package dependencies. [#34694, #34696]
|
|
@@ -906,6 +910,7 @@
|
|
|
906
910
|
### Changed
|
|
907
911
|
- Update node version requirement to 14.16.1
|
|
908
912
|
|
|
913
|
+
[0.45.9]: https://github.com/Automattic/jetpack-components/compare/0.45.8...0.45.9
|
|
909
914
|
[0.45.8]: https://github.com/Automattic/jetpack-components/compare/0.45.7...0.45.8
|
|
910
915
|
[0.45.7]: https://github.com/Automattic/jetpack-components/compare/0.45.6...0.45.7
|
|
911
916
|
[0.45.6]: https://github.com/Automattic/jetpack-components/compare/0.45.5...0.45.6
|
|
@@ -39,6 +39,8 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
|
|
|
39
39
|
popoverAnchorStyle = 'icon',
|
|
40
40
|
forceShow = false,
|
|
41
41
|
wide = false,
|
|
42
|
+
inline = true,
|
|
43
|
+
shift = false,
|
|
42
44
|
} ) => {
|
|
43
45
|
const POPOVER_HELPER_WIDTH = 124;
|
|
44
46
|
const [ isVisible, setIsVisible ] = useState( false );
|
|
@@ -57,7 +59,8 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
|
|
|
57
59
|
focusOnMount: 'container' as const,
|
|
58
60
|
onClose: hideTooltip,
|
|
59
61
|
className: 'icon-tooltip-container',
|
|
60
|
-
inline
|
|
62
|
+
inline,
|
|
63
|
+
shift,
|
|
61
64
|
};
|
|
62
65
|
|
|
63
66
|
const isAnchorWrapper = popoverAnchorStyle === 'wrapper';
|
|
@@ -76,7 +79,6 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
|
|
|
76
79
|
<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
|
|
77
80
|
</Button>
|
|
78
81
|
) }
|
|
79
|
-
|
|
80
82
|
<div
|
|
81
83
|
className={ classNames( 'icon-tooltip-helper', { 'is-wide': wide } ) }
|
|
82
84
|
style={ iconShiftBySize }
|
|
@@ -53,15 +53,6 @@ $arrow-color: var( --jp-gray );
|
|
|
53
53
|
* Fix arrow position for legacy position option - section end
|
|
54
54
|
*/
|
|
55
55
|
|
|
56
|
-
.components-popover__content {
|
|
57
|
-
padding: 24px;
|
|
58
|
-
width: 304px;
|
|
59
|
-
white-space: normal;
|
|
60
|
-
border-radius: 4px;
|
|
61
|
-
outline: none;
|
|
62
|
-
border: 1px solid $arrow-color;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
56
|
&.is-wide .components-popover__content {
|
|
66
57
|
width: 440px;
|
|
67
58
|
}
|
|
@@ -91,6 +82,18 @@ $arrow-color: var( --jp-gray );
|
|
|
91
82
|
.icon-tooltip-container {
|
|
92
83
|
// Recover events
|
|
93
84
|
pointer-events: all;
|
|
85
|
+
|
|
86
|
+
// __content styles here covers both the inline and portal modes
|
|
87
|
+
.components-popover__content {
|
|
88
|
+
padding: 24px;
|
|
89
|
+
width: 304px;
|
|
90
|
+
white-space: normal;
|
|
91
|
+
border-radius: 4px;
|
|
92
|
+
outline: none;
|
|
93
|
+
border: 1px solid $arrow-color;
|
|
94
|
+
max-width: 90vw;
|
|
95
|
+
margin: 0 10px;
|
|
96
|
+
}
|
|
94
97
|
}
|
|
95
98
|
|
|
96
99
|
.icon-tooltip-title {
|
|
@@ -73,4 +73,14 @@ export type IconTooltipProps = {
|
|
|
73
73
|
* Uses a wider content area when enabled.
|
|
74
74
|
*/
|
|
75
75
|
wide?: boolean;
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Whether to render the popover inline or as a portal.
|
|
79
|
+
*/
|
|
80
|
+
inline?: boolean;
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Enables the Popover to shift in order to stay in view when meeting the viewport edges.
|
|
84
|
+
*/
|
|
85
|
+
shift?: boolean;
|
|
76
86
|
};
|