Media plan storage indicator: add accessible tooltip (#45190)

* Media plan storage indicator: add accessible tooltip

* Offset tooltip arrow from right by two times its own width

* Update tooltip state variable name

client/assets/stylesheets/shared/functions/_z-index.scss

@@ -171,6 +171,7 @@ $z-layers: (
 		'.dialog__backdrop': 100200,
 		'.wplink__dialog.dialog.card': 100200,
 		'.web-preview': 100200,
+		'.plan-storage__tooltip': 100300,
 		'.popover.gallery__order-popover': 100300,
 		'popover.is-dialog-visible': 100300,
 		'.popover.info-tooltip__container': 100300,

client/blocks/plan-storage/index.jsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { localize } from 'i18n-calypso';
 
 /**
  * Internal dependencies
@@ -17,6 +18,7 @@ import canCurrentUser from 'state/selectors/can-current-user';
 import { planHasFeature, isBusinessPlan, isEcommercePlan } from 'lib/plans';
 import { FEATURE_UNLIMITED_STORAGE } from 'lib/plans/constants';
 import PlanStorageBar from './bar';
+import Tooltip from './tooltip';
 
 /**
  * Style dependencies
@@ -42,6 +44,7 @@ export class PlanStorage extends Component {
 			siteId,
 			sitePlanSlug,
 			siteSlug,
+			translate,
 		} = this.props;
 
 		if ( ( jetpackSite && ! atomicSite ) || ! canViewBar || ! sitePlanSlug ) {
@@ -72,9 +75,14 @@ export class PlanStorage extends Component {
 
 		if ( displayUpgradeLink ) {
 			return (
-				<a className={ classNames( className, 'plan-storage' ) } href={ `/plans/${ siteSlug }` }>
-					{ planStorageComponents }
-				</a>
+				<Tooltip
+					title={ translate( 'Upgrade your plan to increase your storage space.' ) }
+					className="plan-storage__tooltip"
+				>
+					<a className={ classNames( className, 'plan-storage' ) } href={ `/plans/${ siteSlug }` }>
+						{ planStorageComponents }
+					</a>
+				</Tooltip>
 			);
 		}
 		return (
@@ -94,4 +102,4 @@ export default connect( ( state, ownProps ) => {
 		canUserUpgrade: canCurrentUser( state, siteId, 'manage_options' ),
 		canViewBar: canCurrentUser( state, siteId, 'publish_posts' ),
 	};
-} )( PlanStorage );
+} )( localize( PlanStorage ) );

client/blocks/plan-storage/style.scss

@@ -39,3 +39,34 @@
 .plan-storage__bar.is-alert .progress-bar__progress {
 	background-color: var( --color-error );
 }
+
+.plan-storage__tooltip {
+	$border-width: 1px;
+
+	box-sizing: border-box;
+	//Note: This works because .plan-storage width always stays the same.
+	//If that were to change we'd need to set the max-width dynamically.
+	max-width: 211px;
+	padding: 8px 11px;
+	box-shadow: 0 0 0 $border-width var( --color-border-subtle );
+	border-radius: 3px;
+	background: var( --color-surface );
+	color: var( --color-text );
+	font-size: $font-body-extra-small;
+	line-height: 1.4;
+	z-index: z-index( 'root', '.plan-storage__tooltip' );
+
+	.tooltip__arrow {
+		margin-top: ( -$border-width );
+		margin-left: calc( 50% - 2em );
+
+		.stroke {
+			fill: var( --color-border-subtle );
+		}
+
+		.fill {
+			fill: var( --color-surface );
+		}
+	}
+
+}

client/blocks/plan-storage/tooltip.jsx

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import {
+	useTooltipState,
+	Tooltip as ReakitTooltip,
+	TooltipReference,
+	TooltipArrow,
+} from 'reakit/Tooltip';
+
+function Tooltip( { children, title, ...props } ) {
+	const tooltipState = useTooltipState( { placement: 'top-end', gutter: 14 } );
+	return (
+		<>
+			<TooltipReference { ...tooltipState } ref={ children.ref } { ...children.props }>
+				{ ( referenceProps ) => React.cloneElement( children, referenceProps ) }
+			</TooltipReference>
+			<ReakitTooltip { ...tooltipState } { ...props }>
+				<TooltipArrow className="tooltip__arrow" { ...tooltipState } size={ 22 } />
+				{ title }
+			</ReakitTooltip>
+		</>
+	);
+}
+
+export default Tooltip;

client/my-sites/media-library/style.scss

@@ -98,6 +98,12 @@
 		box-sizing: border-box;
 		flex: 1 0 auto;
 
+		&:focus {
+			box-shadow: 0 0 0 1px var( --color-border-subtle ), inset 0 0 0 2px var( --color-primary-light );
+			outline: none;
+			z-index: 1;
+		}
+
 		@include breakpoint-deprecated( '>480px' ) {
 			display: flex;
 		}

client/package.json

@@ -176,7 +176,7 @@
 		"react-spring": "^8.0.27",
 		"react-stripe-elements": "^4.0.2",
 		"react-transition-group": "^4.3.0",
-		"reakit": "^1.0.0-beta.14",
+		"reakit": "^1.2.3",
 		"redux": "^4.0.5",
 		"redux-dynamic-middlewares": "^2.0.0",
 		"redux-form": "^8.2.6",

yarn.lock

@@ -2790,6 +2790,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.2.tgz#7c6dc4ecef16149fd7a736710baa1b811017fdca"
   integrity sha512-JlGTGRYHC2QK+DDbePyXdBdooxFq2+noLfWpRqJtkxcb/oYWzOF0kcbfvvbWrwevCC1l6hLUg1wHYT+ona5BWQ==
 
+"@popperjs/core@^2.4.4":
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.4.4.tgz#11d5db19bd178936ec89cd84519c4de439574398"
+  integrity sha512-1oO6+dN5kdIA3sKPZhRGJTfGVP4SWV6KqlMOwry4J3HfyD68sl/3KmG7DeYUzvN+RbhXDnv/D8vNNB8168tAMg==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -7784,11 +7789,6 @@ [email protected], body-parser@^1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
-body-scroll-lock@^2.6.4:
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz#567abc60ef4d656a79156781771398ef40462e94"
-  integrity sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==
-
 body-scroll-lock@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.0.2.tgz#97df9bb3b17a0140c4a09b3568d146ae9af6b981"
@@ -20994,7 +20994,7 @@ polished@^3.3.1:
   dependencies:
     "@babel/runtime" "^7.6.3"
 
-popper.js@^1.14.4, popper.js@^1.14.7, popper.js@^1.16.0:
+popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@@ -23159,10 +23159,12 @@ reakit-system@^0.13.0:
   dependencies:
     reakit-utils "^0.13.0"
 
-reakit-system@^0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.7.2.tgz#34e5b50f7668ef0a533fbe963a095b6374d48a5b"
-  integrity sha512-IY0NwVguy2Awp0DFRzsCBtSnn5gpHtfM3pvfi6Qcwv7Wkms6ZUWxsqFpwNJTMBfXqEBo9dDuIkpCBZivtezYzA==
+reakit-system@^0.14.3:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/reakit-system/-/reakit-system-0.14.3.tgz#4dd56e86a31c2ee0af817f98a55d2744571f3b41"
+  integrity sha512-o+sX3R0ByRW4L0HCrCy3w1I4tbUCZ3G7l/JXAWQ8dvMqC1rSaTt+V1CA3pnHw+dLnj+Z0sOP/XafP+j4sMJYsg==
+  dependencies:
+    reakit-utils "^0.14.3"
 
 reakit-utils@^0.12.0:
   version "0.12.0"
@@ -23174,10 +23176,10 @@ reakit-utils@^0.13.0:
   resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.13.0.tgz#e752d139254027cbbdae46b7cb643f3817eb7ddc"
   integrity sha512-/Ll+D4WllB6s2dNuWHTO32JNgdSHl1jf5y6QK3aCU4OEMtSCGz0TpXXHslWgRXWEQjKItVY640A8wugVQmKgWQ==
 
-reakit-utils@^0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.7.3.tgz#91acb6360b30a802e5dae9bb6c9f7a9e9535ea6a"
-  integrity sha512-sQsgKYcn+OthBkvKz+TeHlYZq2SF5ZP9RutHg7O67GI+sdYqf0BVy6VeTe28TG4Vui6hoMheiMnZqhidOtN7EA==
+reakit-utils@^0.14.3:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/reakit-utils/-/reakit-utils-0.14.3.tgz#ea77684c2126ec41a26f02ef2b154e47a100371e"
+  integrity sha512-EQlalje+8UiybchMobZi6LrwbBBrqMFOG7f8Z5RJQil1Szt6SFP5BXfAIFj9J3gZunCXVk/NRaiyTdTbFiZ1CA==
 
 reakit-warning@^0.3.0:
   version "0.3.0"
@@ -23193,6 +23195,13 @@ reakit-warning@^0.4.0:
   dependencies:
     reakit-utils "^0.13.0"
 
+reakit-warning@^0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/reakit-warning/-/reakit-warning-0.5.3.tgz#94828f307c9af6e1cbcf8874931f07307559f50c"
+  integrity sha512-KSj0WqDiu4Qiz5PQUy4BKcbHnphauCcOTcXcsCs+1quuoVc/D49bx7WKnDnnejuC3m3ALKs/G+eQHlaWs+82tQ==
+  dependencies:
+    reakit-utils "^0.14.3"
+
 [email protected]:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.1.0.tgz#c30289907722a1fb1aa6a8c4990dac739c60e9c7"
@@ -23204,16 +23213,6 @@ [email protected]:
     reakit-utils "^0.13.0"
     reakit-warning "^0.4.0"
 
-reakit@^1.0.0-beta.14:
-  version "1.0.0-beta.14"
-  resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.0.0-beta.14.tgz#cea09f361e0062d2eb1515b5d1ba8ab0beeebeef"
-  integrity sha512-/KRlHT7tACx3PVvnX1DOuJxlWnfdfbdoEOJKdVPR8X4a9hkLPOZnLRaCNWKwHTVR7tAuVxo0K+ySsMuxWiGGYw==
-  dependencies:
-    body-scroll-lock "^2.6.4"
-    popper.js "^1.16.0"
-    reakit-system "^0.7.2"
-    reakit-utils "^0.7.3"
-
 reakit@^1.0.0-rc.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.0.2.tgz#ff879f63a47b4d61051f8e991b187f14c8fc391e"
@@ -23236,6 +23235,17 @@ reakit@^1.1.0:
     reakit-utils "^0.13.0"
     reakit-warning "^0.4.0"
 
+reakit@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.2.3.tgz#3a144e836366bd4d3388665bd0ee39d5ad595853"
+  integrity sha512-bxtrH9O5beHGWzlVzRr+C6idUiV58/rRzBTmw1nu6Wj+hX0yjJDGlSlOLD/oOufhLCjjBGP8s8U3NuLuq4Xv+g==
+  dependencies:
+    "@popperjs/core" "^2.4.4"
+    body-scroll-lock "^3.0.2"
+    reakit-system "^0.14.3"
+    reakit-utils "^0.14.3"
+    reakit-warning "^0.5.3"
+
 realistic-structured-clone@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/realistic-structured-clone/-/realistic-structured-clone-2.0.2.tgz#2f8ec225b1f9af20efc79ac96a09043704414959"