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

Spacer: Show tooltip with height value on resize #23077

Merged
merged 32 commits into from
Jun 22, 2020
Merged

Spacer: Show tooltip with height value on resize #23077

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
f4e3c66
Try initial resizer visualizer tooltips
Jun 10, 2020
c3e2627
Improve ResizableVisualizer implementation
Jun 10, 2020
1fdb531
Add README.md file
Jun 10, 2020
5b1d213
Clean up. Add default values. Forward refs. Add classNames.
Jun 10, 2020
976d034
Rename ResizableVisualizer to ResizeTooltip
Jun 10, 2020
b8ae084
Integrate ResizeTooltip with Spacer block
Jun 10, 2020
16cee81
Add ResizeTooltip README to docs manifest
Jun 10, 2020
e3561e8
Adjust aria-hidden pass-through for inner Label
Jun 10, 2020
e8a6549
Fix Firefox rendering on drag events
Jun 10, 2020
fff2aa4
Fix ResizeTooltip for Spacer
Jun 10, 2020
a17de29
Rename "variant" to "position". Default position to "corner". Add "bo…
Jun 11, 2020
94bee59
Update ResizeTooltip position in Spacer edit to "cursor"
Jun 11, 2020
b10237b
Update className for ResizeTooltip. Adjustments to README and default…
Jun 11, 2020
a7286e1
Use Text component for Tooltip label text
Jun 11, 2020
8d9cb89
Adjust ResizeTooltip useEffect isRendered check
Jun 11, 2020
1d2c647
Improve cursor position onMove
Jun 11, 2020
39f02a3
Rename isEnabled prop to isVisible
Jun 11, 2020
9611aad
Improve cursor position rendering
Jun 11, 2020
466dbaa
Improve mouse events for position='cursor'
Jun 11, 2020
0c2fd7b
Split cursorPosition to cursorX and cursorY
Jun 11, 2020
5393c72
Fix typo
Jun 11, 2020
23575e7
Fix multiline comments
Jun 11, 2020
4905215
Lowercase px in label
Jun 11, 2020
3bcd869
Remove cursor from resize visualizers
Jun 16, 2020
3e9e51c
Improve rendering for bottom/corner
Jun 16, 2020
997e1fe
Adjust Resize tooltip padding. Add comment re: specificity
Jun 16, 2020
3e22d44
Merge branch 'master' into add/resize-visualizers
Jun 16, 2020
69ff337
Merge branch 'master' into add/resize-visualizers
Jun 16, 2020
2db1359
Merge branch 'master' into add/resize-visualizers
Jun 17, 2020
b0b1375
Merge branch 'master' into add/resize-visualizers
Jun 18, 2020
3b341a7
Move ResizeTooltip to ResizableBox. Enable with __experimental. Remov…
Jun 18, 2020
4810069
Update docs manifest
Jun 18, 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
2 changes: 1 addition & 1 deletion docs/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1022,7 +1022,7 @@
{
"title": "ResizeTooltip",
"slug": "resize-tooltip",
"markdown_source": "../packages/components/src/resize-tooltip/README.md",
"markdown_source": "../packages/components/src/resizable-box/resize-tooltip/README.md",
Copy link
Contributor

Choose a reason for hiding this comment

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

Should no longer be in the manifest, right?

Copy link
Author

Choose a reason for hiding this comment

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

I'm... not sure. This was auto generated. There's a README.md inside the directory. I guess I can remove it? Ideally I'd like to preserve the docs though.

An alternative would be to inline comment some of the documentation (for now)

Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm... yeah, I see now. Well, I don’t have a preference. Maybe @nosolosw has a different take on how we should document components and let these tools work for us? Anyway, LGTM :)

Copy link
Member

Choose a reason for hiding this comment

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

I took a peek at how the script that processes the handbook docs works. It seems that it looks for README files within the components folder (see) and then updates the manifest used to expose them in the handbook (see ResizableBox page).

I'm unfamiliar with how we deal with subcomponents that aren't exposed via the @wordpress/components package. I had a quick look and this seems to be the only case? Anyway, it seems that we should either expose the resize-tooltip as a component proper or look at ways to remove its page from the handbook as it can't be used by external consumers of the API. For the latter, we could go with a quick hack (use a lowercased readme, use any other name for the file) or fix the issue (update the glob pattern to only match README files within the top-level component folder).

