From 5cb39b55cc230b2c2116b83c0f964500b4ab0b17 Mon Sep 17 00:00:00 2001 From: Brooke <35543432+brookewp@users.noreply.github.com> Date: Mon, 2 Oct 2023 11:12:04 -0700 Subject: [PATCH] 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 --- docs/tool/manifest.js | 1 - packages/components/CHANGELOG.md | 2 +- .../styles/angle-picker-control-styles.tsx | 2 +- .../styles/base-control-styles.ts | 2 +- .../components/src/border-control/styles.ts | 2 +- packages/components/src/card/card/README.md | 2 +- .../components/src/color-picker/hex-input.tsx | 2 +- .../src/color-picker/input-with-slider.tsx | 2 +- .../components/src/color-picker/styles.ts | 2 +- .../components/src/combobox-control/styles.ts | 2 +- .../components/src/date-time/date/styles.ts | 2 +- .../components/src/date-time/time/styles.ts | 2 +- packages/components/src/divider/styles.ts | 2 +- packages/components/src/divider/types.ts | 2 +- .../components/src/dropdown-menu-v2/styles.ts | 2 +- packages/components/src/dropdown/styles.ts | 2 +- packages/components/src/flex/flex/hook.ts | 4 +- packages/components/src/flex/types.ts | 4 +- .../components/src/font-size-picker/styles.ts | 2 +- .../components/src/form-token-field/styles.ts | 2 +- packages/components/src/grid/hook.ts | 2 +- packages/components/src/grid/types.ts | 2 +- packages/components/src/h-stack/hook.tsx | 2 +- packages/components/src/heading/hook.ts | 2 +- .../components/src/input-control/index.tsx | 2 +- .../styles/input-control-styles.tsx | 2 +- .../navigation/styles/navigation-styles.tsx | 2 +- .../styles/number-control-styles.ts | 2 +- .../components/src/palette-edit/styles.js | 2 +- .../components/src/range-control/index.tsx | 2 +- .../styles/range-control-styles.ts | 4 +- .../styles/select-control-styles.ts | 2 +- packages/components/src/spacer/hook.ts | 2 +- packages/components/src/spacer/types.ts | 2 +- .../src/spinner/stories/index.story.tsx | 2 +- .../components/src/text/get-line-height.ts | 2 +- packages/components/src/text/hook.js | 4 +- packages/components/src/text/test/index.tsx | 2 +- .../components/src/toggle-control/index.tsx | 2 +- packages/components/src/tools-panel/styles.ts | 2 +- packages/components/src/ui/README.md | 5 - packages/components/src/ui/utils/colors.js | 98 ------------------- packages/components/src/ui/utils/index.js | 1 - .../components/src/ui/utils/test/colors.js | 42 -------- .../styles/unit-control-styles.ts | 2 +- packages/components/src/utils/colors.js | 91 +++++++++++++++++ .../components/src/utils/config-values.js | 2 +- .../src/{ui => }/utils/font-size.ts | 2 +- .../src/{ui => }/utils/get-valid-children.ts | 0 .../components/src/{ui => }/utils/space.ts | 0 packages/components/src/utils/test/colors.js | 40 +++++++- .../src/{ui => }/utils/test/space.js | 0 .../components/src/{ui => }/utils/types.ts | 0 .../{ui => }/utils/use-responsive-value.ts | 0 packages/components/src/z-stack/component.tsx | 2 +- 55 files changed, 177 insertions(+), 195 deletions(-) delete mode 100644 packages/components/src/ui/README.md delete mode 100644 packages/components/src/ui/utils/colors.js delete mode 100644 packages/components/src/ui/utils/index.js delete mode 100644 packages/components/src/ui/utils/test/colors.js rename packages/components/src/{ui => }/utils/font-size.ts (96%) rename packages/components/src/{ui => }/utils/get-valid-children.ts (100%) rename packages/components/src/{ui => }/utils/space.ts (100%) rename packages/components/src/{ui => }/utils/test/space.js (100%) rename packages/components/src/{ui => }/utils/types.ts (100%) rename packages/components/src/{ui => }/utils/use-responsive-value.ts (100%) diff --git a/docs/tool/manifest.js b/docs/tool/manifest.js index b061fa5149c698..ced8866edd5a4e 100644 --- a/docs/tool/manifest.js +++ b/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', diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e0a80b0295aa7b..c33d75af08ed85 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -28,7 +28,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 ``. ([#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)). ## 25.8.0 (2023-09-20) diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx index 65ac5b77d0da6c..08a907b21e0c99 100644 --- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx +++ b/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'; diff --git a/packages/components/src/base-control/styles/base-control-styles.ts b/packages/components/src/base-control/styles/base-control-styles.ts index abd2f3affc45ae..6ddfe10229fdbb 100644 --- a/packages/components/src/base-control/styles/base-control-styles.ts +++ b/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' ) }; diff --git a/packages/components/src/border-control/styles.ts b/packages/components/src/border-control/styles.ts index c828536e199f9a..322e9563d58a4d 100644 --- a/packages/components/src/border-control/styles.ts +++ b/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, diff --git a/packages/components/src/card/card/README.md b/packages/components/src/card/card/README.md index ffad1e2ec36e53..c7b70c8c6c907a 100644 --- a/packages/components/src/card/card/README.md +++ b/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 diff --git a/packages/components/src/color-picker/hex-input.tsx b/packages/components/src/color-picker/hex-input.tsx index edbb5350ef1d59..6001892ff8afa5 100644 --- a/packages/components/src/color-picker/hex-input.tsx +++ b/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'; diff --git a/packages/components/src/color-picker/input-with-slider.tsx b/packages/components/src/color-picker/input-with-slider.tsx index cb346bff8fd86e..b51db75c1f4513 100644 --- a/packages/components/src/color-picker/input-with-slider.tsx +++ b/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'; diff --git a/packages/components/src/color-picker/styles.ts b/packages/components/src/color-picker/styles.ts index f78db13a8fd73f..eee163d047ff06 100644 --- a/packages/components/src/color-picker/styles.ts +++ b/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'; diff --git a/packages/components/src/combobox-control/styles.ts b/packages/components/src/combobox-control/styles.ts index de1ed2fb76677c..676c70f9e8f572 100644 --- a/packages/components/src/combobox-control/styles.ts +++ b/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 = ( { diff --git a/packages/components/src/date-time/date/styles.ts b/packages/components/src/date-time/date/styles.ts index 0e7a3881d821c6..5500206abd40a2 100644 --- a/packages/components/src/date-time/date/styles.ts +++ b/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; diff --git a/packages/components/src/date-time/time/styles.ts b/packages/components/src/date-time/time/styles.ts index 1aa273aab304c7..bba0cc500e0c8a 100644 --- a/packages/components/src/date-time/time/styles.ts +++ b/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, diff --git a/packages/components/src/divider/styles.ts b/packages/components/src/divider/styles.ts index ad13e357c53b08..189f0a0223041e 100644 --- a/packages/components/src/divider/styles.ts +++ b/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'; diff --git a/packages/components/src/divider/types.ts b/packages/components/src/divider/types.ts index feaa0b4f4c19b0..03caedb6a5b3e7 100644 --- a/packages/components/src/divider/types.ts +++ b/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, diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index f1ba603797a7ff..cdeeed077b5f3a 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/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'; diff --git a/packages/components/src/dropdown/styles.ts b/packages/components/src/dropdown/styles.ts index f64e886e8be264..6d5412f9a81213 100644 --- a/packages/components/src/dropdown/styles.ts +++ b/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 ) => { diff --git a/packages/components/src/flex/flex/hook.ts b/packages/components/src/flex/flex/hook.ts index 9b670d8a8ec017..df53667915999c 100644 --- a/packages/components/src/flex/flex/hook.ts +++ b/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'; diff --git a/packages/components/src/flex/types.ts b/packages/components/src/flex/types.ts index e36a906392b8d9..cc5553a660a831 100644 --- a/packages/components/src/flex/types.ts +++ b/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' ] diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts index 8ba0ce661c5eb7..ef8ec8ebb30cb2 100644 --- a/packages/components/src/font-size-picker/styles.ts +++ b/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` diff --git a/packages/components/src/form-token-field/styles.ts b/packages/components/src/form-token-field/styles.ts index ee67f44a5f3244..e4d41ad90c472c 100644 --- a/packages/components/src/form-token-field/styles.ts +++ b/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 = { diff --git a/packages/components/src/grid/hook.ts b/packages/components/src/grid/hook.ts index 26f1eb1ae95647..621438c96df7b3 100644 --- a/packages/components/src/grid/hook.ts +++ b/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'; diff --git a/packages/components/src/grid/types.ts b/packages/components/src/grid/types.ts index 878e23f8ff5317..44258064e46a69 100644 --- a/packages/components/src/grid/types.ts +++ b/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' diff --git a/packages/components/src/h-stack/hook.tsx b/packages/components/src/h-stack/hook.tsx index be30502a57b13e..b7b8cf92954a1d 100644 --- a/packages/components/src/h-stack/hook.tsx +++ b/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' > ) { diff --git a/packages/components/src/heading/hook.ts b/packages/components/src/heading/hook.ts index 81cb95fa34a621..e493343967cba8 100644 --- a/packages/components/src/heading/hook.ts +++ b/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'; diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index 41afdd3e40d5ed..f9eafb7757e47e 100644 --- a/packages/components/src/input-control/index.tsx +++ b/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'; import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'; diff --git a/packages/components/src/input-control/styles/input-control-styles.tsx b/packages/components/src/input-control/styles/input-control-styles.tsx index 37e79d5b254f83..85331d85cd20ed 100644 --- a/packages/components/src/input-control/styles/input-control-styles.tsx +++ b/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; diff --git a/packages/components/src/navigation/styles/navigation-styles.tsx b/packages/components/src/navigation/styles/navigation-styles.tsx index 7c3ea34f99899d..27c508b98f26dc 100644 --- a/packages/components/src/navigation/styles/navigation-styles.tsx +++ b/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` diff --git a/packages/components/src/number-control/styles/number-control-styles.ts b/packages/components/src/number-control/styles/number-control-styles.ts index 6cbb18b565c25d..2fa1be970090bf 100644 --- a/packages/components/src/number-control/styles/number-control-styles.ts +++ b/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 ) { diff --git a/packages/components/src/palette-edit/styles.js b/packages/components/src/palette-edit/styles.js index 0c72493f465647..4beeb6e7c2213d 100644 --- a/packages/components/src/palette-edit/styles.js +++ b/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'; diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx index 534ae36af67ca4..05b162a492e849 100644 --- a/packages/components/src/range-control/index.tsx +++ b/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 = () => {}; diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts index 1e4aa96bba03ba..07b744356d4f9b 100644 --- a/packages/components/src/range-control/styles/range-control-styles.ts +++ b/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; diff --git a/packages/components/src/select-control/styles/select-control-styles.ts b/packages/components/src/select-control/styles/select-control-styles.ts index c4b9088bbbcf93..7d0ddb502abd74 100644 --- a/packages/components/src/select-control/styles/select-control-styles.ts +++ b/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'; diff --git a/packages/components/src/spacer/hook.ts b/packages/components/src/spacer/hook.ts index 715089455f4fa9..82d36baa5e202f 100644 --- a/packages/components/src/spacer/hook.ts +++ b/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'; diff --git a/packages/components/src/spacer/types.ts b/packages/components/src/spacer/types.ts index c50801e2a3492b..52310c4f58bf28 100644 --- a/packages/components/src/spacer/types.ts +++ b/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 = { /** diff --git a/packages/components/src/spinner/stories/index.story.tsx b/packages/components/src/spinner/stories/index.story.tsx index dfd6fb26f25ae9..1062c6406bfb4e 100644 --- a/packages/components/src/spinner/stories/index.story.tsx +++ b/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', diff --git a/packages/components/src/text/get-line-height.ts b/packages/components/src/text/get-line-height.ts index 88bf9d1558e6f5..906bd0eabfab9d 100644 --- a/packages/components/src/text/get-line-height.ts +++ b/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( diff --git a/packages/components/src/text/hook.js b/packages/components/src/text/hook.js index 4cfeaa7943b314..5198845c1dae78 100644 --- a/packages/components/src/text/hook.js +++ b/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'; diff --git a/packages/components/src/text/test/index.tsx b/packages/components/src/text/test/index.tsx index 7147c887970cdc..5fad5582f4d46e 100644 --- a/packages/components/src/text/test/index.tsx +++ b/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 '../'; diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx index f5a76c55a7bb96..c991953d53e4bf 100644 --- a/packages/components/src/toggle-control/index.tsx +++ b/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. diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index f3c5d77fe27cc4..1da1003c0462e3 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/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` diff --git a/packages/components/src/ui/README.md b/packages/components/src/ui/README.md deleted file mode 100644 index 6099fe0032851f..00000000000000 --- a/packages/components/src/ui/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# TODO - -We want to get rid of this folder. Don't add anything new here. - -What is left of this folder should either be deleted (if unused elsewhere), or be moved into the root `packages/components/src` and `packages/components/src/utils` folders. \ No newline at end of file diff --git a/packages/components/src/ui/utils/colors.js b/packages/components/src/ui/utils/colors.js deleted file mode 100644 index 32d0d21aef47ec..00000000000000 --- a/packages/components/src/ui/utils/colors.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * External dependencies - */ -import memoize from 'memize'; -import { colord, extend } from 'colord'; -import namesPlugin from 'colord/plugins/names'; - -/** @type {HTMLDivElement} */ -let colorComputationNode; - -extend( [ namesPlugin ] ); - -/** - * @return {HTMLDivElement | undefined} The HTML element for color computation. - */ -function getColorComputationNode() { - if ( typeof document === 'undefined' ) return; - - if ( ! colorComputationNode ) { - // Create a temporary element for style computation. - const el = document.createElement( 'div' ); - el.setAttribute( 'data-g2-color-computation-node', '' ); - // Inject for window computed style. - document.body.appendChild( el ); - colorComputationNode = el; - } - - return colorComputationNode; -} - -/** - * @param {string | unknown} value - * - * @return {boolean} Whether the value is a valid color. - */ -function isColor( value ) { - if ( typeof value !== 'string' ) return false; - const test = colord( value ); - - return test.isValid(); -} - -/** - * Retrieves the computed background color. This is useful for getting the - * value of a CSS variable color. - * - * @param {string | unknown} backgroundColor The background color to compute. - * - * @return {string} The computed background color. - */ -function _getComputedBackgroundColor( backgroundColor ) { - if ( typeof backgroundColor !== 'string' ) return ''; - - if ( isColor( backgroundColor ) ) return backgroundColor; - - if ( ! backgroundColor.includes( 'var(' ) ) return ''; - if ( typeof document === 'undefined' ) return ''; - - // Attempts to gracefully handle CSS variables color values. - const el = getColorComputationNode(); - if ( ! el ) return ''; - - el.style.background = backgroundColor; - // Grab the style. - const computedColor = window?.getComputedStyle( el ).background; - // Reset. - el.style.background = ''; - - return computedColor || ''; -} - -const getComputedBackgroundColor = memoize( _getComputedBackgroundColor ); - -/** - * Get the text shade optimized for readability, based on a background color. - * - * @param {string | unknown} backgroundColor The background color. - * - * @return {string} The optimized text color (black or white). - */ -export function getOptimalTextColor( backgroundColor ) { - const background = getComputedBackgroundColor( backgroundColor ); - - return colord( background ).isLight() ? '#000000' : '#ffffff'; -} - -/** - * Get the text shade optimized for readability, based on a background color. - * - * @param {string | unknown} backgroundColor The background color. - * - * @return {string} The optimized text shade (dark or light). - */ -export function getOptimalTextShade( backgroundColor ) { - const result = getOptimalTextColor( backgroundColor ); - - return result === '#000000' ? 'dark' : 'light'; -} diff --git a/packages/components/src/ui/utils/index.js b/packages/components/src/ui/utils/index.js deleted file mode 100644 index c6f4adde96a523..00000000000000 --- a/packages/components/src/ui/utils/index.js +++ /dev/null @@ -1 +0,0 @@ -export { getOptimalTextShade } from './colors'; diff --git a/packages/components/src/ui/utils/test/colors.js b/packages/components/src/ui/utils/test/colors.js deleted file mode 100644 index eb52b5dbb223bf..00000000000000 --- a/packages/components/src/ui/utils/test/colors.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Internal dependencies - */ -import { getOptimalTextColor, getOptimalTextShade } from '../colors'; - -describe( 'getOptimalTextColor', () => { - test( 'should be white for dark backgrounds', () => { - expect( getOptimalTextColor( 'black' ) ).toBe( '#ffffff' ); - expect( getOptimalTextColor( '#000' ) ).toBe( '#ffffff' ); - expect( getOptimalTextColor( '#111' ) ).toBe( '#ffffff' ); - expect( getOptimalTextColor( '#123' ) ).toBe( '#ffffff' ); - expect( getOptimalTextColor( '#555' ) ).toBe( '#ffffff' ); - expect( getOptimalTextColor( '#05f' ) ).toBe( '#ffffff' ); - } ); - - test( 'should be black for light backgrounds', () => { - expect( getOptimalTextColor( 'white' ) ).toBe( '#000000' ); - expect( getOptimalTextColor( '#fff' ) ).toBe( '#000000' ); - expect( getOptimalTextColor( '#def' ) ).toBe( '#000000' ); - expect( getOptimalTextColor( '#c3c3c3' ) ).toBe( '#000000' ); - expect( getOptimalTextColor( '#0ff' ) ).toBe( '#000000' ); - } ); -} ); - -describe( 'getOptimalTextShade', () => { - test( 'should be "light" for dark backgrounds', () => { - expect( getOptimalTextShade( 'black' ) ).toBe( 'light' ); - expect( getOptimalTextShade( '#000' ) ).toBe( 'light' ); - expect( getOptimalTextShade( '#111' ) ).toBe( 'light' ); - expect( getOptimalTextShade( '#123' ) ).toBe( 'light' ); - expect( getOptimalTextShade( '#555' ) ).toBe( 'light' ); - expect( getOptimalTextShade( '#05f' ) ).toBe( 'light' ); - } ); - - test( 'should be "dark" for light backgrounds', () => { - expect( getOptimalTextShade( 'white' ) ).toBe( 'dark' ); - expect( getOptimalTextShade( '#fff' ) ).toBe( 'dark' ); - expect( getOptimalTextShade( '#def' ) ).toBe( 'dark' ); - expect( getOptimalTextShade( '#c3c3c3' ) ).toBe( 'dark' ); - expect( getOptimalTextShade( '#0ff' ) ).toBe( 'dark' ); - } ); -} ); diff --git a/packages/components/src/unit-control/styles/unit-control-styles.ts b/packages/components/src/unit-control/styles/unit-control-styles.ts index 5ff1fa9a3ef00b..d89e9b65a12a1a 100644 --- a/packages/components/src/unit-control/styles/unit-control-styles.ts +++ b/packages/components/src/unit-control/styles/unit-control-styles.ts @@ -10,7 +10,7 @@ import { COLORS, CONFIG, rtl } from '../../utils'; import NumberControl from '../../number-control'; import { BackdropUI } from '../../input-control/styles/input-control-styles'; import type { SelectSize } from '../types'; -import { space } from '../../ui/utils/space'; +import { space } from '../../utils/space'; // Using `selectSize` instead of `size` to avoid a type conflict with the // `size` HTML attribute of the `select` element. diff --git a/packages/components/src/utils/colors.js b/packages/components/src/utils/colors.js index 2a144eef6647f6..25e7e2063cabde 100644 --- a/packages/components/src/utils/colors.js +++ b/packages/components/src/utils/colors.js @@ -1,9 +1,13 @@ /** * External dependencies */ +import memoize from 'memize'; import { colord, extend } from 'colord'; import namesPlugin from 'colord/plugins/names'; +/** @type {HTMLDivElement} */ +let colorComputationNode; + extend( [ namesPlugin ] ); /** @@ -20,3 +24,90 @@ extend( [ namesPlugin ] ); export function rgba( hexValue = '', alpha = 1 ) { return colord( hexValue ).alpha( alpha ).toRgbString(); } + +/** + * @return {HTMLDivElement | undefined} The HTML element for color computation. + */ +function getColorComputationNode() { + if ( typeof document === 'undefined' ) return; + + if ( ! colorComputationNode ) { + // Create a temporary element for style computation. + const el = document.createElement( 'div' ); + el.setAttribute( 'data-g2-color-computation-node', '' ); + // Inject for window computed style. + document.body.appendChild( el ); + colorComputationNode = el; + } + + return colorComputationNode; +} + +/** + * @param {string | unknown} value + * + * @return {boolean} Whether the value is a valid color. + */ +function isColor( value ) { + if ( typeof value !== 'string' ) return false; + const test = colord( value ); + + return test.isValid(); +} + +/** + * Retrieves the computed background color. This is useful for getting the + * value of a CSS variable color. + * + * @param {string | unknown} backgroundColor The background color to compute. + * + * @return {string} The computed background color. + */ +function _getComputedBackgroundColor( backgroundColor ) { + if ( typeof backgroundColor !== 'string' ) return ''; + + if ( isColor( backgroundColor ) ) return backgroundColor; + + if ( ! backgroundColor.includes( 'var(' ) ) return ''; + if ( typeof document === 'undefined' ) return ''; + + // Attempts to gracefully handle CSS variables color values. + const el = getColorComputationNode(); + if ( ! el ) return ''; + + el.style.background = backgroundColor; + // Grab the style. + const computedColor = window?.getComputedStyle( el ).background; + // Reset. + el.style.background = ''; + + return computedColor || ''; +} + +const getComputedBackgroundColor = memoize( _getComputedBackgroundColor ); + +/** + * Get the text shade optimized for readability, based on a background color. + * + * @param {string | unknown} backgroundColor The background color. + * + * @return {string} The optimized text color (black or white). + */ +export function getOptimalTextColor( backgroundColor ) { + const background = getComputedBackgroundColor( backgroundColor ); + + return colord( background ).isLight() ? '#000000' : '#ffffff'; +} + +/** + * Get the text shade optimized for readability, based on a background color. + * + * @param {string | unknown} backgroundColor The background color. + * + * @return {string} The optimized text shade (dark or light). + */ +export function getOptimalTextShade( backgroundColor ) { + const result = getOptimalTextColor( backgroundColor ); + + return result === '#000000' ? 'dark' : 'light'; +} diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 7f4ee6971b8c46..f279bce888b9d9 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { space } from '../ui/utils/space'; +import { space } from './space'; import { COLORS } from './colors-values'; const CONTROL_HEIGHT = '36px'; diff --git a/packages/components/src/ui/utils/font-size.ts b/packages/components/src/utils/font-size.ts similarity index 96% rename from packages/components/src/ui/utils/font-size.ts rename to packages/components/src/utils/font-size.ts index 1393426991c604..e1a5a543709f43 100644 --- a/packages/components/src/ui/utils/font-size.ts +++ b/packages/components/src/utils/font-size.ts @@ -6,7 +6,7 @@ import type { CSSProperties, ReactText } from 'react'; /** * Internal dependencies */ -import CONFIG from '../../utils/config-values'; +import CONFIG from './config-values'; export type HeadingSize = | 1 diff --git a/packages/components/src/ui/utils/get-valid-children.ts b/packages/components/src/utils/get-valid-children.ts similarity index 100% rename from packages/components/src/ui/utils/get-valid-children.ts rename to packages/components/src/utils/get-valid-children.ts diff --git a/packages/components/src/ui/utils/space.ts b/packages/components/src/utils/space.ts similarity index 100% rename from packages/components/src/ui/utils/space.ts rename to packages/components/src/utils/space.ts diff --git a/packages/components/src/utils/test/colors.js b/packages/components/src/utils/test/colors.js index 511e11ad2bfd1b..cc088cb2705bb0 100644 --- a/packages/components/src/utils/test/colors.js +++ b/packages/components/src/utils/test/colors.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { rgba } from '../colors'; +import { getOptimalTextColor, getOptimalTextShade, rgba } from '../colors'; describe( 'rbga', () => { it( 'should output the expected string', () => { @@ -9,3 +9,41 @@ describe( 'rbga', () => { expect( rgba( '#f00', 0.2 ) ).toBe( 'rgba(255, 0, 0, 0.2)' ); } ); } ); + +describe( 'getOptimalTextColor', () => { + test( 'should be white for dark backgrounds', () => { + expect( getOptimalTextColor( 'black' ) ).toBe( '#ffffff' ); + expect( getOptimalTextColor( '#000' ) ).toBe( '#ffffff' ); + expect( getOptimalTextColor( '#111' ) ).toBe( '#ffffff' ); + expect( getOptimalTextColor( '#123' ) ).toBe( '#ffffff' ); + expect( getOptimalTextColor( '#555' ) ).toBe( '#ffffff' ); + expect( getOptimalTextColor( '#05f' ) ).toBe( '#ffffff' ); + } ); + + test( 'should be black for light backgrounds', () => { + expect( getOptimalTextColor( 'white' ) ).toBe( '#000000' ); + expect( getOptimalTextColor( '#fff' ) ).toBe( '#000000' ); + expect( getOptimalTextColor( '#def' ) ).toBe( '#000000' ); + expect( getOptimalTextColor( '#c3c3c3' ) ).toBe( '#000000' ); + expect( getOptimalTextColor( '#0ff' ) ).toBe( '#000000' ); + } ); +} ); + +describe( 'getOptimalTextShade', () => { + test( 'should be "light" for dark backgrounds', () => { + expect( getOptimalTextShade( 'black' ) ).toBe( 'light' ); + expect( getOptimalTextShade( '#000' ) ).toBe( 'light' ); + expect( getOptimalTextShade( '#111' ) ).toBe( 'light' ); + expect( getOptimalTextShade( '#123' ) ).toBe( 'light' ); + expect( getOptimalTextShade( '#555' ) ).toBe( 'light' ); + expect( getOptimalTextShade( '#05f' ) ).toBe( 'light' ); + } ); + + test( 'should be "dark" for light backgrounds', () => { + expect( getOptimalTextShade( 'white' ) ).toBe( 'dark' ); + expect( getOptimalTextShade( '#fff' ) ).toBe( 'dark' ); + expect( getOptimalTextShade( '#def' ) ).toBe( 'dark' ); + expect( getOptimalTextShade( '#c3c3c3' ) ).toBe( 'dark' ); + expect( getOptimalTextShade( '#0ff' ) ).toBe( 'dark' ); + } ); +} ); diff --git a/packages/components/src/ui/utils/test/space.js b/packages/components/src/utils/test/space.js similarity index 100% rename from packages/components/src/ui/utils/test/space.js rename to packages/components/src/utils/test/space.js diff --git a/packages/components/src/ui/utils/types.ts b/packages/components/src/utils/types.ts similarity index 100% rename from packages/components/src/ui/utils/types.ts rename to packages/components/src/utils/types.ts diff --git a/packages/components/src/ui/utils/use-responsive-value.ts b/packages/components/src/utils/use-responsive-value.ts similarity index 100% rename from packages/components/src/ui/utils/use-responsive-value.ts rename to packages/components/src/utils/use-responsive-value.ts diff --git a/packages/components/src/z-stack/component.tsx b/packages/components/src/z-stack/component.tsx index 4c29fa69b748e3..411ef13c7085e3 100644 --- a/packages/components/src/z-stack/component.tsx +++ b/packages/components/src/z-stack/component.tsx @@ -11,7 +11,7 @@ import { isValidElement } from '@wordpress/element'; /** * Internal dependencies */ -import { getValidChildren } from '../ui/utils/get-valid-children'; +import { getValidChildren } from '../utils/get-valid-children'; import { contextConnect, useContextSystem } from '../context'; import { ZStackView, ZStackChildView } from './styles'; import type { ZStackProps } from './types';