Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Media plan storage indicator: add accessible tooltip #45190

Merged
merged 3 commits into from
Aug 27, 2020
Merged

Media plan storage indicator: add accessible tooltip #45190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
38513ad
Media plan storage indicator: add accessible tooltip
frontdevde Aug 26, 2020
3b1f265
Offset tooltip arrow from right by two times its own width
frontdevde Aug 26, 2020
de5cbad
Update tooltip state variable name
frontdevde Aug 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions client/assets/stylesheets/shared/functions/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ $z-layers: (
'.dialog__backdrop': 100200,
'.wplink__dialog.dialog.card': 100200,
'.web-preview': 100200,
'.plan-storage__tooltip': 100300,
Copy link
Contributor Author

@frontdevde frontdevde Aug 25, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As the reakit tooltip sits outside the flow at the end of the page, we need a z-index higher than the media library modal at 100200.

'.popover.gallery__order-popover': 100300,
'popover.is-dialog-visible': 100300,
'.popover.info-tooltip__container': 100300,
Expand Down
16 changes: 12 additions & 4 deletions client/blocks/plan-storage/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -42,6 +44,7 @@ export class PlanStorage extends Component {
siteId,
sitePlanSlug,
siteSlug,
translate,
} = this.props;

if ( ( jetpackSite && ! atomicSite ) || ! canViewBar || ! sitePlanSlug ) {
Expand Down Expand Up @@ -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 (
Expand All @@ -94,4 +102,4 @@ export default connect( ( state, ownProps ) => {
canUserUpgrade: canCurrentUser( state, siteId, 'manage_options' ),
canViewBar: canCurrentUser( state, siteId, 'publish_posts' ),
};
} )( PlanStorage );
} )( localize( PlanStorage ) );
31 changes: 31 additions & 0 deletions client/blocks/plan-storage/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
}
}

}
27 changes: 27 additions & 0 deletions client/blocks/plan-storage/tooltip.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
6 changes: 6 additions & 0 deletions client/my-sites/media-library/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
58 changes: 34 additions & 24 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down