@automattic/jetpack-components 0.45.7 → 0.45.9

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.45.9] - 2024-01-02
+### Changed
+- Updated the design and fixed a11y for Quick Share buttons. [#34754]
+
+## [0.45.8] - 2023-12-19
+### Changed
+- Updated package dependencies. [#34694, #34696]
+
 ## [0.45.7] - 2023-12-13
 ### Added
 - Added `className` prop to RecordMeterBar component [#34182]
@@ -902,6 +910,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.45.9]: https://github.com/Automattic/jetpack-components/compare/0.45.8...0.45.9
+[0.45.8]: https://github.com/Automattic/jetpack-components/compare/0.45.7...0.45.8
 [0.45.7]: https://github.com/Automattic/jetpack-components/compare/0.45.6...0.45.7
 [0.45.6]: https://github.com/Automattic/jetpack-components/compare/0.45.5...0.45.6
 [0.45.5]: https://github.com/Automattic/jetpack-components/compare/0.45.4...0.45.5

package/components/icon-tooltip/index.tsx

@@ -39,6 +39,8 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	popoverAnchorStyle = 'icon',
 	forceShow = false,
 	wide = false,
+	inline = true,
+	shift = false,
 } ) => {
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -57,7 +59,8 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 		focusOnMount: 'container' as const,
 		onClose: hideTooltip,
 		className: 'icon-tooltip-container',
-		inline: true,
+		inline,
+		shift,
 	};
 
 	const isAnchorWrapper = popoverAnchorStyle === 'wrapper';
@@ -76,7 +79,6 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 					<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
 				</Button>
 			) }
-
 			<div
 				className={ classNames( 'icon-tooltip-helper', { 'is-wide': wide } ) }
 				style={ iconShiftBySize }

package/components/icon-tooltip/style.scss

@@ -53,15 +53,6 @@ $arrow-color: var( --jp-gray );
 	* Fix arrow position for legacy position option - section end
 	*/
 
-	.components-popover__content {
-		padding: 24px;
-		width: 304px;
-		white-space: normal;
-		border-radius: 4px;
-		outline: none;
-		border: 1px solid $arrow-color;
-	}
-
 	&.is-wide .components-popover__content {
 		width: 440px;
 	}
@@ -91,6 +82,18 @@ $arrow-color: var( --jp-gray );
 .icon-tooltip-container {
 	// Recover events
 	pointer-events: all;
+
+	// __content styles here covers both the inline and portal modes
+	.components-popover__content {
+		padding: 24px;
+		width: 304px;
+		white-space: normal;
+		border-radius: 4px;
+		outline: none;
+		border: 1px solid $arrow-color;
+		max-width: 90vw;
+		margin: 0 10px;
+	}
 }
 
 .icon-tooltip-title {

package/components/icon-tooltip/types.ts

@@ -73,4 +73,14 @@ export type IconTooltipProps = {
 	 * Uses a wider content area when enabled.
 	 */
 	wide?: boolean;
+
+	/**
+	 * Whether to render the popover inline or as a portal.
+	 */
+	inline?: boolean;
+
+	/**
+	 * Enables the Popover to shift in order to stay in view when meeting the viewport edges.
+	 */
+	shift?: boolean;
 };

package/components/toggle-control/index.tsx

@@ -22,6 +22,9 @@ interface ToggleControlProps {
 	/** The label for the toggle. */
 	label?: React.ReactNode;
 
+	/** The size of the toggle. */
+	size?: 'small' | 'normal';
+
 	/** A callback function invoked when the toggle is clicked. */
 	onChange: ( value: boolean ) => void;
 }
@@ -33,6 +36,7 @@ const ToggleControl: React.FC< ToggleControlProps > = ( {
 	help,
 	toggling,
 	label,
+	size = 'normal',
 	onChange,
 } ) => {
 	const showChecked =
@@ -55,6 +59,8 @@ const ToggleControl: React.FC< ToggleControlProps > = ( {
 			checked={ showChecked }
 			className={ classNames( styles.toggle, className, {
 				[ styles[ 'is-toggling' ] ]: toggling,
+				[ styles[ 'is-small' ] ]: size === 'small',
+				[ styles[ 'no-label' ] ]: ! label,
 			} ) }
 			disabled={ disabled }
 			help={ help }

package/components/toggle-control/styles.module.scss

@@ -3,30 +3,41 @@
 /// Overrides the @wordpress/components ToggleControl component.
 /// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle
 .toggle {
+	--base-width: 8px;
+
+	&.is-small {
+		--base-width: 6px;
+	}
+
+	&.no-label :global(.components-toggle-control__label) {
+			display: none;
+	}
+
 	:global {
 		.components-form-toggle {
 			--wp-admin-theme-color: var( --jp-green-40 );
 
+
 			&__input:focus + .components-form-toggle__track {
 				box-shadow: 0 0 0 2px var( --jp-white ), 0 0 0 4px var( --jp-green-50 );
 			}
 
 			.components-form-toggle__track {
-				width: 48px;
-				height: 24px;
+				width: calc( var(--base-width) * 6 );
+				height: calc( var(--base-width) * 3 );
 				border-radius: 12px;
 				border-width: 2px;
 			}
 
 			.components-form-toggle__thumb {
-				width: 16px;
-				height: 16px;
-				top: 4px;
-				left: 4px;
+				width: calc(var(--base-width) * 2);
+				height: calc(var(--base-width) * 2);
+				top: calc(var(--base-width) / 2);
+				left: calc(var(--base-width) / 2);
 			}
 
 			&.is-checked .components-form-toggle__thumb {
-				transform: translateX( 24px );
+				transform: translateX( calc( var(--base-width) * 3 ) );
 			}
 		}
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.45.7",
+	"version": "0.45.9",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -38,11 +38,11 @@
 		"@babel/core": "7.23.5",
 		"@babel/preset-react": "7.23.3",
 		"@jest/globals": "29.4.3",
-		"@storybook/addon-actions": "7.4.6",
-		"@storybook/blocks": "7.4.6",
-		"@storybook/react": "7.4.6",
-		"@testing-library/dom": "8.20.1",
-		"@testing-library/react": "13.4.0",
+		"@storybook/addon-actions": "7.6.5",
+		"@storybook/blocks": "7.6.5",
+		"@storybook/react": "7.6.5",
+		"@testing-library/dom": "9.3.3",
+		"@testing-library/react": "14.1.2",
 		"@testing-library/user-event": "14.5.1",
 		"@types/jest": "29.5.10",
 		"@types/qrcode.react": "1.0.4",