"parent": "components"
},
{
Expand Down
21 changes: 8 additions & 13 deletions packages/block-library/src/spacer/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,7 @@ import classnames from 'classnames';
*/
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/block-editor';
import {
PanelBody,
ResizableBox,
ResizeTooltip,
RangeControl,
} from '@wordpress/components';
import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
import { compose, withInstanceId } from '@wordpress/compose';
import { withDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
Expand Down Expand Up @@ -77,13 +72,13 @@ const SpacerEdit = ( {
onResizeStart={ handleOnResizeStart }
onResizeStop={ handleOnResizeStop }
showHandle={ isSelected }
>
<ResizeTooltip
axis="y"
isVisible={ isResizing }
position="bottom"
/>
</ResizableBox>
__experimentalShowTooltip={ true }
__experimentalTooltipProps={ {
axis: 'y',
position: 'bottom',
isVisible: isResizing,
} }
/>
<InspectorControls>
<PanelBody title={ __( 'Spacer settings' ) }>
<RangeControl
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,6 @@ export { default as __experimentalRadioGroup } from './radio-group';
export { default as RadioControl } from './radio-control';
export { default as RangeControl } from './range-control';
export { default as ResizableBox } from './resizable-box';
export { default as ResizeTooltip } from './resize-tooltip';
export { default as ResponsiveWrapper } from './responsive-wrapper';
export { default as SandBox } from './sandbox';
export { default as SelectControl } from './select-control';
Expand Down
19 changes: 17 additions & 2 deletions packages/components/src/resizable-box/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,19 @@
import classnames from 'classnames';
import { Resizable } from 're-resizable';

function ResizableBox( { className, showHandle = true, ...props } ) {
/**
* Internal dependencies
*/
import ResizeTooltip from './resize-tooltip';

function ResizableBox( {
className,
children,
showHandle = true,
__experimentalShowTooltip: showTooltip = false,
__experimentalTooltipProps: tooltipProps = {},
...props
} ) {
// Removes the inline styles in the drag handles.
const handleStylesOverrides = {
width: null,
Expand Down Expand Up @@ -83,7 +95,10 @@ function ResizableBox( { className, showHandle = true, ...props } ) {
bottomLeft: handleStylesOverrides,
} }
{ ...props }
/>
>
{ children }
{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }
</Resizable>
);
}

Expand Down
10 changes: 4 additions & 6 deletions ...s/components/src/resize-tooltip/README.md → ...rc/resizable-box/resize-tooltip/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ ResizeTooltip displays the dimensions of an element whenever the width or height
## Usage

```jsx
import { ResizeTooltip } from '@wordpress/components';

const Example = () => {
return (
<div style={ { position: 'relative' } }>
Expand All @@ -23,16 +21,16 @@ Be sure that the parent element containing `<ResizeTooltip />` has the `position

`<ResizeTooltip />` has three positions;

- `bottom`
- `corner` (Default)
- `bottom` (Default)
- `corner`

##### `bottom`

The `bottom` position renders the dimensions label at the bottom-center of the (parent) element.
The `bottom` position (default) renders the dimensions label at the bottom-center of the (parent) element.

##### `corner`

The `corner` position (default) renders the dimensions label in the top-right corner of the (parent) element.
The `corner` position renders the dimensions label in the top-right corner of the (parent) element.

## Props

Expand Down
2 changes: 1 addition & 1 deletion ...es/components/src/resize-tooltip/index.js → ...src/resizable-box/resize-tooltip/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function ResizeTooltip(
isVisible = true,
labelRef,
onResize = noop,
position = POSITIONS.corner,
position = POSITIONS.bottom,
showPx = true,
zIndex = 1000,
...props
Expand Down
2 changes: 1 addition & 1 deletion ...es/components/src/resize-tooltip/label.js → ...src/resizable-box/resize-tooltip/label.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { forwardRef } from '@wordpress/element';
* Internal dependencies
*/
import { POSITIONS } from './utils';
import { useRTL } from '../utils/style-mixins';
import { useRTL } from '../../utils/style-mixins';
import {
TooltipWrapper,
Tooltip,
Expand Down
6 changes: 3 additions & 3 deletions ...e-tooltip/styles/resize-tooltip.styles.js → ...e-tooltip/styles/resize-tooltip.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
import Text from '../../text';
import { text } from '../../text/styles/text-mixins';
import { color } from '../../utils/style-mixins';
import Text from '../../../text';
import { text } from '../../../text/styles/text-mixins';
import { color } from '../../../utils/style-mixins';

export const Root = styled.div`
bottom: 0;
Expand Down
4 changes: 2 additions & 2 deletions ...es/components/src/resize-tooltip/utils.js → ...src/resizable-box/resize-tooltip/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function useResizeLabel( {
axis,
fadeTimeout = 180,
onResize = noop,
position = POSITIONS.corner,
position = POSITIONS.bottom,
showPx = false,
} ) {
/*
Expand Down Expand Up @@ -175,7 +175,7 @@ function getSizeLabel( {
height,
moveX = false,
moveY = false,
position = POSITIONS.corner,
position = POSITIONS.bottom,
showPx = false,
width,
} ) {
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/resizable-box/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,17 @@ export const _default = () => {
bottomLeft: boolean( 'enable.bottomLeft', false ),
topLeft: boolean( 'enable.topLeft', false ),
};
const __experimentalShowTooltip = boolean(
'__experimentalShowTooltip',
false
);

const props = {
enable,
minHeight,
minWidth,
showHandle,
__experimentalShowTooltip,
};

return (
Expand Down
81 changes: 0 additions & 81 deletions packages/components/src/resize-tooltip/stories/index.js
View file
Open in desktop

This file was deleted.