@@ -452,7 +452,7 @@ Snapshot Diff:
tabIndex="0"
/>
@@ -511,7 +511,7 @@ Snapshot Diff:
type="button"
/>
@@ -537,7 +537,7 @@ Snapshot Diff:
tabIndex="0"
/>
@@ -574,20 +574,56 @@ Snapshot Diff:
`;
exports[`ColorPicker should render color picker 1`] = `
-.emotion-4 {
+.emotion-0 {
+ border: 0;
+ -webkit-clip: rect( 1px,1px,1px,1px );
+ 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;
+ -webkit-clip: auto !important;
+ 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-10 {
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: 8px;
}
-.components-panel__row .emotion-2 {
+.components-panel__row .emotion-8 {
margin-bottom: inherit;
}
-.emotion-0 {
+.emotion-6 {
display: inline-block;
margin-bottom: 8px;
}
@@ -631,7 +667,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 +727,7 @@ exports[`ColorPicker should render color picker 1`] = `
tabIndex="0"
/>
Move the arrow left or right to change hue.
@@ -708,13 +744,13 @@ exports[`ColorPicker should render color picker 1`] = `
className="components-color-picker__inputs-fields"
>
Color value in hexadecimal
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 13c2049b894bf..255bb2caefaf2 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -46,4 +46,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 fd4af178cf620..1b3e3665205f7 100644
--- a/packages/components/src/ui/form-group/form-group-label.js
+++ b/packages/components/src/ui/form-group/form-group-label.js
@@ -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 1276b0dfd896c..c081d671b65cd 100644
--- a/packages/components/src/ui/index.js
+++ b/packages/components/src/ui/index.js
@@ -14,4 +14,3 @@ export * from './text';
export * from './truncate';
export * from './v-stack';
export * from './view';
-export * from './visually-hidden';
diff --git a/packages/components/src/ui/visually-hidden/README.md b/packages/components/src/ui/visually-hidden/README.md
deleted file mode 100644
index 6200eed80dacb..0000000000000
--- a/packages/components/src/ui/visually-hidden/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# VisuallyHidden
-
-`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
-
-```jsx
-import { View, VisuallyHidden } from '@wordpress/components/ui';
-
-function Example() {
- return (
-
- Code is Poetry
-
- );
-}
-```
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 8bbed8b73ac9e..0000000000000
--- 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 b5f55c1fa1d24..0000000000000
--- 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 1f490f5134af2..9da03aeeb3b7b 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 6912caa4e0843..a8da730c72f1c 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/ui/visually-hidden/hook.js b/packages/components/src/visually-hidden/hook.js
similarity index 54%
rename from packages/components/src/ui/visually-hidden/hook.js
rename to packages/components/src/visually-hidden/hook.js
index d46c65cb8cbfe..61205a5cf2335 100644
--- a/packages/components/src/ui/visually-hidden/hook.js
+++ b/packages/components/src/visually-hidden/hook.js
@@ -8,16 +8,13 @@ import { cx } from 'emotion';
*/
import * as styles from './styles';
-// 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').ViewOwnProps<{}, 'div'>} Props */
-
/**
- * @param {import('../context').ViewOwnProps<{}, 'div'>} props
+ * @param {import('../ui/context').ViewOwnProps<{}, 'div'>} props
*/
export function useVisuallyHidden( { className, ...props } ) {
// circumvent the context system and write the classnames ourselves
const classes = cx(
- 'components-visually-hidden wp-components-visually-hidden',
+ 'components-visually-hidden',
className,
styles.VisuallyHidden
);
diff --git a/packages/components/src/visually-hidden/index.js b/packages/components/src/visually-hidden/index.js
index 92801940d38b9..4c59b9138c4f2 100644
--- a/packages/components/src/visually-hidden/index.js
+++ b/packages/components/src/visually-hidden/index.js
@@ -1,46 +1,2 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { renderAsRenderProps } from './utils';
-import { withNextComponent } from './next';
-
-/**
- * @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 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 withNextComponent( forwardRef( VisuallyHidden ) );
+export { default } from './component';
+export * from './hook';
diff --git a/packages/components/src/visually-hidden/next.js b/packages/components/src/visually-hidden/next.js
deleted file mode 100644
index 088f90f6be5ed..0000000000000
--- a/packages/components/src/visually-hidden/next.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Internal dependencies
- */
-import { VisuallyHidden as NextVisuallyHidden } from '../ui/visually-hidden';
-import { withNext } from '../ui/context';
-
-const VisuallyHidden =
- process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextVisuallyHidden : undefined;
-
-/**
- * There is nothing to adapt, the props are equal.
- *
- * @param {import('.').Props} props
- * @return {import('../ui/visually-hidden/hook').Props} Adapted props
- */
-const adapter = ( props ) =>
- /** @type {import('../ui/visually-hidden/hook').Props} */ ( props );
-
-/**
- * The generic type is too difficult to type here, default to any to circumvent that.
- *
- * @param {import('react').ForwardRefExoticComponent>} Current
- */
-export function withNextComponent( Current ) {
- return withNext(
- Current,
- VisuallyHidden,
- 'WPComponentsVisuallyHidden',
- adapter
- );
-}
diff --git a/packages/components/src/visually-hidden/stories/index.js b/packages/components/src/visually-hidden/stories/index.js
index 2b45ad1d15121..497fb0c2ab23d 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 8c8d8472d5779..0000000000000
--- 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 9265d0c0aee60..fe034ae7e94d6 100644
--- a/packages/components/src/ui/visually-hidden/styles.js
+++ b/packages/components/src/visually-hidden/styles.js
@@ -2,10 +2,11 @@
* External dependencies
*/
import { css } from 'emotion';
+
/**
* 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 89%
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
index e6a1b7bd905bd..c144748136e7e 100644
--- a/packages/components/src/ui/visually-hidden/test/__snapshots__/index.js.snap
+++ b/packages/components/src/visually-hidden/test/__snapshots__/index.js.snap
@@ -38,7 +38,7 @@ exports[`VisuallyHidden should render correctly 1`] = `
}
This is hidden
diff --git a/packages/components/src/ui/visually-hidden/test/index.js b/packages/components/src/visually-hidden/test/index.js
similarity index 92%
rename from packages/components/src/ui/visually-hidden/test/index.js
rename to packages/components/src/visually-hidden/test/index.js
index 6925edbee9eef..f753a7c41f050 100644
--- a/packages/components/src/ui/visually-hidden/test/index.js
+++ b/packages/components/src/visually-hidden/test/index.js
@@ -6,7 +6,7 @@ import { render } from '@testing-library/react';
/**
* Internal dependencies
*/
-import { VisuallyHidden, useVisuallyHidden } from '..';
+import VisuallyHidden, { useVisuallyHidden } from '..';
describe( 'useVisuallyHidden', () => {
it( 'should apply the expected classnames', () => {
diff --git a/packages/components/src/visually-hidden/utils.js b/packages/components/src/visually-hidden/utils.js
deleted file mode 100644
index d8be9e759c614..0000000000000
--- a/packages/components/src/visually-hidden/utils.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * @template {keyof JSX.IntrinsicElements | import('react').JSXElementConstructor} 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
(opens in a new tab)
-
+
`;
@@ -28,10 +28,10 @@ exports[`PostPreviewButton render() should render previewLink if provided 1`] =
target="wp-preview-1"
>
Preview
-
(opens in a new tab)
-
+
`;