Skip to content

Commit

Permalink
Render a View to allow for polymorphism and forward the ref
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarayourfriend
sarayourfriend committed Jul 16, 2021
1 parent 6fbcdc7 commit cfe4ba2
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 48 deletions.
3 changes: 0 additions & 3 deletions packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
View file

This file was deleted.

79 changes: 37 additions & 42 deletions packages/components/src/color-picker/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Snapshot Diff:
type="button"
/>
<div
className="components-visually-hidden"
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="color-picker-saturation-4"
Expand All @@ -62,7 +62,7 @@ Snapshot Diff:
/>
</div>
<div
@@ -95,32 +95,32 @@
@@ -95,31 +95,31 @@
onMouseDown={[Function bound handleMouseDown]}
onTouchMove={[Function bound handleChange]}
onTouchStart={[Function bound handleChange]}
Expand All @@ -87,9 +87,8 @@ Snapshot Diff:
}
tabIndex="0"
/>
<div
as="p"
className="components-visually-hidden"
<p
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="components-color-picker__hue-description-4"
Expand All @@ -99,7 +98,7 @@ Snapshot Diff:
"WebkitClipPath": "inset( 50% )",
"border": 0,
"clip": "rect(1px, 1px, 1px, 1px)",
@@ -154,22 +154,22 @@
@@ -153,22 +153,22 @@
<div
className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
>
Expand Down Expand Up @@ -166,7 +165,7 @@ Snapshot Diff:
type="button"
/>
<div
className="components-visually-hidden"
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="color-picker-saturation-8"
Expand All @@ -189,7 +188,7 @@ Snapshot Diff:
/>
</div>
<div
@@ -95,32 +95,32 @@
@@ -95,31 +95,31 @@
onMouseDown={[Function bound handleMouseDown]}
onTouchMove={[Function bound handleChange]}
onTouchStart={[Function bound handleChange]}
Expand All @@ -214,9 +213,8 @@ Snapshot Diff:
}
tabIndex="0"
/>
<div
as="p"
className="components-visually-hidden"
<p
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="components-color-picker__hue-description-8"
Expand All @@ -226,7 +224,7 @@ Snapshot Diff:
"WebkitClipPath": "inset( 50% )",
"border": 0,
"clip": "rect(1px, 1px, 1px, 1px)",
@@ -154,22 +154,22 @@
@@ -153,22 +153,22 @@
<div
className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
>
Expand Down Expand Up @@ -293,7 +291,7 @@ Snapshot Diff:
type="button"
/>
<div
className="components-visually-hidden"
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="color-picker-saturation-10"
Expand All @@ -316,7 +314,7 @@ Snapshot Diff:
/>
</div>
<div
@@ -95,32 +95,32 @@
@@ -95,31 +95,31 @@
onMouseDown={[Function bound handleMouseDown]}
onTouchMove={[Function bound handleChange]}
onTouchStart={[Function bound handleChange]}
Expand All @@ -341,9 +339,8 @@ Snapshot Diff:
}
tabIndex="0"
/>
<div
as="p"
className="components-visually-hidden"
<p
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="components-color-picker__hue-description-10"
Expand All @@ -353,7 +350,7 @@ Snapshot Diff:
"WebkitClipPath": "inset( 50% )",
"border": 0,
"clip": "rect(1px, 1px, 1px, 1px)",
@@ -154,22 +154,22 @@
@@ -153,22 +153,22 @@
<div
className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
>
Expand Down Expand Up @@ -420,7 +417,7 @@ Snapshot Diff:
type="button"
/>
<div
className="components-visually-hidden"
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="color-picker-saturation-6"
Expand All @@ -443,7 +440,7 @@ Snapshot Diff:
/>
</div>
<div
@@ -95,32 +95,32 @@
@@ -95,31 +95,31 @@
onMouseDown={[Function bound handleMouseDown]}
onTouchMove={[Function bound handleChange]}
onTouchStart={[Function bound handleChange]}
Expand All @@ -468,9 +465,8 @@ Snapshot Diff:
}
tabIndex="0"
/>
<div
as="p"
className="components-visually-hidden"
<p
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="components-color-picker__hue-description-6"
Expand All @@ -480,7 +476,7 @@ Snapshot Diff:
"WebkitClipPath": "inset( 50% )",
"border": 0,
"clip": "rect(1px, 1px, 1px, 1px)",
@@ -154,22 +154,22 @@
@@ -153,22 +153,22 @@
<div
className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
>
Expand Down Expand Up @@ -529,7 +525,7 @@ Snapshot Diff:
@@ -38,11 +38,11 @@
/>
<div
className="components-visually-hidden"
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="color-picker-saturation-2"
Expand All @@ -552,10 +548,10 @@ Snapshot Diff:
aria-valuemax="1"
aria-valuemin="359"
aria-valuenow={0}
@@ -116,11 +116,11 @@
<div
as="p"
className="components-visually-hidden"
@@ -115,11 +115,11 @@
/>
<p
className="components-visually-hidden css-1mm2cvy-View em57xhy0"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
- id="components-color-picker__hue-description-2"
Expand All @@ -565,7 +561,7 @@ Snapshot Diff:
"WebkitClipPath": "inset( 50% )",
"border": 0,
"clip": "rect(1px, 1px, 1px, 1px)",
@@ -154,22 +154,22 @@
@@ -153,22 +153,22 @@
<div
className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
>
Expand Down Expand Up @@ -594,20 +590,20 @@ Snapshot Diff:
`;
exports[`ColorPicker should render color picker 1`] = `
.emotion-0 {
.emotion-4 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
}
.emotion-2 {
.emotion-6 {
margin-bottom: calc(4px * 2);
}
.components-panel__row .emotion-2 {
.components-panel__row .emotion-6 {
margin-bottom: inherit;
}
.emotion-4 {
.emotion-8 {
display: inline-block;
margin-bottom: calc(4px * 2);
}
Expand Down Expand Up @@ -651,7 +647,7 @@ exports[`ColorPicker should render color picker 1`] = `
type="button"
/>
<div
className="components-visually-hidden"
className="components-visually-hidden emotion-0 emotion-1"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
id="color-picker-saturation-0"
Expand Down Expand Up @@ -727,9 +723,8 @@ exports[`ColorPicker should render color picker 1`] = `
}
tabIndex="0"
/>
<div
as="p"
className="components-visually-hidden"
<p
className="components-visually-hidden emotion-0 emotion-1"
data-wp-c16t={true}
data-wp-component="VisuallyHidden"
id="components-color-picker__hue-description-0"
Expand All @@ -750,7 +745,7 @@ exports[`ColorPicker should render color picker 1`] = `
}
>
Move the arrow left or right to change hue.
</div>
</p>
</div>
</div>
</div>
Expand All @@ -763,13 +758,13 @@ exports[`ColorPicker should render color picker 1`] = `
className="components-color-picker__inputs-fields"
>
<div
className="components-base-control components-color-picker__inputs-field emotion-0 emotion-1"
className="components-base-control components-color-picker__inputs-field emotion-4 emotion-5"
>
<div
className="components-base-control__field emotion-2 emotion-3"
className="components-base-control__field emotion-6 emotion-7"
>
<label
className="components-base-control__label emotion-4 emotion-5"
className="components-base-control__label emotion-8 emotion-9"
htmlFor="inspector-text-control-0"
>
Color value in hexadecimal
Expand Down
7 changes: 5 additions & 2 deletions packages/components/src/visually-hidden/component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,20 @@
*/
import { useContextSystem, contextConnect } from '../ui/context';
import { visuallyHidden } from './styles';
import { View } from '../view';

/**
* @param {import('../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
* @param {import('react').Ref<any>} forwardedRef
*/
function VisuallyHidden( props ) {
function VisuallyHidden( props, forwardedRef ) {
const { style: styleProp, ...contextProps } = useContextSystem(
props,
'VisuallyHidden'
);
return (
<div
<View
ref={ forwardedRef }
{ ...contextProps }
style={ { ...visuallyHidden, ...( styleProp || {} ) } }
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`VisuallyHidden should render correctly 1`] = `
<div
class="components-visually-hidden"
class="components-visually-hidden emotion-0 emotion-1"
data-wp-c16t="true"
data-wp-component="VisuallyHidden"
style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
Expand Down

0 comments on commit cfe4ba2

Please sign in to comment.