From c30aeb51e103684a49d8873b7098efd2a32d5e1f Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Mon, 17 May 2021 10:00:34 -0700
Subject: [PATCH 1/8] Revert "Revert "components: Promote VisuallyHidden from
ui into full components (#31244)" (#31882)"
This reverts commit 269f31aca6d4561b61bb872e6adf0a0ab2b68489.
---
.../test/__snapshots__/index.js.snap | 3 +
.../src/alignment-matrix-control/cell.js | 2 +-
packages/components/src/base-control/index.js | 2 +-
packages/components/src/button/index.js | 2 +-
packages/components/src/button/test/index.js | 2 +-
packages/components/src/color-picker/hue.js | 2 +-
.../components/src/color-picker/inputs.js | 2 +-
.../components/src/color-picker/saturation.js | 2 +-
.../test/__snapshots__/index.js.snap | 70 ++++++++++++++-----
.../src/custom-gradient-bar/control-points.js | 2 +-
.../components/src/external-link/index.js | 2 +-
.../components/src/font-size-picker/index.js | 2 +-
.../components/src/form-token-field/token.js | 2 +-
packages/components/src/index.js | 2 +-
.../components/src/input-control/label.js | 2 +-
.../src/navigation/menu/menu-title-search.js | 2 +-
packages/components/src/style.scss | 1 -
.../src/ui/form-group/form-group-label.js | 4 +-
packages/components/src/ui/index.js | 1 -
.../src/ui/visually-hidden/index.js | 2 -
.../src/ui/visually-hidden/stories/index.js | 42 -----------
.../components/src/visually-hidden/README.md | 14 +++-
.../src/{ui => }/visually-hidden/component.js | 6 +-
.../components/src/visually-hidden/hook.js | 26 +++++++
.../components/src/visually-hidden/index.js | 47 +------------
.../src/visually-hidden/stories/index.js | 2 +-
.../components/src/visually-hidden/style.scss | 30 --------
.../src/{ui => }/visually-hidden/styles.js | 2 +-
.../test/__snapshots__/index.js.snap | 0
.../{ui => }/visually-hidden/test/index.js | 0
.../test/__snapshots__/index.js.snap | 8 +--
31 files changed, 119 insertions(+), 167 deletions(-)
create mode 100644 packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
delete mode 100644 packages/components/src/ui/visually-hidden/index.js
delete mode 100644 packages/components/src/ui/visually-hidden/stories/index.js
rename packages/components/src/{ui => }/visually-hidden/component.js (76%)
create mode 100644 packages/components/src/visually-hidden/hook.js
delete mode 100644 packages/components/src/visually-hidden/style.scss
rename packages/components/src/{ui => }/visually-hidden/styles.js (92%)
rename packages/components/src/{ui => }/visually-hidden/test/__snapshots__/index.js.snap (100%)
rename packages/components/src/{ui => }/visually-hidden/test/index.js (100%)
diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000000..43a6e4b0476981
--- /dev/null
+++ b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic rendering should render 1`] = `"Currently selected link settings
@@ -86,7 +86,7 @@ Snapshot Diff:
tabIndex="0"
/>
@@ -161,7 +161,7 @@ Snapshot Diff:
type="button"
/>
@@ -208,7 +208,7 @@ Snapshot Diff:
tabIndex="0"
/>
@@ -283,7 +283,7 @@ Snapshot Diff:
type="button"
/>
@@ -330,7 +330,7 @@ Snapshot Diff:
tabIndex="0"
/>
@@ -405,7 +405,7 @@ Snapshot Diff:
type="button"
/>
@@ -452,7 +452,7 @@ Snapshot Diff:
tabIndex="0"
/>
@@ -511,7 +511,7 @@ Snapshot Diff:
type="button"
/>
@@ -537,7 +537,7 @@ Snapshot Diff:
tabIndex="0"
/>
@@ -575,19 +575,53 @@ Snapshot Diff:
exports[`ColorPicker should render color picker 1`] = `
.emotion-0 {
+ border: 0;
+ clip: rect( 1px, 1px, 1px, 1px );
+ -webkit-clip-path: inset( 50% );
+ -webkit-clip-path: inset( 50% );
+ clip-path: inset( 50% );
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+ word-wrap: normal!important;
+}
+
+.emotion-0:focus {
+ background-color: #edeff0;
+ clip: auto!important;
+ -webkit-clip-path: none;
+ clip-path: none;
+ color: #444;
+ display: block;
+ font-size: 1em;
+ height: auto;
+ left: 5px;
+ line-height: normal;
+ padding: 15px 23px 14px;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+ top: 5px;
+ width: auto;
+ z-index: 100000;
+}
+
+.emotion-6 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
}
-.emotion-2 {
+.emotion-8 {
margin-bottom: calc(4px * 2);
}
-.components-panel__row .emotion-2 {
+.components-panel__row .emotion-8 {
margin-bottom: inherit;
}
-.emotion-4 {
+.emotion-10 {
display: inline-block;
margin-bottom: calc(4px * 2);
}
@@ -631,7 +665,7 @@ exports[`ColorPicker should render color picker 1`] = `
type="button"
/>
Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -691,7 +725,7 @@ exports[`ColorPicker should render color picker 1`] = `
tabIndex="0"
/>
Move the arrow left or right to change hue.
@@ -708,13 +742,13 @@ exports[`ColorPicker should render color picker 1`] = `
className="components-color-picker__inputs-fields"
>
Color value in hexadecimal
diff --git a/packages/components/src/custom-gradient-bar/control-points.js b/packages/components/src/custom-gradient-bar/control-points.js
index 0fc6076dd4e356..e5edfc88820144 100644
--- a/packages/components/src/custom-gradient-bar/control-points.js
+++ b/packages/components/src/custom-gradient-bar/control-points.js
@@ -18,7 +18,7 @@ import Button from '../button';
import ColorPicker from '../color-picker';
import Dropdown from '../dropdown';
import KeyboardShortcuts from '../keyboard-shortcuts';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
import {
addControlPoint,
diff --git a/packages/components/src/external-link/index.js b/packages/components/src/external-link/index.js
index 14b11492e4fb7f..45c2e403f14c4e 100644
--- a/packages/components/src/external-link/index.js
+++ b/packages/components/src/external-link/index.js
@@ -14,7 +14,7 @@ import { external } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
import { StyledIcon } from './styles/external-link-styles';
export function ExternalLink(
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index 9acb94e06890de..1f8bf8e02b06bd 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -17,7 +17,7 @@ import Button from '../button';
import RangeControl from '../range-control';
import { default as UnitControl, useCustomUnits } from '../unit-control';
import CustomSelectControl from '../custom-select-control';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
const DEFAULT_FONT_SIZE = 'default';
const CUSTOM_FONT_SIZE = 'custom';
diff --git a/packages/components/src/form-token-field/token.js b/packages/components/src/form-token-field/token.js
index bf6f9d814635c4..fb34d9d20d8cbc 100644
--- a/packages/components/src/form-token-field/token.js
+++ b/packages/components/src/form-token-field/token.js
@@ -15,7 +15,7 @@ import { closeSmall } from '@wordpress/icons';
* Internal dependencies
*/
import Button from '../button';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
export default function Token( {
value,
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index b114267b92909f..86d40d1db38fb9 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -147,7 +147,7 @@ export {
useCustomUnits as __experimentalUseCustomUnits,
parseUnit as __experimentalParseUnit,
} from './unit-control';
-export { default as VisuallyHidden } from './visually-hidden';
+export { VisuallyHidden } from './visually-hidden';
export { VStack as __experimentalVStack } from './v-stack';
export { default as IsolatedEventContainer } from './isolated-event-container';
export {
diff --git a/packages/components/src/input-control/label.js b/packages/components/src/input-control/label.js
index c02dd57f9f770f..1c5888fa965128 100644
--- a/packages/components/src/input-control/label.js
+++ b/packages/components/src/input-control/label.js
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
import { Label as BaseLabel } from './styles/input-control-styles';
export default function Label( {
diff --git a/packages/components/src/navigation/menu/menu-title-search.js b/packages/components/src/navigation/menu/menu-title-search.js
index 8af2f4635990dc..dec922098bf87d 100644
--- a/packages/components/src/navigation/menu/menu-title-search.js
+++ b/packages/components/src/navigation/menu/menu-title-search.js
@@ -15,7 +15,7 @@ import { ESCAPE } from '@wordpress/keycodes';
* Internal dependencies
*/
import Button from '../../button';
-import VisuallyHidden from '../../visually-hidden';
+import { VisuallyHidden } from '../../visually-hidden';
import withSpokenMessages from '../../higher-order/with-spoken-messages';
import { useNavigationMenuContext } from './context';
import { useNavigationContext } from '../context';
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 21f13e7d492f55..22ae2fb4779954 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -47,4 +47,3 @@
@import "./toolbar-button/style.scss";
@import "./toolbar-group/style.scss";
@import "./tooltip/style.scss";
-@import "./visually-hidden/style.scss";
diff --git a/packages/components/src/ui/form-group/form-group-label.js b/packages/components/src/ui/form-group/form-group-label.js
index b39f000916a5ff..8d6c282018cad8 100644
--- a/packages/components/src/ui/form-group/form-group-label.js
+++ b/packages/components/src/ui/form-group/form-group-label.js
@@ -7,7 +7,7 @@ import { memo } from '@wordpress/element';
* Internal dependencies
*/
import { ControlLabel } from '../control-label';
-import VisuallyHidden from '../../visually-hidden';
+import { VisuallyHidden } from '../../visually-hidden';
/**
* @param {import('../context').PolymorphicComponentProps} props
@@ -18,7 +18,7 @@ function FormGroupLabel( { children, id, labelHidden = false, ...props } ) {
if ( labelHidden ) {
return (
-
+
{ children }
);
diff --git a/packages/components/src/ui/index.js b/packages/components/src/ui/index.js
index be51b3ca56cc92..e8587d84b298ad 100644
--- a/packages/components/src/ui/index.js
+++ b/packages/components/src/ui/index.js
@@ -3,4 +3,3 @@ export * from './control-label';
export * from './form-group';
export * from './shortcut';
export * from './spinner';
-export * from './visually-hidden';
diff --git a/packages/components/src/ui/visually-hidden/index.js b/packages/components/src/ui/visually-hidden/index.js
deleted file mode 100644
index 8bbed8b73ac9eb..00000000000000
--- a/packages/components/src/ui/visually-hidden/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as VisuallyHidden } from './component';
-export * from './hook';
diff --git a/packages/components/src/ui/visually-hidden/stories/index.js b/packages/components/src/ui/visually-hidden/stories/index.js
deleted file mode 100644
index b5f55c1fa1d24d..00000000000000
--- a/packages/components/src/ui/visually-hidden/stories/index.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Internal dependencies
- */
-import { VisuallyHidden } from '..';
-
-export default {
- title: 'G2 Components (Experimental)/VisuallyHidden',
- component: VisuallyHidden,
-};
-
-export const _default = () => (
- <>
- This should not show.
-
- This text will{ ' ' }
- but not inline always
- show.
-
-
-);
-
-export const withForwardedProps = () => (
- <>
- Additional props can be passed to VisuallyHidden and are forwarded to
- the rendered element.{ ' ' }
-
- Check out my data attribute!{ ' ' }
-
- Inspect the HTML to see!
-
-);
-
-export const withAdditionalClassNames = () => (
- <>
- Additional class names passed to VisuallyHidden extend the component
- class name.{ ' ' }
-
- Check out my class!{ ' ' }
-
- Inspect the HTML to see!
-
-);
diff --git a/packages/components/src/visually-hidden/README.md b/packages/components/src/visually-hidden/README.md
index 1f490f5134af26..9da03aeeb3b7b8 100644
--- a/packages/components/src/visually-hidden/README.md
+++ b/packages/components/src/visually-hidden/README.md
@@ -1,9 +1,17 @@
# VisuallyHidden
-A component used to render text intended to be visually hidden, but will show for alternate devices, for example a screen reader.
+`VisuallyHidden` is a component used to render text intended to be visually hidden, but will show for alternate devices, for example a screen reader.
-### Usage
+## Usage
```jsx
- Show text for screenreader.
+import { VisuallyHidden } from '@wordpress/components';
+
+function Example() {
+ return (
+
+ Code is Poetry
+
+ );
+}
```
diff --git a/packages/components/src/ui/visually-hidden/component.js b/packages/components/src/visually-hidden/component.js
similarity index 76%
rename from packages/components/src/ui/visually-hidden/component.js
rename to packages/components/src/visually-hidden/component.js
index 6912caa4e08433..a8da730c72f1c1 100644
--- a/packages/components/src/ui/visually-hidden/component.js
+++ b/packages/components/src/visually-hidden/component.js
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import { createComponent } from '../utils';
+import { createComponent } from '../ui/utils';
import { useVisuallyHidden } from './hook';
/**
@@ -10,12 +10,12 @@ import { useVisuallyHidden } from './hook';
*
* @example
* ```jsx
- * import { View, VisuallyHidden } from `@wordpress/components/ui`;
+ * import { VisuallyHidden } from `@wordpress/components`;
*
* function Example() {
* return (
*
- * Code is Poetry
+ * Code is Poetry
*
* );
* }
diff --git a/packages/components/src/visually-hidden/hook.js b/packages/components/src/visually-hidden/hook.js
new file mode 100644
index 00000000000000..38cbbfccb9da83
--- /dev/null
+++ b/packages/components/src/visually-hidden/hook.js
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { cx } from '@emotion/css';
+
+/**
+ * Internal dependencies
+ */
+import * as styles from './styles';
+
+/**
+ * @param {import('../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
+ */
+export function useVisuallyHidden( { className, ...props } ) {
+ // circumvent the context system and write the classnames ourselves
+ const classes = cx(
+ 'components-visually-hidden',
+ className,
+ styles.VisuallyHidden
+ );
+
+ return {
+ className: classes,
+ ...props,
+ };
+}
diff --git a/packages/components/src/visually-hidden/index.js b/packages/components/src/visually-hidden/index.js
index d320002f4fa27d..815ddc1ad47cc3 100644
--- a/packages/components/src/visually-hidden/index.js
+++ b/packages/components/src/visually-hidden/index.js
@@ -1,45 +1,2 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { renderAsRenderProps } from './utils';
-
-/**
- * @template {keyof JSX.IntrinsicElements | import('react').JSXElementConstructor} T
- * @typedef OwnProps
- * @property {T} [as='div'] Component to render, e.g. `"div"` or `MyComponent`.
- */
-
-/**
- * @template {keyof JSX.IntrinsicElements | import('react').JSXElementConstructor} T
- * @typedef {OwnProps & import('react').ComponentPropsWithRef} Props
- */
-
-/**
- * VisuallyHidden component to render text out non-visually
- * for use in devices such as a screen reader.
- *
- * @template {keyof JSX.IntrinsicElements | import('react').JSXElementConstructor} T
- * @param {Props} props
- * @param {import('react').Ref} forwardedRef
- * @return {JSX.Element} Element
- */
-function VisuallyHidden( { as = 'div', className, ...props }, forwardedRef ) {
- return renderAsRenderProps( {
- as,
- className: classnames( 'components-visually-hidden', className ),
- ...props,
- ref: forwardedRef,
- } );
-}
-
-export default forwardRef( VisuallyHidden );
+export { default as VisuallyHidden } from './component';
+export { useVisuallyHidden } from './hook';
diff --git a/packages/components/src/visually-hidden/stories/index.js b/packages/components/src/visually-hidden/stories/index.js
index 74cea0d833eb2d..497fb0c2ab23d8 100644
--- a/packages/components/src/visually-hidden/stories/index.js
+++ b/packages/components/src/visually-hidden/stories/index.js
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import VisuallyHidden from '..';
+import { VisuallyHidden } from '..';
export default {
title: 'Components/VisuallyHidden',
diff --git a/packages/components/src/visually-hidden/style.scss b/packages/components/src/visually-hidden/style.scss
deleted file mode 100644
index 8c8d8472d57793..00000000000000
--- a/packages/components/src/visually-hidden/style.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.components-visually-hidden {
- border: 0;
- clip: rect(1px, 1px, 1px, 1px);
- -webkit-clip-path: inset(50%);
- clip-path: inset(50%);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- word-wrap: normal !important;
-}
-
-.components-visually-hidden:focus {
- background-color: $gray-300;
- clip: auto !important;
- clip-path: none;
- color: #444;
- display: block;
- font-size: 1em;
- height: auto;
- left: 5px;
- line-height: normal;
- padding: 15px 23px 14px;
- text-decoration: none;
- top: 5px;
- width: auto;
- z-index: 100000;
-}
diff --git a/packages/components/src/ui/visually-hidden/styles.js b/packages/components/src/visually-hidden/styles.js
similarity index 92%
rename from packages/components/src/ui/visually-hidden/styles.js
rename to packages/components/src/visually-hidden/styles.js
index 2067f169aea909..78b0c95f312810 100644
--- a/packages/components/src/ui/visually-hidden/styles.js
+++ b/packages/components/src/visually-hidden/styles.js
@@ -6,7 +6,7 @@ import { css } from '@emotion/react';
/**
* Internal dependencies
*/
-import { COLORS } from '../../utils/colors-values';
+import { COLORS } from '../utils/colors-values';
export const VisuallyHidden = css`
border: 0;
diff --git a/packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
similarity index 100%
rename from packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap
rename to packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
diff --git a/packages/components/src/ui/visually-hidden/test/index.js b/packages/components/src/visually-hidden/test/index.js
similarity index 100%
rename from packages/components/src/ui/visually-hidden/test/index.js
rename to packages/components/src/visually-hidden/test/index.js
diff --git a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
index 344b2edd013c95..77951af0f8eff5 100644
--- a/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/post-preview-button/test/__snapshots__/index.js.snap
@@ -10,11 +10,11 @@ exports[`PostPreviewButton render() should render currentPostLink otherwise 1`]
variant="tertiary"
>
Preview
-
(opens in a new tab)
-
+
`;
@@ -28,10 +28,10 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] =
variant="tertiary"
>
Preview
-
(opens in a new tab)
-
+
`;
From f410c1844003e1b461703926b1f87d82744c0c83 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Mon, 28 Jun 2021 09:19:02 -0700
Subject: [PATCH 2/8] Convert to styled component
---
.../src/visually-hidden/component.js | 24 ++++++++------
.../components/src/visually-hidden/hook.js | 26 ----------------
.../components/src/visually-hidden/index.js | 1 -
.../components/src/visually-hidden/styles.js | 4 +--
.../components/src/visually-hidden/utils.js | 31 -------------------
5 files changed, 17 insertions(+), 69 deletions(-)
delete mode 100644 packages/components/src/visually-hidden/hook.js
delete mode 100644 packages/components/src/visually-hidden/utils.js
diff --git a/packages/components/src/visually-hidden/component.js b/packages/components/src/visually-hidden/component.js
index a8da730c72f1c1..100fafab69f048 100644
--- a/packages/components/src/visually-hidden/component.js
+++ b/packages/components/src/visually-hidden/component.js
@@ -1,8 +1,16 @@
/**
* Internal dependencies
*/
-import { createComponent } from '../ui/utils';
-import { useVisuallyHidden } from './hook';
+import { useContextSystem, contextConnect } from '../ui/context';
+import { VisuallyHidden as VisuallyHiddenWrapper } from './styles';
+
+/**
+ * @param {import('../ui/context').PolymorphicComponentProps<{}, 'div'>} props
+ */
+function VisuallyHidden( props ) {
+ const contextProps = useContextSystem( props, 'VisuallyHidden' );
+ return } T
- * @typedef OwnProps
- * @property {T} [as='div'] Component to render
- * @property {import('react').ReactNode | ((props: import('react').ComponentProps) => JSX.Element) } [children] Children or render props function
- */
-
-/**
- * @template {keyof JSX.IntrinsicElements | import('react').JSXElementConstructor} T
- * @typedef {OwnProps & import('react').ComponentProps} Props
- */
-
-/**
- * renderAsRenderProps is used to wrap a component and convert
- * the passed property "as" either a string or component, to the
- * rendered tag if a string, or component.
- *
- * See VisuallyHidden hidden for example.
- *
- * @template {keyof JSX.IntrinsicElements | import('react').JSXElementConstructor} T
- * @param {Props} props
- * @return {JSX.Element} The rendered element.
- */
-function renderAsRenderProps( { as: Component = 'div', ...props } ) {
- if ( typeof props.children === 'function' ) {
- return props.children( props );
- }
- return
@@ -47,7 +49,7 @@ Snapshot Diff:
-@@ -56,11 +56,11 @@
+@@ -58,11 +58,11 @@
>
@@ -94,7 +98,7 @@ Snapshot Diff:
-@@ -119,22 +119,22 @@
+@@ -123,22 +123,22 @@
@@ -127,7 +131,7 @@ Snapshot Diff:
- First value
+ Second value
-@@ -11,36 +11,36 @@
+@@ -11,38 +11,38 @@
onTouchMove={[Function bound handleChange]}
onTouchStart={[Function bound handleChange]}
role="application"
@@ -161,7 +165,9 @@ Snapshot Diff:
type="button"
/>
@@ -169,7 +175,7 @@ Snapshot Diff:
-@@ -56,11 +56,11 @@
+@@ -58,11 +58,11 @@
>
@@ -216,7 +224,7 @@ Snapshot Diff:
@@ -249,7 +257,7 @@ Snapshot Diff:
- First value
+ Second value
-@@ -11,36 +11,36 @@
+@@ -11,38 +11,38 @@
onTouchMove={[Function bound handleChange]}
onTouchStart={[Function bound handleChange]}
role="application"
@@ -283,7 +291,9 @@ Snapshot Diff:
type="button"
/>
@@ -291,7 +301,7 @@ Snapshot Diff:
@@ -338,7 +350,7 @@ Snapshot Diff:
-@@ -119,22 +119,22 @@
+@@ -123,22 +123,22 @@
@@ -371,7 +383,7 @@ Snapshot Diff:
- First value
+ Second value
-@@ -11,36 +11,36 @@
+@@ -11,38 +11,38 @@
onTouchMove={[Function bound handleChange]}
onTouchStart={[Function bound handleChange]}
role="application"
@@ -405,7 +417,9 @@ Snapshot Diff:
type="button"
/>
@@ -413,7 +427,7 @@ Snapshot Diff:
@@ -460,7 +476,7 @@ Snapshot Diff:
-@@ -119,22 +119,22 @@
+@@ -123,22 +123,22 @@
@@ -506,12 +522,12 @@ Snapshot Diff:
onKeyDown={[Function preventKeyEvents]}
style={
Object {
-@@ -36,11 +36,11 @@
- }
- type="button"
+@@ -38,11 +38,11 @@
/>
@@ -519,7 +535,7 @@ Snapshot Diff:
@@ -545,7 +561,7 @@ Snapshot Diff:
-@@ -119,22 +119,22 @@
+@@ -123,22 +123,22 @@
@@ -608,20 +624,20 @@ exports[`ColorPicker should render color picker 1`] = `
z-index: 100000;
}
-.emotion-6 {
+.emotion-4 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
}
-.emotion-8 {
+.emotion-6 {
margin-bottom: calc(4px * 2);
}
-.components-panel__row .emotion-8 {
+.components-panel__row .emotion-6 {
margin-bottom: inherit;
}
-.emotion-10 {
+.emotion-8 {
display: inline-block;
margin-bottom: calc(4px * 2);
}
@@ -665,7 +681,9 @@ exports[`ColorPicker should render color picker 1`] = `
type="button"
/>
Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -725,7 +743,9 @@ exports[`ColorPicker should render color picker 1`] = `
tabIndex="0"
/>
Move the arrow left or right to change hue.
@@ -742,13 +762,13 @@ exports[`ColorPicker should render color picker 1`] = `
className="components-color-picker__inputs-fields"
>
Color value in hexadecimal
diff --git a/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
index 9e064e5e1fbe03..3c67acedbb4ae6 100644
--- a/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
+++ b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
@@ -36,7 +36,9 @@ exports[`VisuallyHidden should render correctly 1`] = `
}
This is hidden
From db02019cef351c0fe180f6ad5e82a49725b8ebb7 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 30 Jun 2021 07:16:31 -0700
Subject: [PATCH 4/8] Add children prop
---
packages/components/src/visually-hidden/component.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/components/src/visually-hidden/component.js b/packages/components/src/visually-hidden/component.js
index 100fafab69f048..01ecb79af31f09 100644
--- a/packages/components/src/visually-hidden/component.js
+++ b/packages/components/src/visually-hidden/component.js
@@ -5,7 +5,7 @@ import { useContextSystem, contextConnect } from '../ui/context';
import { VisuallyHidden as VisuallyHiddenWrapper } from './styles';
/**
- * @param {import('../ui/context').PolymorphicComponentProps<{}, 'div'>} props
+ * @param {import('../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
*/
function VisuallyHidden( props ) {
const contextProps = useContextSystem( props, 'VisuallyHidden' );
From ec59ab79ae8f55e5eef3d6e2ee1009f8137b1adb Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 30 Jun 2021 09:15:43 -0700
Subject: [PATCH 5/8] Use View naming convention
---
.../components/src/ui/visually-hidden/hook.js | 26 -------------------
.../src/visually-hidden/component.js | 4 +--
.../components/src/visually-hidden/styles.js | 2 +-
3 files changed, 3 insertions(+), 29 deletions(-)
delete mode 100644 packages/components/src/ui/visually-hidden/hook.js
diff --git a/packages/components/src/ui/visually-hidden/hook.js b/packages/components/src/ui/visually-hidden/hook.js
deleted file mode 100644
index 4ec0c056d4b490..00000000000000
--- a/packages/components/src/ui/visually-hidden/hook.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Internal dependencies
- */
-import * as styles from './styles';
-import { useCx } from '../../utils/hooks/use-cx';
-
-// duplicate this for the sake of being able to export it, it'll be removed when we replace VisuallyHidden in components/src anyway
-/** @typedef {import('../context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} Props */
-
-/**
- * @param {import('../context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
- */
-export function useVisuallyHidden( { className, ...props } ) {
- // circumvent the context system and write the classnames ourselves
- const cx = useCx();
- const classes = cx(
- 'components-visually-hidden wp-components-visually-hidden',
- className,
- styles.VisuallyHidden
- );
-
- return {
- className: classes,
- ...props,
- };
-}
diff --git a/packages/components/src/visually-hidden/component.js b/packages/components/src/visually-hidden/component.js
index 01ecb79af31f09..2c1e24181fb84e 100644
--- a/packages/components/src/visually-hidden/component.js
+++ b/packages/components/src/visually-hidden/component.js
@@ -2,14 +2,14 @@
* Internal dependencies
*/
import { useContextSystem, contextConnect } from '../ui/context';
-import { VisuallyHidden as VisuallyHiddenWrapper } from './styles';
+import { VisuallyHiddenView } from './styles';
/**
* @param {import('../ui/context').PolymorphicComponentProps<{ children: import('react').ReactNode }, 'div'>} props
*/
function VisuallyHidden( props ) {
const contextProps = useContextSystem( props, 'VisuallyHidden' );
- return
+ );
}
/**
diff --git a/packages/components/src/visually-hidden/styles.js b/packages/components/src/visually-hidden/styles.js
index 4b53d71f9ed6a3..d061df7d46e963 100644
--- a/packages/components/src/visually-hidden/styles.js
+++ b/packages/components/src/visually-hidden/styles.js
@@ -1,40 +1,14 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * Internal dependencies
- */
-import { COLORS } from '../utils/colors-values';
-
-export const VisuallyHiddenView = styled.div`
- border: 0;
- clip: rect( 1px, 1px, 1px, 1px );
- -webkit-clip-path: inset( 50% );
- clip-path: inset( 50% );
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- word-wrap: normal !important;
-
- &:focus {
- background-color: ${ COLORS.lightGray[ '300' ] };
- clip: auto !important;
- clip-path: none;
- color: #444;
- display: block;
- font-size: 1em;
- height: auto;
- left: 5px;
- line-height: normal;
- padding: 15px 23px 14px;
- text-decoration: none;
- top: 5px;
- width: auto;
- z-index: 100000;
- }
-`;
+/** @type {import('react').CSSProperties} */
+export const visuallyHidden = {
+ border: 0,
+ clip: 'rect(1px, 1px, 1px, 1px)',
+ WebkitClipPath: 'inset( 50% )',
+ clipPath: 'inset( 50% )',
+ height: '1px',
+ margin: '-1px',
+ overflow: 'hidden',
+ padding: 0,
+ position: 'absolute',
+ width: '1px',
+ wordWrap: 'normal',
+};
diff --git a/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
index 3c67acedbb4ae6..2a2d35499ff81f 100644
--- a/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
+++ b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
@@ -1,44 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VisuallyHidden should render correctly 1`] = `
-.emotion-0 {
- border: 0;
- clip: rect( 1px, 1px, 1px, 1px );
- -webkit-clip-path: inset( 50% );
- -webkit-clip-path: inset( 50% );
- clip-path: inset( 50% );
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- word-wrap: normal!important;
-}
-
-.emotion-0:focus {
- background-color: #edeff0;
- clip: auto!important;
- -webkit-clip-path: none;
- clip-path: none;
- color: #444;
- display: block;
- font-size: 1em;
- height: auto;
- left: 5px;
- line-height: normal;
- padding: 15px 23px 14px;
- -webkit-text-decoration: none;
- text-decoration: none;
- top: 5px;
- width: auto;
- z-index: 100000;
-}
-
This is hidden
From 6fbcdc793bcd2fe6d7f99509ce486a114cdad134 Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Mon, 12 Jul 2021 09:53:24 -0700
Subject: [PATCH 7/8] Update color picker snapshots
---
.../test/__snapshots__/index.js.snap | 251 +++++++++---------
1 file changed, 126 insertions(+), 125 deletions(-)
diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
index 808b56fc73cffc..0445939a366bb3 100644
--- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -39,17 +39,17 @@ Snapshot Diff:
type="button"
/>
- Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
-
-
-
-@@ -58,11 +58,11 @@
+ style={
+ Object {
+ "WebkitClipPath": "inset( 50% )",
+ "border": 0,
+ "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -73,11 +73,11 @@
>
-
- Move the arrow left or right to change hue.
-
-
@@ -165,17 +166,17 @@ Snapshot Diff:
type="button"
/>
- Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
-
-
-
- Move the arrow left or right to change hue.
-
-
-
-@@ -123,22 +123,22 @@
+ style={
+ Object {
+ "WebkitClipPath": "inset( 50% )",
+ "border": 0,
+ "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -154,22 +154,22 @@
@@ -291,17 +293,17 @@ Snapshot Diff:
type="button"
/>
- Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
-
-
-
- Move the arrow left or right to change hue.
-
-
-
-@@ -123,22 +123,22 @@
+ style={
+ Object {
+ "WebkitClipPath": "inset( 50% )",
+ "border": 0,
+ "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -154,22 +154,22 @@
@@ -417,17 +420,17 @@ Snapshot Diff:
type="button"
/>
- Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
-
-
-
- Move the arrow left or right to change hue.
-
-
-
-@@ -123,22 +123,22 @@
+ style={
+ Object {
+ "WebkitClipPath": "inset( 50% )",
+ "border": 0,
+ "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -154,22 +154,22 @@
@@ -525,17 +529,17 @@ Snapshot Diff:
@@ -38,11 +38,11 @@
/>
- Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
-
-
- Move the arrow left or right to change hue.
-
-
-
-@@ -123,22 +123,22 @@
+ style={
+ Object {
+ "WebkitClipPath": "inset( 50% )",
+ "border": 0,
+ "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -154,22 +154,22 @@
@@ -591,53 +595,19 @@ Snapshot Diff:
exports[`ColorPicker should render color picker 1`] = `
.emotion-0 {
- border: 0;
- clip: rect( 1px, 1px, 1px, 1px );
- -webkit-clip-path: inset( 50% );
- -webkit-clip-path: inset( 50% );
- clip-path: inset( 50% );
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- word-wrap: normal!important;
-}
-
-.emotion-0:focus {
- background-color: #edeff0;
- clip: auto!important;
- -webkit-clip-path: none;
- clip-path: none;
- color: #444;
- display: block;
- font-size: 1em;
- height: auto;
- left: 5px;
- line-height: normal;
- padding: 15px 23px 14px;
- -webkit-text-decoration: none;
- text-decoration: none;
- top: 5px;
- width: auto;
- z-index: 100000;
-}
-
-.emotion-4 {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-size: 13px;
}
-.emotion-6 {
+.emotion-2 {
margin-bottom: calc(4px * 2);
}
-.components-panel__row .emotion-6 {
+.components-panel__row .emotion-2 {
margin-bottom: inherit;
}
-.emotion-8 {
+.emotion-4 {
display: inline-block;
margin-bottom: calc(4px * 2);
}
@@ -681,10 +651,25 @@ exports[`ColorPicker should render color picker 1`] = `
type="button"
/>
Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
@@ -742,14 +727,30 @@ exports[`ColorPicker should render color picker 1`] = `
}
tabIndex="0"
/>
-
Move the arrow left or right to change hue.
-
+
Color value in hexadecimal
From cfe4ba2d497bf8522af1c0d377c035638d877a0a Mon Sep 17 00:00:00 2001
From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com>
Date: Wed, 14 Jul 2021 09:42:35 -0700
Subject: [PATCH 8/8] Render a View to allow for polymorphism and forward the
ref
---
.../test/__snapshots__/index.js.snap | 3 -
.../test/__snapshots__/index.js.snap | 79 +++++++++----------
.../src/visually-hidden/component.js | 7 +-
.../test/__snapshots__/index.js.snap | 2 +-
4 files changed, 43 insertions(+), 48 deletions(-)
delete mode 100644 packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
deleted file mode 100644
index 43a6e4b0476981..00000000000000
--- a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Basic rendering should render 1`] = `"Currently selected link settings
-
@@ -166,7 +165,7 @@ Snapshot Diff:
type="button"
/>
-
@@ -293,7 +291,7 @@ Snapshot Diff:
type="button"
/>
-
@@ -420,7 +417,7 @@ Snapshot Diff:
type="button"
/>
-
@@ -529,7 +525,7 @@ Snapshot Diff:
@@ -38,11 +38,11 @@
/>
+
@@ -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);
}
@@ -651,7 +647,7 @@ exports[`ColorPicker should render color picker 1`] = `
type="button"
/>
-
Move the arrow left or right to change hue.
-
+
@@ -763,13 +758,13 @@ exports[`ColorPicker should render color picker 1`] = `
className="components-color-picker__inputs-fields"
>
Color value in hexadecimal
diff --git a/packages/components/src/visually-hidden/component.js b/packages/components/src/visually-hidden/component.js
index 24c9d6ef080c43..01b9e65ddc5119 100644
--- a/packages/components/src/visually-hidden/component.js
+++ b/packages/components/src/visually-hidden/component.js
@@ -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} forwardedRef
*/
-function VisuallyHidden( props ) {
+function VisuallyHidden( props, forwardedRef ) {
const { style: styleProp, ...contextProps } = useContextSystem(
props,
'VisuallyHidden'
);
return (
-
diff --git a/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
index 2a2d35499ff81f..5c045e322e756d 100644
--- a/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
+++ b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
@@ -2,7 +2,7 @@
exports[`VisuallyHidden should render correctly 1`] = `