Repository navigation
Components: migrate ResizableBox to SCSS module #81792
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| @use "@wordpress/base-styles/variables" as *; | ||
| @use "../../utils/theme-variables" as *; | ||
|
|
||
| .root { | ||
| box-sizing: border-box; | ||
| pointer-events: none; | ||
| position: absolute; | ||
| inset: 0; | ||
| } | ||
|
|
||
| .tooltip-wrapper { | ||
| align-items: center; | ||
| box-sizing: border-box; | ||
| display: inline-flex; | ||
| justify-content: center; | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| transition: opacity 120ms linear; | ||
| } | ||
|
|
||
| .tooltip { | ||
| background: $components-color-foreground; | ||
| border-radius: $radius-small; | ||
| box-sizing: border-box; | ||
| font-family: $default-font; | ||
| font-size: 12px; | ||
| color: $components-color-foreground-inverted; | ||
| padding: $grid-unit-05 $grid-unit-10; | ||
| position: relative; | ||
| } | ||
|
|
||
| // Match the previous Emotion `&&&` specificity so label styles continue to | ||
| // override Text / consumer typography. | ||
| .label-text.label-text.label-text { | ||
| color: $components-color-foreground-inverted; | ||
| display: block; | ||
| font-size: 13px; | ||
| line-height: 1.4; | ||
| white-space: nowrap; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { createElement, createRef } from '@wordpress/element'; | ||
| import ResizeTooltip from '../index'; | ||
| import styles from '../style.module.scss'; | ||
|
|
||
| describe( 'ResizeTooltip', () => { | ||
| it( 'renders the legacy root class together with className and style', () => { | ||
| render( | ||
| <ResizeTooltip | ||
| className="custom-tooltip" | ||
| data-testid="resize-tooltip" | ||
| style={ { zIndex: 7 } } | ||
| /> | ||
| ); | ||
|
|
||
| const root = screen.getByTestId( 'resize-tooltip' ); | ||
|
|
||
| expect( root ).toHaveClass( 'components-resize-tooltip' ); | ||
| expect( root ).toHaveClass( styles.root ); | ||
| expect( root ).toHaveClass( 'custom-tooltip' ); | ||
| expect( root ).toHaveStyle( { zIndex: '7' } ); | ||
| } ); | ||
|
|
||
| it( 'renders as a different element and forwards the root ref', () => { | ||
| const ref = createRef< HTMLElement >(); | ||
|
|
||
| render( | ||
| <ResizeTooltip | ||
| as="section" | ||
| data-testid="resize-tooltip" | ||
| ref={ ref } | ||
| /> | ||
| ); | ||
|
|
||
| const root = screen.getByTestId( 'resize-tooltip' ); | ||
|
|
||
| expect( root.tagName ).toBe( 'SECTION' ); | ||
| expect( ref.current ).toBe( root ); | ||
| } ); | ||
|
|
||
| it( 'forwards target-specific props and filters invalid intrinsic props', () => { | ||
| render( | ||
| createElement( ResizeTooltip, { | ||
| as: 'label', | ||
| 'data-testid': 'resize-tooltip', | ||
| htmlFor: 'size-field', | ||
| labelPosition: 'top', | ||
| } as React.ComponentProps< typeof ResizeTooltip > & { | ||
| labelPosition: string; | ||
| } ) | ||
| ); | ||
|
|
||
| const root = screen.getByTestId( 'resize-tooltip' ); | ||
|
|
||
| expect( root ).toHaveAttribute( 'for', 'size-field' ); | ||
| expect( root ).not.toHaveAttribute( 'labelPosition' ); | ||
| expect( root ).not.toHaveAttribute( 'labelposition' ); | ||
| } ); | ||
| } ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import Label from '../label'; | ||
| import { POSITIONS } from '../utils'; | ||
| import styles from '../style.module.scss'; | ||
|
|
||
| describe( 'ResizeTooltip label', () => { | ||
| it( 'keeps the Text contract when an ancestor uses a bold font weight', () => { | ||
| render( | ||
| <div style={ { fontWeight: 700 } }> | ||
| <Label | ||
| label="120 x 80" | ||
| position={ POSITIONS.bottom } | ||
| zIndex={ 1 } | ||
| /> | ||
| </div> | ||
| ); | ||
|
|
||
| const label = screen.getByText( '120 x 80' ); | ||
|
|
||
| expect( label.tagName ).toBe( 'SPAN' ); | ||
| expect( label ).toHaveClass( 'components-text' ); | ||
| expect( label ).toHaveClass( 'components-truncate' ); | ||
| expect( label ).toHaveClass( styles[ 'label-text' ] ); | ||
| expect( label ).toHaveAttribute( 'data-wp-component', 'Text' ); | ||
| expect( label ).toHaveStyle( { fontWeight: 'normal' } ); | ||
| } ); | ||
|
|
||
| it( 'positions the label at the bottom', () => { | ||
| const { container } = render( | ||
| <Label label="200 px" position={ POSITIONS.bottom } zIndex={ 3 } /> | ||
| ); | ||
|
|
||
| // Disable reason: the wrapper is presentational and has no accessible name. | ||
| // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container | ||
| const wrapper = container.querySelector( | ||
| '.components-resizable-tooltip__tooltip-wrapper' | ||
| ); | ||
|
|
||
| expect( wrapper ).toHaveStyle( { | ||
| bottom: '-10px', | ||
| left: '50%', | ||
| position: 'absolute', | ||
| zIndex: '3', | ||
| } ); | ||
| } ); | ||
|
|
||
| it( 'positions the label in the corner', () => { | ||
| const { container } = render( | ||
| <Label | ||
| label="200 x 100" | ||
| position={ POSITIONS.corner } | ||
| zIndex={ 3 } | ||
| /> | ||
| ); | ||
|
|
||
| // Disable reason: the wrapper is presentational and has no accessible name. | ||
| // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container | ||
| const wrapper = container.querySelector( | ||
| '.components-resizable-tooltip__tooltip-wrapper' | ||
| ); | ||
|
|
||
| expect( wrapper ).toHaveStyle( { | ||
| top: '4px', | ||
| right: '4px', | ||
| position: 'absolute', | ||
| } ); | ||
| } ); | ||
|
Contributor
There was a problem hiding this comment. These tests currently bring little value:
We can probably remove them. These styles would be better suited for a proper visual regression testing (if/when we have one) |
||
|
|
||
| it( 'keeps label-text declarations when a consumer selector targets the same class', () => { | ||
| const hash = styles[ 'label-text' ]; | ||
| const style = document.createElement( 'style' ); | ||
| style.textContent = ` | ||
| .${ hash } { color: rgb(255, 0, 0); font-size: 99px; } | ||
| .${ hash }.${ hash }.${ hash } { color: rgb(1, 1, 1); font-size: 13px; } | ||
| `; | ||
| document.head.append( style ); | ||
|
|
||
| render( | ||
| <Label label="80 px" position={ POSITIONS.bottom } zIndex={ 1 } /> | ||
| ); | ||
|
|
||
| const label = screen.getByText( '80 px' ); | ||
| const computed = window.getComputedStyle( label ); | ||
|
|
||
| expect( label ).toHaveClass( hash ); | ||
| expect( computed.color ).toBe( 'rgb(1, 1, 1)' ); | ||
| expect( computed.fontSize ).toBe( '13px' ); | ||
|
|
||
| style.remove(); | ||
| } ); | ||
|
Contributor
There was a problem hiding this comment. This test has no real value against future regressions: Jest mocks the SCSS import, and the test injects the desired triple-class selector itself. It passes even if the production selector is removed. We should remove this test |
||
| } ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Target-prop forwarding is useful, but invalid-prop filtering already belongs to PolymorphicElement’s tests. We can remove this test and combine the useful part (ie target props forwarding) with the previous
astest.