Components: consolidate utils to remove ui/ (#54922)

* Consolidate util colors and ui/utils colors

* Move ui/utils space and update imports

* Move remaining ui/utils files

* Remove README

* Update changelog

* Remove old /ui/ references

---------

Co-authored-by: Marin Atanasov <tyxla@abv.bg>

docs/tool/manifest.js

@@ -11,7 +11,6 @@ const componentPaths = glob( 'packages/components/src/*/**/README.md', {
 	// Don't expose documentation for mobile only and G2 components just yet.
 	ignore: [
 		'**/src/mobile/**/README.md',
-		'**/src/ui/**/README.md',
 		'packages/components/src/theme/README.md',
 		'packages/components/src/view/README.md',
 		'packages/components/src/dropdown-menu-v2/README.md',

packages/components/CHANGELOG.md

@@ -19,7 +19,7 @@
 -   Update `uuid` package to 9.0.1 ([#54725](https://github.com/WordPress/gutenberg/pull/54725)).
 -   `ContextSystemProvider`: Move out of `ui/` ([#54847](https://github.com/WordPress/gutenberg/pull/54847)).
 -   `SlotFill`: Migrate to TypeScript and Convert to Functional Component `<Slot bubblesVirtually />`. ([#51350](https://github.com/WordPress/gutenberg/pull/51350)).
-
+-   `Components`: move `ui/utils` to `utils` and remove `ui/` folder ([#54922](https://github.com/WordPress/gutenberg/pull/54922)).
 
 ### Internal
 

packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import { Text } from '../../text';
 import CONFIG from '../../utils/config-values';
 

packages/components/src/base-control/styles/base-control-styles.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { baseLabelTypography, boxSizingReset, font, COLORS } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 export const Wrapper = styled.div`
 	font-family: ${ font( 'default.fontFamily' ) };

packages/components/src/border-control/styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { StyledLabel } from '../base-control/styles/base-control-styles';
 import {
 	ValueInput as UnitControlWrapper,

packages/components/src/card/card/README.md

@@ -66,7 +66,7 @@ Determines the amount of padding within the component.
 
 ### Inherited props
 
-`Card` also inherits all of the [`Surface` props](/packages/components/src/ui/surface/README.md#props).
+`Card` also inherits all of the [`Surface` props](/packages/components/src/surface/README.md#props).
 
 ## Sub-Components
 

packages/components/src/color-picker/hex-input.tsx

@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { InputControl } from '../input-control';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 import type { HexInputProps } from './types';

packages/components/src/color-picker/input-with-slider.tsx

@@ -4,7 +4,7 @@
 import { HStack } from '../h-stack';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { InputWithSliderProps } from './types';

packages/components/src/color-picker/styles.ts

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
 import NumberControl from '../number-control';
 import InnerSelectControl from '../select-control';
 import InnerRangeControl from '../range-control';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
 import Button from '../button';
 import { Flex } from '../flex';

packages/components/src/combobox-control/styles.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import type { ComboboxControlProps } from './types';
 
 const deprecatedDefaultSize = ( {

packages/components/src/date-time/date/styles.ts

@@ -10,7 +10,7 @@ import Button from '../../button';
 import { COLORS, CONFIG } from '../../utils';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 export const Wrapper = styled.div`
 	box-sizing: border-box;

packages/components/src/date-time/time/styles.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { COLORS, CONFIG } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import {
 	Input,
 	BackdropUI,

packages/components/src/divider/styles.ts

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { rtl } from '../utils';
 import type { DividerProps } from './types';
 

packages/components/src/divider/types.ts

@@ -7,7 +7,7 @@ import type { SeparatorProps } from 'reakit';
 /**
  * Internal dependencies
  */
-import type { SpaceInput } from '../ui/utils/space';
+import type { SpaceInput } from '../utils/space';
 
 export type DividerProps = Omit<
 	SeparatorProps,

packages/components/src/dropdown-menu-v2/styles.ts

@@ -9,7 +9,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
  * Internal dependencies
  */
 import { COLORS, font, rtl, CONFIG } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import Icon from '../icon';
 import type { DropdownMenuInternalContext } from './types';
 

packages/components/src/dropdown/styles.ts

@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import type { DropdownContentWrapperProps } from './types';
 
 const padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => {

packages/components/src/flex/flex/hook.ts

@@ -14,8 +14,8 @@ import deprecated from '@wordpress/deprecated';
  */
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useResponsiveValue } from '../../ui/utils/use-responsive-value';
-import { space } from '../../ui/utils/space';
+import { useResponsiveValue } from '../../utils/use-responsive-value';
+import { space } from '../../utils/space';
 import * as styles from '../styles';
 import { useCx } from '../../utils';
 import type { FlexProps } from '../types';

packages/components/src/flex/types.ts

@@ -6,8 +6,8 @@ import type { CSSProperties, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { ResponsiveCSSValue } from '../ui/utils/types';
-import type { SpaceInput } from '../ui/utils/space';
+import type { ResponsiveCSSValue } from '../utils/types';
+import type { SpaceInput } from '../utils/space';
 
 export type FlexDirection = ResponsiveCSSValue<
 	CSSProperties[ 'flexDirection' ]

packages/components/src/font-size-picker/styles.ts

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
 import BaseControl from '../base-control';
 import Button from '../button';
 import { HStack } from '../h-stack';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { COLORS } from '../utils';
 
 export const Container = styled.fieldset`

packages/components/src/form-token-field/styles.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { Flex } from '../flex';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { boxSizingReset } from '../utils';
 
 type TokensAndInputWrapperProps = {

packages/components/src/grid/hook.ts

@@ -14,7 +14,7 @@ import { useMemo } from '@wordpress/element';
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
 import { getAlignmentProps } from './utils';
-import { useResponsiveValue } from '../ui/utils/use-responsive-value';
+import { useResponsiveValue } from '../utils/use-responsive-value';
 import CONFIG from '../utils/config-values';
 import { useCx } from '../utils/hooks/use-cx';
 import type { GridProps } from './types';

packages/components/src/grid/types.ts

@@ -6,7 +6,7 @@ import type { CSSProperties, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { ResponsiveCSSValue } from '../ui/utils/types';
+import type { ResponsiveCSSValue } from '../utils/types';
 
 type GridAlignment =
 	| 'bottom'

packages/components/src/h-stack/hook.tsx

@@ -10,7 +10,7 @@ import type { WordPressComponentProps } from '../context';
 import { hasConnectNamespace, useContextSystem } from '../context';
 import { FlexItem, useFlex } from '../flex';
 import { getAlignmentProps } from './utils';
-import { getValidChildren } from '../ui/utils/get-valid-children';
+import { getValidChildren } from '../utils/get-valid-children';
 import type { Props } from './types';
 
 export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {

packages/components/src/heading/hook.ts

@@ -4,7 +4,7 @@
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
 import { useText } from '../text';
-import { getHeadingFontSize } from '../ui/utils/font-size';
+import { getHeadingFontSize } from '../utils/font-size';
 import { CONFIG, COLORS } from '../utils';
 import type { HeadingProps } from './types';
 

packages/components/src/input-control/index.tsx

@@ -16,7 +16,7 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { useDraft } from './utils';
 import BaseControl from '../base-control';
 

packages/components/src/input-control/styles/input-control-styles.tsx

@@ -14,7 +14,7 @@ import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { baseLabelTypography, COLORS, CONFIG, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 type ContainerProps = {
 	disabled?: boolean;

packages/components/src/navigation/styles/navigation-styles.tsx

@@ -16,7 +16,7 @@ import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
 import { reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import SearchControl from '../../search-control';
 
 export const NavigationUI = styled.div`

packages/components/src/number-control/styles/number-control-styles.ts

@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
 import InputControl from '../../input-control';
 import { COLORS } from '../../utils';
 import Button from '../../button';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 const htmlArrowStyles = ( { hideHTMLArrows }: { hideHTMLArrows: boolean } ) => {
 	if ( ! hideHTMLArrows ) {

packages/components/src/palette-edit/styles.js

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
 import Button from '../button';
 import { Heading } from '../heading';
 import { HStack } from '../h-stack';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';

packages/components/src/range-control/index.tsx

@@ -37,7 +37,7 @@ import {
 
 import type { RangeControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 
 const noop = () => {};
 

packages/components/src/range-control/styles/range-control-styles.ts

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
  */
 import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 import type {
 	RangeMarkProps,
@@ -301,7 +301,7 @@ export const Tooltip = styled.span< TooltipProps >`
 `;
 
 // @todo: Refactor RangeControl with latest HStack configuration
-// @wordpress/components/ui/hstack.
+// @see: packages/components/src/h-stack
 export const InputNumber = styled( NumberControl )`
 	display: inline-block;
 	font-size: 13px;

packages/components/src/select-control/styles/select-control-styles.ts

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { COLORS, rtl } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 import type { SelectControlProps } from '../types';
 import InputControlSuffixWrapper from '../../input-control/input-suffix-wrapper';
 

packages/components/src/spacer/hook.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  */
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { rtl, useCx } from '../utils';
 import type { SpacerProps } from './types';
 

packages/components/src/spacer/types.ts

@@ -6,7 +6,7 @@ import type { ReactNode } from 'react';
 /**
  * Internal dependencies
  */
-import type { SpaceInput } from '../ui/utils/space';
+import type { SpaceInput } from '../utils/space';
 
 export type SpacerProps = {
 	/**

packages/components/src/spinner/stories/index.story.tsx

@@ -7,7 +7,7 @@ import type { StoryFn, Meta } from '@storybook/react';
  * Internal dependencies
  */
 import Spinner from '../';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 const meta: Meta< typeof Spinner > = {
 	title: 'Components/Spinner',

packages/components/src/text/get-line-height.ts

@@ -7,7 +7,7 @@ import type { CSSProperties } from 'react';
  * Internal dependencies
  */
 import type { Props } from './types';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 import { CONFIG } from '../utils';
 
 export function getLineHeight(

packages/components/src/text/hook.js

@@ -13,10 +13,10 @@ import { useMemo, Children, cloneElement } from '@wordpress/element';
  */
 import { hasConnectNamespace, useContextSystem } from '../context';
 import { useTruncate } from '../truncate';
-import { getOptimalTextShade } from '../ui/utils';
+import { getOptimalTextShade } from '../utils/colors';
 import * as styles from './styles';
 import { createHighlighterText } from './utils';
-import { getFontSize } from '../ui/utils/font-size';
+import { getFontSize } from '../utils/font-size';
 import { CONFIG, COLORS } from '../utils';
 import { getLineHeight } from './get-line-height';
 import { useCx } from '../utils/hooks/use-cx';

packages/components/src/text/test/index.tsx

@@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { getFontSize } from '../../ui/utils/font-size';
+import { getFontSize } from '../../utils/font-size';
 import { COLORS } from '../../utils';
 import { Text } from '../';
 

packages/components/src/toggle-control/index.tsx

@@ -19,7 +19,7 @@ import type { WordPressComponentProps } from '../context/wordpress-component';
 import type { ToggleControlProps } from './types';
 import { HStack } from '../h-stack';
 import { useCx } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 
 /**
  * ToggleControl is used to generate a toggle user interface.

packages/components/src/tools-panel/styles.ts

@@ -14,7 +14,7 @@ import {
 } from '../base-control/styles/base-control-styles';
 import { LabelWrapper } from '../input-control/styles/input-control-styles';
 import { COLORS, CONFIG, rtl } from '../utils';
-import { space } from '../ui/utils/space';
+import { space } from '../utils/space';
 
 const toolsPanelGrid = {
 	columns: ( columns: number ) => css`