From 38513ad9bb5c8f93aa3e20403235f8d4bbe9d6cd Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 26 Aug 2020 16:54:08 +0200 Subject: [PATCH 1/3] Media plan storage indicator: add accessible tooltip --- .../shared/functions/_z-index.scss | 1 + client/blocks/plan-storage/index.jsx | 16 +++-- client/blocks/plan-storage/style.scss | 30 ++++++++++ client/blocks/plan-storage/tooltip.jsx | 27 +++++++++ client/my-sites/media-library/style.scss | 6 ++ client/package.json | 2 +- yarn.lock | 58 +++++++++++-------- 7 files changed, 111 insertions(+), 29 deletions(-) create mode 100644 client/blocks/plan-storage/tooltip.jsx diff --git a/client/assets/stylesheets/shared/functions/_z-index.scss b/client/assets/stylesheets/shared/functions/_z-index.scss index 3228a3ed1cf3f0..60a25918364ccf 100644 --- a/client/assets/stylesheets/shared/functions/_z-index.scss +++ b/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, diff --git a/client/blocks/plan-storage/index.jsx b/client/blocks/plan-storage/index.jsx index 7f2bbda36ea26f..10de4aa1712216 100644 --- a/client/blocks/plan-storage/index.jsx +++ b/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 ( - - { planStorageComponents } - + + + { planStorageComponents } + + ); } 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 ) ); diff --git a/client/blocks/plan-storage/style.scss b/client/blocks/plan-storage/style.scss index b8603d586fa63b..514c464ee2f5fa 100644 --- a/client/blocks/plan-storage/style.scss +++ b/client/blocks/plan-storage/style.scss @@ -39,3 +39,33 @@ .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); + + .stroke { + fill: var( --color-border-subtle ); + } + + .fill { + fill: var( --color-surface ); + } + } + +} \ No newline at end of file diff --git a/client/blocks/plan-storage/tooltip.jsx b/client/blocks/plan-storage/tooltip.jsx new file mode 100644 index 00000000000000..3e8dd9820fa769 --- /dev/null +++ b/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 tooltip = useTooltipState( { placement: 'top-end', gutter: 14 } ); + return ( + <> + + { ( referenceProps ) => React.cloneElement( children, referenceProps ) } + + + + { title } + + + ); +} + +export default Tooltip; diff --git a/client/my-sites/media-library/style.scss b/client/my-sites/media-library/style.scss index a4e488a86b875b..a768f525202651 100644 --- a/client/my-sites/media-library/style.scss +++ b/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; } diff --git a/client/package.json b/client/package.json index b9221daa5280af..64c2ec1f0094b4 100644 --- a/client/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index f6d6407329b586..8ddbb831558497 100644 --- a/yarn.lock +++ b/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 @@ body-parser@1.19.0, 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" + reakit@1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/reakit/-/reakit-1.1.0.tgz#c30289907722a1fb1aa6a8c4990dac739c60e9c7" @@ -23204,16 +23213,6 @@ reakit@1.1.0: 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" From 3b1f2653e09312b525094225d3077fe3c2586f43 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 26 Aug 2020 17:06:32 +0200 Subject: [PATCH 2/3] Offset tooltip arrow from right by two times its own width --- client/blocks/plan-storage/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/blocks/plan-storage/style.scss b/client/blocks/plan-storage/style.scss index 514c464ee2f5fa..03fb0dac647339 100644 --- a/client/blocks/plan-storage/style.scss +++ b/client/blocks/plan-storage/style.scss @@ -57,7 +57,8 @@ z-index: z-index( 'root', '.plan-storage__tooltip' ); .tooltip__arrow { - margin-top: (-$border-width); + margin-top: ( -$border-width ); + margin-left: calc( 50% - 2em ); .stroke { fill: var( --color-border-subtle ); From de5cbadcefd558c782af6279011ff462933972c6 Mon Sep 17 00:00:00 2001 From: "Michael P. Pfeiffer" Date: Wed, 26 Aug 2020 17:17:01 +0200 Subject: [PATCH 3/3] Update tooltip state variable name --- client/blocks/plan-storage/tooltip.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/client/blocks/plan-storage/tooltip.jsx b/client/blocks/plan-storage/tooltip.jsx index 3e8dd9820fa769..266dff6718ca6a 100644 --- a/client/blocks/plan-storage/tooltip.jsx +++ b/client/blocks/plan-storage/tooltip.jsx @@ -10,14 +10,14 @@ import { } from 'reakit/Tooltip'; function Tooltip( { children, title, ...props } ) { - const tooltip = useTooltipState( { placement: 'top-end', gutter: 14 } ); + const tooltipState = useTooltipState( { placement: 'top-end', gutter: 14 } ); return ( <> - + { ( referenceProps ) => React.cloneElement( children, referenceProps ) } - - + + { title }