Revert "Revert "components: Promote VisuallyHidden from ui into full components (#31244)"" (#31902)

* Revert "Revert "components: Promote VisuallyHidden from ui into full components (#31244)" (#31882)"

This reverts commit 269f31a.

* Convert to styled component

* Update snapshots

* Add children prop

* Use View naming convention

* Use inline styles and remove focus styles

* Update color picker snapshots

* Render a View to allow for polymorphism and forward the ref

Author: sarayourfriend

packages/components/src/alignment-matrix-control/cell.js

@@ -3,7 +3,7 @@
  */
 import { CompositeItem } from '../composite';
 import Tooltip from '../tooltip';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 /**
  * Internal dependencies

packages/components/src/base-control/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 import {
 	Wrapper,
 	StyledField,

packages/components/src/button/index.js

@@ -15,7 +15,7 @@ import { forwardRef } from '@wordpress/element';
  */
 import Tooltip from '../tooltip';
 import Icon from '../icon';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ];
 

packages/components/src/button/test/index.js

@@ -13,7 +13,7 @@ import { plusCircle } from '@wordpress/icons';
  * Internal dependencies
  */
 import ButtonWithForwardedRef, { Button } from '../';
-import VisuallyHidden from '../../visually-hidden';
+import { VisuallyHidden } from '../../visually-hidden';
 
 describe( 'Button', () => {
 	describe( 'basic rendering', () => {

packages/components/src/color-picker/hue.js

@@ -43,7 +43,7 @@ import { TAB } from '@wordpress/keycodes';
  */
 import { calculateHueChange } from './utils';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 export class Hue extends Component {
 	constructor() {

packages/components/src/color-picker/inputs.js

@@ -18,7 +18,7 @@ import { chevronDown } from '@wordpress/icons';
  */
 import Button from '../button';
 import TextControl from '../text-control';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 import { isValidHex } from './utils';
 
 /* Wrapper for TextControl, only used to handle intermediate state while typing. */

packages/components/src/color-picker/saturation.js

@@ -44,7 +44,7 @@ import { compose, pure, withInstanceId } from '@wordpress/compose';
 import { calculateSaturationChange } from './utils';
 import Button from '../button';
 import KeyboardShortcuts from '../keyboard-shortcuts';
-import VisuallyHidden from '../visually-hidden';
+import { VisuallyHidden } from '../visually-hidden';
 
 export class Saturation extends Component {
 	constructor( props ) {