From ff22d0a721a8b409e5ccf0d0da48eb0cc34e1b88 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Thu, 22 Apr 2021 08:36:00 -0700 Subject: [PATCH 01/10] components: Use vanilla emotion for `view` --- packages/components/src/ui/view/component.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/ui/view/component.js b/packages/components/src/ui/view/component.js index a7cce7d27c0b17..49b001ef89893e 100644 --- a/packages/components/src/ui/view/component.js +++ b/packages/components/src/ui/view/component.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { BaseView } from '@wp-g2/styles'; +import styled from '@emotion/styled'; /** * `View` is a core component that renders everything in the library. @@ -20,7 +20,7 @@ import { BaseView } from '@wp-g2/styles'; * } * ``` */ -const View = BaseView; +const View = styled.div``; View.displayName = 'View'; export default View; From 9293fdda6564b515e76b7de33c291e01baf30605 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Thu, 22 Apr 2021 20:51:29 -0700 Subject: [PATCH 02/10] components: Remove parts of `@wp-g2` dependencies --- packages/components/src/ui/context/index.js | 7 +- .../src/ui/context/polymorphic-component.ts | 5 +- .../components/src/ui/control-label/hook.js | 2 +- packages/components/src/ui/flex/use-flex.js | 26 +++---- packages/components/src/ui/heading/hook.ts | 17 ++--- .../src/ui/heading/stories/index.js | 4 +- packages/components/src/ui/surface/hook.js | 2 +- .../components/src/ui/text/get-line-height.ts | 39 ++++++++++ packages/components/src/ui/text/hook.js | 62 ++++----------- packages/components/src/ui/text/styles.js | 20 +++-- packages/components/src/ui/truncate/hook.js | 2 +- .../src/ui/utils/create-component.js | 6 +- packages/components/src/ui/utils/font-size.ts | 70 +++++++++++++++++ packages/components/src/ui/utils/space.ts | 15 ++++ .../src/ui/utils/use-responsive-value.ts | 76 +++++++++++++++++++ .../components/src/utils/colors-values.js | 1 + .../components/src/utils/config-values.js | 21 +++++ packages/components/src/utils/style-mixins.js | 2 + 18 files changed, 286 insertions(+), 91 deletions(-) create mode 100644 packages/components/src/ui/text/get-line-height.ts create mode 100644 packages/components/src/ui/utils/font-size.ts create mode 100644 packages/components/src/ui/utils/space.ts create mode 100644 packages/components/src/ui/utils/use-responsive-value.ts diff --git a/packages/components/src/ui/context/index.js b/packages/components/src/ui/context/index.js index 502d0ca2769c75..6a9e824185db9e 100644 --- a/packages/components/src/ui/context/index.js +++ b/packages/components/src/ui/context/index.js @@ -4,5 +4,10 @@ export { ContextSystemProvider, useComponentsContext, } from './context-system-provider'; -export { contextConnect } from './context-connect'; +export { + contextConnect, + hasConnectNamespace, + getConnectNamespace, +} from './context-connect'; export { useContextSystem } from './use-context-system'; +export * from './polymorphic-component'; diff --git a/packages/components/src/ui/context/polymorphic-component.ts b/packages/components/src/ui/context/polymorphic-component.ts index 2511de54a9189d..af4791be0d7b61 100644 --- a/packages/components/src/ui/context/polymorphic-component.ts +++ b/packages/components/src/ui/context/polymorphic-component.ts @@ -4,16 +4,15 @@ // eslint-disable-next-line no-restricted-imports import type * as React from 'react'; import type { As, RenderProp, ExtractHTMLAttributes } from 'reakit-utils/types'; -import type { Interpolation, ObjectInterpolation } from 'create-emotion'; +import type { Interpolation } from 'create-emotion'; /** * Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts */ export type ViewOwnProps< P, T extends As > = P & - Omit< React.ComponentPropsWithRef< T >, 'as' | 'css' | keyof P > & { + Omit< React.ComponentPropsWithRef< T >, 'as' | keyof P > & { as?: T | keyof JSX.IntrinsicElements; children?: React.ReactNode | RenderProp< ExtractHTMLAttributes< any > >; - css?: ObjectInterpolation< undefined > | string; }; export type ElementTypeFromViewOwnProps< P > = P extends ViewOwnProps< diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js index 626fec07274bc9..a0197ca41a78d0 100644 --- a/packages/components/src/ui/control-label/hook.js +++ b/packages/components/src/ui/control-label/hook.js @@ -32,7 +32,7 @@ export function useControlLabel( props ) { const htmlFor = useFormGroupContextId( htmlForProp ); const classes = cx( styles.ControlLabel, - styles[ size ], + styles[ /** @type {'small' | 'medium' | 'large'} */ ( size ) ], className, isBlock ? styles.block : styles.inline ); diff --git a/packages/components/src/ui/flex/use-flex.js b/packages/components/src/ui/flex/use-flex.js index c16687f37939ec..a8bad4348b1896 100644 --- a/packages/components/src/ui/flex/use-flex.js +++ b/packages/components/src/ui/flex/use-flex.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; -import { css, cx, ui, useResponsiveValue } from '@wp-g2/styles'; +import { css, cx } from 'emotion'; /** * WordPress dependencies @@ -12,6 +11,9 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; +import { useResponsiveValue } from '../utils/use-responsive-value'; +import { space } from '../utils/space'; import * as styles from './styles'; /** @@ -43,17 +45,13 @@ export function useFlex( props ) { const sx = {}; sx.Base = css( { - [ ui.createToken( 'flexGap' ) ]: ui.space( gap ), - [ ui.createToken( 'flexItemDisplay' ) ]: isColumn - ? 'block' - : undefined, alignItems: isColumn ? 'normal' : align, flexDirection: direction, flexWrap: wrap ? 'wrap' : undefined, justifyContent: justify, height: isColumn && expanded ? '100%' : undefined, width: ! isColumn && expanded ? '100%' : undefined, - marginBottom: wrap ? `calc(${ ui.space( gap ) } * -1)` : undefined, + marginBottom: wrap ? `calc(${ space( gap ) } * -1)` : undefined, } ); sx.Items = css( { @@ -65,21 +63,19 @@ export function useFlex( props ) { * Far less DOM less. However, UI rendering is not as reliable. */ '> * + *:not(marquee)': { - marginTop: isColumn ? ui.space( gap ) : undefined, - marginRight: - ! isColumn && isReverse ? ui.space( gap ) : undefined, + marginTop: isColumn ? space( gap ) : undefined, + marginRight: ! isColumn && isReverse ? space( gap ) : undefined, marginLeft: - ! isColumn && ! isReverse ? ui.space( gap ) : undefined, + ! isColumn && ! isReverse ? space( gap ) : undefined, }, } ); sx.WrapItems = css( { '> *:not(marquee)': { - marginBottom: ui.space( gap ), - marginLeft: - ! isColumn && isReverse ? ui.space( gap ) : undefined, + marginBottom: space( gap ), + marginLeft: ! isColumn && isReverse ? space( gap ) : undefined, marginRight: - ! isColumn && ! isReverse ? ui.space( gap ) : undefined, + ! isColumn && ! isReverse ? space( gap ) : undefined, }, '> *:last-child:not(marquee)': { marginLeft: ! isColumn && isReverse ? 0 : undefined, diff --git a/packages/components/src/ui/heading/hook.ts b/packages/components/src/ui/heading/hook.ts index 79d8977c4da1ba..3c822d9810eaf3 100644 --- a/packages/components/src/ui/heading/hook.ts +++ b/packages/components/src/ui/heading/hook.ts @@ -1,15 +1,13 @@ -/** - * External dependencies - */ -import { useContextSystem } from '@wp-g2/context'; -import { getHeadingFontSize, ui } from '@wp-g2/styles'; -import type { ViewOwnProps } from '@wp-g2/create-styles'; - /** * Internal dependencies */ +import { useContextSystem } from '../context'; +// eslint-disable-next-line no-duplicate-imports +import type { ViewOwnProps } from '../context'; import type { Props as TextProps } from '../text/types'; import { useText } from '../text'; +import { getHeadingFontSize } from '../utils/font-size'; +import { CONFIG, COLORS } from '../../utils'; export type HeadingSize = | 1 @@ -71,11 +69,10 @@ export function useHeading( props: ViewOwnProps< HeadingProps, 'h1' > ) { } const textProps = useText( { - color: ui.get( 'colorTextHeading' ), + color: COLORS.darkGray.heading, size: getHeadingFontSize( level ), isBlock: true, - // @ts-ignore We're passing a variable so `string` is safe - weight: ui.get( 'fontWeightHeading' ), + weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ], ...otherProps, } ); diff --git a/packages/components/src/ui/heading/stories/index.js b/packages/components/src/ui/heading/stories/index.js index 9254152b628170..ab4a1154f5797f 100644 --- a/packages/components/src/ui/heading/stories/index.js +++ b/packages/components/src/ui/heading/stories/index.js @@ -11,7 +11,9 @@ export default { export const _default = () => { return ( <> - Heading + + Heading + Heading Heading Heading diff --git a/packages/components/src/ui/surface/hook.js b/packages/components/src/ui/surface/hook.js index 99cee69f0e68be..535569eeef7540 100644 --- a/packages/components/src/ui/surface/hook.js +++ b/packages/components/src/ui/surface/hook.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; import { css, cx, ui } from '@wp-g2/styles'; /** @@ -12,6 +11,7 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import * as styles from './styles'; /** diff --git a/packages/components/src/ui/text/get-line-height.ts b/packages/components/src/ui/text/get-line-height.ts new file mode 100644 index 00000000000000..f298bf07d75e29 --- /dev/null +++ b/packages/components/src/ui/text/get-line-height.ts @@ -0,0 +1,39 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import type { CSSProperties } from 'react'; + +/** + * Internal dependencies + */ +import type { Props } from './types'; +import { space } from '../utils/space'; +import { CONFIG } from '../../utils'; + +export function getLineHeight( + adjustLineHeightForInnerControls: Props[ 'adjustLineHeightForInnerControls' ], + lineHeight: CSSProperties[ 'lineHeight' ] +) { + if ( lineHeight ) return lineHeight; + + if ( ! adjustLineHeightForInnerControls ) return; + + let value = `calc(${ CONFIG.controlHeight } + ${ space( 2 ) })`; + + switch ( adjustLineHeightForInnerControls ) { + case 'large': + value = `calc(${ CONFIG.controlHeightLarge } + ${ space( 2 ) })`; + break; + case 'small': + value = `calc(${ CONFIG.controlHeightSmall } + ${ space( 2 ) })`; + break; + case 'xSmall': + value = `calc(${ CONFIG.controlHeightXSmall } + ${ space( 2 ) })`; + break; + default: + break; + } + + return value; +} diff --git a/packages/components/src/ui/text/hook.js b/packages/components/src/ui/text/hook.js index f78eab0f818286..4b6eb65ea0a674 100644 --- a/packages/components/src/ui/text/hook.js +++ b/packages/components/src/ui/text/hook.js @@ -1,9 +1,8 @@ /** * External dependencies */ -import { hasNamespace, useContextSystem } from '@wp-g2/context'; -import { css, cx, getFontSize, ui } from '@wp-g2/styles'; -import { isPlainObject, isNil } from 'lodash'; +import { css, cx } from 'emotion'; +import { isPlainObject } from 'lodash'; /** * WordPress dependencies @@ -13,13 +12,17 @@ import { useMemo, Children, cloneElement } from '@wordpress/element'; /** * Internal dependencies */ +import { hasConnectNamespace, useContextSystem } from '../context'; import { useTruncate } from '../truncate'; import { getOptimalTextShade } from '../utils'; import * as styles from './styles'; import { createHighlighterText } from './utils'; +import { getFontSize } from '../utils/font-size'; +import { CONFIG, COLORS } from '../../utils'; +import { getLineHeight } from './get-line-height'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export default function useText( props ) { const { @@ -43,7 +46,7 @@ export default function useText( props ) { truncate = false, upperCase = false, variant, - weight = ui.get( 'fontWeight' ), + weight = CONFIG.fontWeight, ...otherProps } = useContextSystem( props, 'Text' ); @@ -73,10 +76,10 @@ export default function useText( props ) { const classes = useMemo( () => { const sx = {}; - const lineHeight = getLineHeight( { - lineHeight: lineHeightProp, + const lineHeight = getLineHeight( adjustLineHeightForInnerControls, - } ); + lineHeightProp + ); sx.Base = css( { color, @@ -99,8 +102,8 @@ export default function useText( props ) { getOptimalTextShade( optimizeReadabilityFor ) === 'dark'; sx.optimalTextColor = isOptimalTextColorDark - ? css( { color: ui.get( 'black' ) } ) - : css( { color: ui.get( 'white' ) } ); + ? css( { color: COLORS.black } ) + : css( { color: COLORS.white } ); } return cx( @@ -162,7 +165,7 @@ export default function useText( props ) { return child; } - const isLink = hasNamespace( child, [ 'Link' ] ); + const isLink = hasConnectNamespace( child, [ 'Link' ] ); if ( isLink ) { return cloneElement( child, { size: child.props.size || 'inherit', @@ -178,40 +181,3 @@ export default function useText( props ) { children: truncate ? truncateProps.children : content, }; } - -/* eslint-disable jsdoc/valid-types */ -/** - * @param {Object} props - * @param {import('./types').Props['adjustLineHeightForInnerControls']} [props.adjustLineHeightForInnerControls] - * @param {import('react').CSSProperties['lineHeight']} [props.lineHeight] - */ -/* eslint-enable jsdoc/valid-types */ -function getLineHeight( { adjustLineHeightForInnerControls, lineHeight } ) { - if ( ! isNil( lineHeight ) ) return lineHeight; - - if ( ! adjustLineHeightForInnerControls ) return; - - let value = `calc(${ ui.get( 'controlHeight' ) } + ${ ui.space( 2 ) })`; - - switch ( adjustLineHeightForInnerControls ) { - case 'large': - value = `calc(${ ui.get( 'controlHeightLarge' ) } + ${ ui.space( - 2 - ) })`; - break; - case 'small': - value = `calc(${ ui.get( 'controlHeightSmall' ) } + ${ ui.space( - 2 - ) })`; - break; - case 'xSmall': - value = `calc(${ ui.get( 'controlHeightXSmall' ) } + ${ ui.space( - 2 - ) })`; - break; - default: - break; - } - - return value; -} diff --git a/packages/components/src/ui/text/styles.js b/packages/components/src/ui/text/styles.js index 947677a1b198b2..6ded079d76d36f 100644 --- a/packages/components/src/ui/text/styles.js +++ b/packages/components/src/ui/text/styles.js @@ -1,11 +1,17 @@ /** * External dependencies */ -import { css, ui } from '@wp-g2/styles'; +import { css } from 'emotion'; + +/** + * Internal dependencies + */ +import { COLORS, CONFIG } from '../../utils'; export const Text = css` - color: ${ ui.color.text }; - line-height: ${ ui.get( 'fontLineHeightBase' ) }; + color: ${ COLORS.black }; + line-height: ${ CONFIG.fontLineHeightBase }; + margin: 0; `; export const block = css` @@ -13,20 +19,20 @@ export const block = css` `; export const positive = css` - color: ${ ui.color.positive }; + color: ${ COLORS.alert.green }; `; export const destructive = css` - color: ${ ui.color.destructive }; + color: ${ COLORS.alert.red }; `; export const muted = css` - color: ${ ui.get( 'colorTextMuted' ) }; + color: ${ COLORS.mediumGray.text }; `; export const highlighterText = css` mark { - background: ${ ui.get( 'yellowRgba70' ) }; + background: ${ COLORS.alert.yellow }; border-radius: 2px; box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset, 0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset; diff --git a/packages/components/src/ui/truncate/hook.js b/packages/components/src/ui/truncate/hook.js index 75ef75f4b8edd5..f50707837536aa 100644 --- a/packages/components/src/ui/truncate/hook.js +++ b/packages/components/src/ui/truncate/hook.js @@ -16,7 +16,7 @@ import * as styles from './styles'; import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export default function useTruncate( props ) { const { diff --git a/packages/components/src/ui/utils/create-component.js b/packages/components/src/ui/utils/create-component.js index f1a640f0104ade..eb53b895b666d8 100644 --- a/packages/components/src/ui/utils/create-component.js +++ b/packages/components/src/ui/utils/create-component.js @@ -1,21 +1,21 @@ /** * External dependencies */ -import { contextConnect } from '@wp-g2/context'; import { identity } from 'lodash'; /** * Internal dependencies */ +import { contextConnect } from '../context'; import { View } from '../view'; /** * Factory that creates a React component. * * @template {import('reakit-utils/types').As} T - * @template {import('@wp-g2/create-styles').ViewOwnProps<{}, T>} P + * @template {import('../context').ViewOwnProps<{}, T>} P * @param {import('./types').Options} options Options to customize the component. - * @return {import('@wp-g2/create-styles').PolymorphicComponent>} New React component. + * @return {import('../context').PolymorphicComponent>} New React component. */ /* eslint-disable jsdoc/no-undefined-types */ export const createComponent = ( { diff --git a/packages/components/src/ui/utils/font-size.ts b/packages/components/src/ui/utils/font-size.ts new file mode 100644 index 00000000000000..3ddcd9623eb1bb --- /dev/null +++ b/packages/components/src/ui/utils/font-size.ts @@ -0,0 +1,70 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import type { CSSProperties, ReactText } from 'react'; + +/** + * Internal dependencies + */ +import { config } from '../../utils'; + +export type HeadingSize = + | 1 + | 2 + | 3 + | 4 + | 5 + | 6 + | '1' + | '2' + | '3' + | '4' + | '5' + | '6'; + +export const BASE_FONT_SIZE = 13; + +export const PRESET_FONT_SIZES = { + body: BASE_FONT_SIZE, + caption: 10, + footnote: 11, + largeTitle: 28, + subheadline: 12, + title: 20, +}; + +export const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [ + n as HeadingSize, + n.toString() as HeadingSize, +] ); + +export function getFontSize( + size: + | CSSProperties[ 'fontSize' ] + | keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE +): string { + if ( size in PRESET_FONT_SIZES ) { + return getFontSize( + PRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ] + ); + } + + if ( typeof size !== 'number' ) { + const parsed = parseFloat( size ); + if ( Number.isNaN( parsed ) ) return size; + size = parsed; + } + + const ratio = `(${ size } / ${ BASE_FONT_SIZE })`; + return `calc(${ ratio } * ${ config( 'fontSize' ) })`; +} + +export function getHeadingFontSize( size: ReactText = 3 ): string { + if ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) { + return getFontSize( size ); + } + + const headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`; + return config( headingSize ); +} diff --git a/packages/components/src/ui/utils/space.ts b/packages/components/src/ui/utils/space.ts new file mode 100644 index 00000000000000..9741ad2162b706 --- /dev/null +++ b/packages/components/src/ui/utils/space.ts @@ -0,0 +1,15 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import type { ReactText } from 'react'; +/** + * Internal dependencies + */ +import { CONFIG } from '../../utils'; + +export function space( value: ReactText ): string { + return typeof value === 'number' + ? `calc(${ CONFIG.gridBase } * ${ value })` + : value; +} diff --git a/packages/components/src/ui/utils/use-responsive-value.ts b/packages/components/src/ui/utils/use-responsive-value.ts new file mode 100644 index 00000000000000..af18aa432dbb0c --- /dev/null +++ b/packages/components/src/ui/utils/use-responsive-value.ts @@ -0,0 +1,76 @@ +/** + * WordPress dependencies + */ +import { useEffect, useState } from '@wordpress/element'; + +const breakpoints = [ '40em', '52em', '64em' ]; + +export const useBreakpointIndex = ( + options: { defaultIndex?: number } = {} +) => { + const { defaultIndex = 0 } = options; + + if ( typeof defaultIndex !== 'number' ) { + throw new TypeError( + `Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }` + ); + } else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) { + throw new RangeError( + `Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }` + ); + } + + const [ value, setValue ] = useState( defaultIndex ); + + useEffect( () => { + const getIndex = () => + breakpoints.filter( ( bp ) => { + return typeof window !== 'undefined' + ? window.matchMedia( `screen and (min-width: ${ bp })` ) + .matches + : false; + } ).length; + + const onResize = () => { + const newValue = getIndex(); + if ( value !== newValue ) { + setValue( newValue ); + } + }; + + onResize(); + + if ( typeof document !== 'undefined' ) { + // Disable reason: We don't really care about what document we listen to, we just want to know that we're resizing. + /* eslint-disable @wordpress/no-global-event-listener */ + document.addEventListener( 'resize', onResize ); + } + return () => { + if ( typeof document !== 'undefined' ) { + document.removeEventListener( 'resize', onResize ); + /* eslint-enable @wordpress/no-global-event-listener */ + } + }; + }, [ value ] ); + + return value; +}; + +export function useResponsiveValue< T >( + values: ( T | undefined )[], + options: Parameters< typeof useBreakpointIndex >[ 0 ] = {} +): T | undefined { + const index = useBreakpointIndex( options ); + + // Allow calling the function with a "normal" value without having to check on the outside. + if ( ! Array.isArray( values ) && typeof values !== 'function' ) + return values; + + const array = values || []; + + /* eslint-disable jsdoc/no-undefined-types */ + return /** @type {T[]} */ array[ + /* eslint-enable jsdoc/no-undefined-types */ + index >= array.length ? array.length - 1 : index + ]; +} diff --git a/packages/components/src/utils/colors-values.js b/packages/components/src/utils/colors-values.js index c22d2ece813978..2d54d4935d3a33 100644 --- a/packages/components/src/utils/colors-values.js +++ b/packages/components/src/utils/colors-values.js @@ -36,6 +36,7 @@ export const G2 = { }, darkGray: { primary: '#1e1e1e', + heading: '#050505', }, mediumGray: { text: '#757575', diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js index 21311424087ae7..f2e620e63c2f2a 100644 --- a/packages/components/src/utils/config-values.js +++ b/packages/components/src/utils/config-values.js @@ -1,7 +1,28 @@ +const CONTROL_HEIGHT = '30px'; + export default { radiusBlockUi: '2px', borderWidth: '1px', borderWidthFocus: '1.5px', borderWidthTab: '4px', spinnerSize: '18px', + fontSize: '13px', + fontSizeH1: 'calc(2.44 * 13px)', + fontSizeH2: 'calc(1.95 * 13px)', + fontSizeH3: 'calc(1.56 * 13px)', + fontSizeH4: 'calc(1.25 * 13px)', + fontSizeH5: '13px', + fontSizeH6: 'calc(0.8 * 13px)', + fontSizeInputMobile: '16px', + fontSizeMobile: '15px', + fontSizeSmall: 'calc(0.92 * 13px)', + fontSizeXSmall: 'calc(0.75 * 13px)', + fontLineHeightBase: '1.2', + fontWeight: 'normal', + fontWeightHeading: '600', + gridBase: '4px', + controlHeight: CONTROL_HEIGHT, + controlHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`, + controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`, + controlHeightXSmall: `calc( ${ CONTROL_HEIGHT } * 0.6 )`, }; diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js index 5b82fd98343540..be6347cf37b216 100644 --- a/packages/components/src/utils/style-mixins.js +++ b/packages/components/src/utils/style-mixins.js @@ -5,3 +5,5 @@ export { space } from './space'; export { font } from './font'; export { breakpoint } from './breakpoint'; export { config } from './config'; +export { default as CONFIG } from './config-values'; +export { COLORS } from './colors-values'; From b41e24529eb7ca343f804147353cf93aa42ceabd Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Fri, 23 Apr 2021 08:58:27 -0700 Subject: [PATCH 03/10] Fix just enough for the build to pass --- packages/components/src/ui/card/body.js | 6 +++--- packages/components/src/ui/card/component.js | 14 +++++--------- packages/components/src/ui/card/footer.js | 6 +++--- packages/components/src/ui/card/header.js | 6 +++--- packages/components/src/ui/card/hook.js | 6 +++--- packages/components/src/ui/card/inner-body.js | 6 +++--- .../components/src/ui/control-group/component.js | 4 ++-- packages/components/src/ui/control-group/hook.js | 4 ++-- packages/components/src/ui/control-group/styles.js | 2 +- packages/components/src/ui/control-label/hook.js | 6 +++--- packages/components/src/ui/elevation/hook.js | 4 ++-- packages/components/src/ui/elevation/styles.js | 2 +- packages/components/src/ui/flex/styles.js | 2 +- packages/components/src/ui/flex/use-flex-block.js | 8 ++------ packages/components/src/ui/flex/use-flex-item.js | 4 ++-- packages/components/src/ui/flex/use-flex.js | 2 +- .../src/ui/form-group/form-group-content.js | 2 +- .../src/ui/form-group/form-group-label.js | 2 +- .../src/ui/form-group/form-group-styles.js | 2 +- .../components/src/ui/form-group/form-group.js | 8 ++------ .../components/src/ui/form-group/use-form-group.js | 6 +++--- packages/components/src/ui/grid/hook.js | 7 ++++--- packages/components/src/ui/h-stack/hook.js | 6 +++--- packages/components/src/ui/scrollable/hook.js | 2 +- packages/components/src/ui/spinner/component.js | 4 ++-- packages/components/src/ui/spinner/styles.js | 3 ++- packages/components/src/ui/surface/hook.js | 2 +- packages/components/src/ui/v-stack/hook.js | 2 +- 28 files changed, 59 insertions(+), 69 deletions(-) diff --git a/packages/components/src/ui/card/body.js b/packages/components/src/ui/card/body.js index dead8a7224a7e9..098b29170ca66c 100644 --- a/packages/components/src/ui/card/body.js +++ b/packages/components/src/ui/card/body.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { contextConnect, useContextSystem } from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; /** * WordPress dependencies @@ -12,12 +11,13 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { contextConnect, useContextSystem } from '../context'; import { Scrollable } from '../scrollable'; import { View } from '../view'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function CardBody( props, forwardedRef ) { diff --git a/packages/components/src/ui/card/component.js b/packages/components/src/ui/card/component.js index b6997ab0a56a5e..ad833a4314618a 100644 --- a/packages/components/src/ui/card/component.js +++ b/packages/components/src/ui/card/component.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { contextConnect } from '@wp-g2/context'; -import { css, ui } from '@wp-g2/styles'; +import { css } from 'emotion'; /** * WordPress dependencies @@ -12,20 +11,21 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { contextConnect } from '../context'; import { Elevation } from '../elevation'; import { View } from '../view'; import * as styles from './styles'; import { useCard } from './hook'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function Card( props, forwardedRef ) { const { children, elevation, isRounded = true, ...otherProps } = useCard( props ); - const elevationBorderRadius = isRounded ? ui.get( 'cardBorderRadius' ) : 0; + const elevationBorderRadius = isRounded ? '2px' : 0; const elevationClassName = useMemo( () => css( { borderRadius: elevationBorderRadius } ), @@ -34,20 +34,16 @@ function Card( props, forwardedRef ) { return ( - - { children } - + { children } ); diff --git a/packages/components/src/ui/card/footer.js b/packages/components/src/ui/card/footer.js index 7ad190b11950bc..86b1521f6903e0 100644 --- a/packages/components/src/ui/card/footer.js +++ b/packages/components/src/ui/card/footer.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { contextConnect, useContextSystem } from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; /** * WordPress dependencies @@ -12,11 +11,12 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { contextConnect, useContextSystem } from '../context'; import { Flex } from '../flex'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function CardFooter( props, forwardedRef ) { diff --git a/packages/components/src/ui/card/header.js b/packages/components/src/ui/card/header.js index f6c4f13a052eed..583c3b70b16038 100644 --- a/packages/components/src/ui/card/header.js +++ b/packages/components/src/ui/card/header.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { contextConnect, useContextSystem } from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; /** * WordPress dependencies @@ -12,11 +11,12 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { contextConnect, useContextSystem } from '../context'; import { Flex } from '../flex'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function CardHeader( props, forwardedRef ) { diff --git a/packages/components/src/ui/card/hook.js b/packages/components/src/ui/card/hook.js index 3a21d9365bb63b..b7b4392b41e807 100644 --- a/packages/components/src/ui/card/hook.js +++ b/packages/components/src/ui/card/hook.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; /** * WordPress dependencies @@ -12,11 +11,12 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import { useSurface } from '../surface'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useCard( props ) { const { diff --git a/packages/components/src/ui/card/inner-body.js b/packages/components/src/ui/card/inner-body.js index aa042be773e85f..43204482c456ee 100644 --- a/packages/components/src/ui/card/inner-body.js +++ b/packages/components/src/ui/card/inner-body.js @@ -1,17 +1,17 @@ /** * External dependencies */ -import { contextConnect, useContextSystem } from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; /** * Internal dependencies */ import { View } from '../view'; +import { contextConnect, useContextSystem } from '../context'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps<{}, 'div'>} props + * @param {import('../context').ViewOwnProps<{}, 'div'>} props * @param {import('react').Ref} forwardedRef */ function CardInnerBody( props, forwardedRef ) { diff --git a/packages/components/src/ui/control-group/component.js b/packages/components/src/ui/control-group/component.js index c35c687bc7926b..f48a785313b52d 100644 --- a/packages/components/src/ui/control-group/component.js +++ b/packages/components/src/ui/control-group/component.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { contextConnect } from '@wp-g2/context'; /** * Internal dependencies @@ -9,9 +8,10 @@ import { contextConnect } from '@wp-g2/context'; import { Flex } from '../flex'; import { Grid } from '../grid'; import { useControlGroup } from './hook'; +import { contextConnect } from '../context'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function ControlGroup( props, forwardedRef ) { diff --git a/packages/components/src/ui/control-group/hook.js b/packages/components/src/ui/control-group/hook.js index 192c4aa12489e5..15d881e7bef0e3 100644 --- a/packages/components/src/ui/control-group/hook.js +++ b/packages/components/src/ui/control-group/hook.js @@ -1,18 +1,18 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; import { cx } from '@wp-g2/styles'; import { getValidChildren } from '@wp-g2/utils'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import { ControlGroupContext } from './context'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useControlGroup( props ) { const { diff --git a/packages/components/src/ui/control-group/styles.js b/packages/components/src/ui/control-group/styles.js index ffbb9b766cde41..0c03e04977a723 100644 --- a/packages/components/src/ui/control-group/styles.js +++ b/packages/components/src/ui/control-group/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@wp-g2/styles'; +import { css } from 'emotion'; export const first = css` border-bottom-right-radius: 0; diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js index a0197ca41a78d0..d758dcb75092b6 100644 --- a/packages/components/src/ui/control-label/hook.js +++ b/packages/components/src/ui/control-label/hook.js @@ -1,18 +1,18 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import { useFormGroupContextId } from '../form-group'; import { useText } from '../text'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useControlLabel( props ) { const { diff --git a/packages/components/src/ui/elevation/hook.js b/packages/components/src/ui/elevation/hook.js index 9cf55c0b08d5f8..d184be605e0451 100644 --- a/packages/components/src/ui/elevation/hook.js +++ b/packages/components/src/ui/elevation/hook.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; import { css, cx, getBoxShadow, ui } from '@wp-g2/styles'; import { isNil } from 'lodash'; @@ -13,10 +12,11 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useElevation( props ) { const { diff --git a/packages/components/src/ui/elevation/styles.js b/packages/components/src/ui/elevation/styles.js index 398a015cc30901..4a22b2f598498a 100644 --- a/packages/components/src/ui/elevation/styles.js +++ b/packages/components/src/ui/elevation/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@wp-g2/styles'; +import { css } from 'emotion'; export const Elevation = css` background: transparent; diff --git a/packages/components/src/ui/flex/styles.js b/packages/components/src/ui/flex/styles.js index 532b5e5ebfe5bc..68ba8a58be37c7 100644 --- a/packages/components/src/ui/flex/styles.js +++ b/packages/components/src/ui/flex/styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@wp-g2/styles'; +import { css } from 'emotion'; export const Flex = css` display: flex; diff --git a/packages/components/src/ui/flex/use-flex-block.js b/packages/components/src/ui/flex/use-flex-block.js index 8a6b7673c27071..4f32daa2eec1c8 100644 --- a/packages/components/src/ui/flex/use-flex-block.js +++ b/packages/components/src/ui/flex/use-flex-block.js @@ -1,15 +1,11 @@ -/** - * External dependencies - */ -import { useContextSystem } from '@wp-g2/context'; - /** * Internal dependencies */ +import { useContextSystem } from '../context'; import { useFlexItem } from './use-flex-item'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useFlexBlock( props ) { const otherProps = useContextSystem( props, 'FlexBlock' ); diff --git a/packages/components/src/ui/flex/use-flex-item.js b/packages/components/src/ui/flex/use-flex-item.js index c8d129cd0984ef..93c533b8e56f89 100644 --- a/packages/components/src/ui/flex/use-flex-item.js +++ b/packages/components/src/ui/flex/use-flex-item.js @@ -1,16 +1,16 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; import { css, cx, ui } from '@wp-g2/styles'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useFlexItem( props ) { const { diff --git a/packages/components/src/ui/flex/use-flex.js b/packages/components/src/ui/flex/use-flex.js index a8bad4348b1896..7465b41fd69169 100644 --- a/packages/components/src/ui/flex/use-flex.js +++ b/packages/components/src/ui/flex/use-flex.js @@ -17,7 +17,7 @@ import { space } from '../utils/space'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useFlex( props ) { const { diff --git a/packages/components/src/ui/form-group/form-group-content.js b/packages/components/src/ui/form-group/form-group-content.js index b62a1767b45e01..610d2af4f41d9a 100644 --- a/packages/components/src/ui/form-group/form-group-content.js +++ b/packages/components/src/ui/form-group/form-group-content.js @@ -17,7 +17,7 @@ import FormGroupHelp from './form-group-help'; import FormGroupLabel from './form-group-label'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ function FormGroupContent( { alignLabel, 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 389bef441133ef..fd4af178cf6203 100644 --- a/packages/components/src/ui/form-group/form-group-label.js +++ b/packages/components/src/ui/form-group/form-group-label.js @@ -10,7 +10,7 @@ import { ControlLabel } from '../control-label'; import VisuallyHidden from '../../visually-hidden'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @return {JSX.Element | null} The form group's label. */ function FormGroupLabel( { children, id, labelHidden = false, ...props } ) { diff --git a/packages/components/src/ui/form-group/form-group-styles.js b/packages/components/src/ui/form-group/form-group-styles.js index a98f642ac8ca8e..1b7782c0e10464 100644 --- a/packages/components/src/ui/form-group/form-group-styles.js +++ b/packages/components/src/ui/form-group/form-group-styles.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { css } from '@wp-g2/styles'; +import { css } from 'emotion'; export const FormGroup = css` width: 100%; diff --git a/packages/components/src/ui/form-group/form-group.js b/packages/components/src/ui/form-group/form-group.js index ea17672b64b768..c16ea4421665cc 100644 --- a/packages/components/src/ui/form-group/form-group.js +++ b/packages/components/src/ui/form-group/form-group.js @@ -1,18 +1,14 @@ -/** - * External dependencies - */ -import { contextConnect } from '@wp-g2/context'; - /** * Internal dependencies */ +import { contextConnect } from '../context'; import { Grid } from '../grid'; import { View } from '../view'; import FormGroupContent from './form-group-content'; import { useFormGroup } from './use-form-group'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function FormGroup( props, forwardedRef ) { diff --git a/packages/components/src/ui/form-group/use-form-group.js b/packages/components/src/ui/form-group/use-form-group.js index 84944119bd0133..a8dbcaf1e046f8 100644 --- a/packages/components/src/ui/form-group/use-form-group.js +++ b/packages/components/src/ui/form-group/use-form-group.js @@ -1,17 +1,17 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import * as styles from './form-group-styles'; import { useInstanceId } from '../utils'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useFormGroup( props ) { const { diff --git a/packages/components/src/ui/grid/hook.js b/packages/components/src/ui/grid/hook.js index df929e1ba4d36a..89c1fe8430b829 100644 --- a/packages/components/src/ui/grid/hook.js +++ b/packages/components/src/ui/grid/hook.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; -import { css, cx, useResponsiveValue } from '@wp-g2/styles'; +import { css, cx } from 'emotion'; /** * WordPress dependencies @@ -12,10 +11,12 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import { getAlignmentProps } from './utils'; +import { useResponsiveValue } from '../utils/use-responsive-value'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export default function useGrid( props ) { const { diff --git a/packages/components/src/ui/h-stack/hook.js b/packages/components/src/ui/h-stack/hook.js index d553d4d69e0a3e..b3c9b9e30a9da4 100644 --- a/packages/components/src/ui/h-stack/hook.js +++ b/packages/components/src/ui/h-stack/hook.js @@ -1,19 +1,19 @@ /** * External dependencies */ -import { hasNamespace, useContextSystem } from '@wp-g2/context'; import { ui } from '@wp-g2/styles'; import { getValidChildren } from '@wp-g2/utils'; /** * Internal dependencies */ +import { hasConnectNamespace, useContextSystem } from '../context'; import { FlexItem, useFlex } from '../flex'; import { getAlignmentProps } from './utils'; /** * - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useHStack( props ) { const { @@ -31,7 +31,7 @@ export function useHStack( props ) { // @ts-ignore ( /** @type {import('react').ReactElement} */ child, index ) => { const _key = child.key || `hstack-${ index }`; - const _isSpacer = hasNamespace( child, [ 'Spacer' ] ); + const _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] ); if ( _isSpacer ) { return ( diff --git a/packages/components/src/ui/scrollable/hook.js b/packages/components/src/ui/scrollable/hook.js index dd1bb36ac4371a..513579a28abf9a 100644 --- a/packages/components/src/ui/scrollable/hook.js +++ b/packages/components/src/ui/scrollable/hook.js @@ -16,7 +16,7 @@ import * as styles from './styles'; /* eslint-disable jsdoc/valid-types */ /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ /* eslint-enable jsdoc/valid-types */ export function useScrollable( props ) { diff --git a/packages/components/src/ui/spinner/component.js b/packages/components/src/ui/spinner/component.js index 4c8e025c54a086..a5f17cc76ad5c7 100644 --- a/packages/components/src/ui/spinner/component.js +++ b/packages/components/src/ui/spinner/component.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { contextConnect, useContextSystem } from '@wp-g2/context'; import { get } from '@wp-g2/styles'; /** @@ -9,6 +8,7 @@ import { get } from '@wp-g2/styles'; */ import { BarsView, BarsWrapperView, ContainerView } from './styles'; import { BASE_SIZE, WRAPPER_SIZE } from './utils'; +import { contextConnect, useContextSystem } from '../context'; /* eslint-disable jsdoc/valid-types */ /** @@ -20,7 +20,7 @@ import { BASE_SIZE, WRAPPER_SIZE } from './utils'; /** * - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function Spinner( props, forwardedRef ) { diff --git a/packages/components/src/ui/spinner/styles.js b/packages/components/src/ui/spinner/styles.js index a1050e32ff4413..24e3ec0f69c5c8 100644 --- a/packages/components/src/ui/spinner/styles.js +++ b/packages/components/src/ui/spinner/styles.js @@ -1,7 +1,8 @@ /** * External dependencies */ -import { styled, ui } from '@wp-g2/styles'; +import { ui } from '@wp-g2/styles'; +import styled from '@emotion/styled'; /** * Internal dependencies diff --git a/packages/components/src/ui/surface/hook.js b/packages/components/src/ui/surface/hook.js index 535569eeef7540..c8e368f01bac8e 100644 --- a/packages/components/src/ui/surface/hook.js +++ b/packages/components/src/ui/surface/hook.js @@ -15,7 +15,7 @@ import { useContextSystem } from '../context'; import * as styles from './styles'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useSurface( props ) { const { diff --git a/packages/components/src/ui/v-stack/hook.js b/packages/components/src/ui/v-stack/hook.js index 54b27f4ec76fd9..8f241444854d37 100644 --- a/packages/components/src/ui/v-stack/hook.js +++ b/packages/components/src/ui/v-stack/hook.js @@ -10,7 +10,7 @@ import { useHStack } from '../h-stack'; /** * - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useVStack( props ) { const { expanded = false, ...otherProps } = useContextSystem( From 824c4ecd2f4439f7cc463c0568a5cbce4a7256aa Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Fri, 23 Apr 2021 09:21:26 -0700 Subject: [PATCH 04/10] Fix some more things to make the build pass --- .../src/ui/base-button/component.js | 4 +- .../components/src/ui/base-button/hook.js | 8 +-- .../components/src/ui/button/component.js | 6 +- .../src/ui/utils/create-component.js | 44 ------------- .../src/ui/utils/create-component.tsx | 62 +++++++++++++++++++ packages/components/src/ui/utils/types.ts | 13 ---- .../components/src/ui/visually-hidden/hook.js | 7 ++- 7 files changed, 74 insertions(+), 70 deletions(-) delete mode 100644 packages/components/src/ui/utils/create-component.js create mode 100644 packages/components/src/ui/utils/create-component.tsx diff --git a/packages/components/src/ui/base-button/component.js b/packages/components/src/ui/base-button/component.js index 1afc9abf25f82d..9918ea56ff20cd 100644 --- a/packages/components/src/ui/base-button/component.js +++ b/packages/components/src/ui/base-button/component.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { contextConnect } from '@wp-g2/context'; import { cx, ui } from '@wp-g2/styles'; // eslint-disable-next-line no-restricted-imports import { Radio as ReakitRadio } from 'reakit'; @@ -14,6 +13,7 @@ import { Icon, chevronDown } from '@wordpress/icons'; /** * Internal dependencies */ +import { contextConnect } from '../context'; import { useButtonGroupContext } from '../button-group'; import { Elevation } from '../elevation'; import { FlexItem } from '../flex'; @@ -23,7 +23,7 @@ import LoadingOverlay from './loading-overlay'; import { useBaseButton } from './hook'; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function BaseButton( props, forwardedRef ) { diff --git a/packages/components/src/ui/base-button/hook.js b/packages/components/src/ui/base-button/hook.js index 13ea85904ca05e..457c76eccb817f 100644 --- a/packages/components/src/ui/base-button/hook.js +++ b/packages/components/src/ui/base-button/hook.js @@ -1,12 +1,12 @@ /** * External dependencies */ -import { useContextSystem } from '@wp-g2/context'; -import { css, cx } from '@wp-g2/styles'; +import { css, cx } from 'emotion'; /** * Internal dependencies */ +import { useContextSystem } from '../context'; import { useControlGroupContext } from '../control-group'; import { useFlex } from '../flex'; import * as styles from './styles'; @@ -17,13 +17,12 @@ import * as styles from './styles'; const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ]; /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props */ export function useBaseButton( props ) { const { children, className, - css: cssProp, currentColor, disabled = false, elevation = 0, @@ -79,7 +78,6 @@ export function useBaseButton( props ) { isSplit && styles.split, currentColor && styles.currentColor, css( { textAlign } ), - css( cssProp ), className ); diff --git a/packages/components/src/ui/button/component.js b/packages/components/src/ui/button/component.js index 70cf5a6190b869..fbe3a5a05b4fe0 100644 --- a/packages/components/src/ui/button/component.js +++ b/packages/components/src/ui/button/component.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { contextConnect, useContextSystem } from '@wp-g2/context'; -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; import { noop, uniqueId } from 'lodash'; /** @@ -13,6 +12,7 @@ import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ +import { contextConnect, useContextSystem } from '../context'; import { BaseButton } from '../base-button'; import { useButtonGroupContext } from '../button-group'; import { VisuallyHidden } from '../visually-hidden'; @@ -33,7 +33,7 @@ import * as styles from './styles'; */ /** - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function Button( props, forwardedRef ) { diff --git a/packages/components/src/ui/utils/create-component.js b/packages/components/src/ui/utils/create-component.js deleted file mode 100644 index eb53b895b666d8..00000000000000 --- a/packages/components/src/ui/utils/create-component.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * External dependencies - */ -import { identity } from 'lodash'; - -/** - * Internal dependencies - */ -import { contextConnect } from '../context'; -import { View } from '../view'; - -/** - * Factory that creates a React component. - * - * @template {import('reakit-utils/types').As} T - * @template {import('../context').ViewOwnProps<{}, T>} P - * @param {import('./types').Options} options Options to customize the component. - * @return {import('../context').PolymorphicComponent>} New React component. - */ -/* eslint-disable jsdoc/no-undefined-types */ -export const createComponent = ( { - as, - name = 'Component', - useHook = identity, - memo = true, -} ) => { - /** - * @param {P} props - * @param {import('react').Ref} forwardedRef - */ - function Component( props, forwardedRef ) { - const otherProps = useHook( props ); - - return ( - - ); - } - - Component.displayName = name; - - // @ts-ignore - return contextConnect( Component, name, { memo } ); -}; -/* eslint-enable jsdoc/no-undefined-types */ diff --git a/packages/components/src/ui/utils/create-component.tsx b/packages/components/src/ui/utils/create-component.tsx new file mode 100644 index 00000000000000..d25d4a0002f879 --- /dev/null +++ b/packages/components/src/ui/utils/create-component.tsx @@ -0,0 +1,62 @@ +/** + * External dependencies + */ +import { identity } from 'lodash'; +// eslint-disable-next-line no-restricted-imports +import type { Ref } from 'react'; +import type { As } from 'reakit-utils/types'; + +/** + * Internal dependencies + */ +import { contextConnect } from '../context'; +// eslint-disable-next-line no-duplicate-imports +import type { + PolymorphicComponent, + PropsFromViewOwnProps, + ElementTypeFromViewOwnProps, + ViewOwnProps, +} from '../context'; +import { View } from '../view'; + +interface Options< A extends As, P extends ViewOwnProps< {}, A > > { + as: A; + name: string; + useHook: ( props: P ) => any; + memo?: boolean; +} + +/** + * Factory that creates a React component from a hook + * + * @param options + * @param options.as The element to render for the component. + * @param options.name The name of the component. + * @param options.useHook The hook to use for the component + * @param options.memo Whether to memo the component. + * @return A polymorphic component that uses the hook to process props. + */ +export const createComponent = < + A extends As, + P extends ViewOwnProps< {}, A > +>( { + as, + name = 'Component', + useHook = identity, + memo = true, +}: Options< A, P > ): PolymorphicComponent< + ElementTypeFromViewOwnProps< P >, + PropsFromViewOwnProps< P > +> => { + function Component( props: P, forwardedRef: Ref< any > ) { + const otherProps = useHook( props ); + + return ( + + ); + } + + Component.displayName = name; + + return contextConnect( Component, name, { memo } ); +}; diff --git a/packages/components/src/ui/utils/types.ts b/packages/components/src/ui/utils/types.ts index 3a1702f712447a..538413204f7814 100644 --- a/packages/components/src/ui/utils/types.ts +++ b/packages/components/src/ui/utils/types.ts @@ -1,16 +1,3 @@ -/** - * External dependencies - */ -import type { As } from 'reakit-utils/types'; -import type { ViewOwnProps } from '@wp-g2/create-styles'; - -export type Options< T extends As, P extends ViewOwnProps< {}, T > > = { - as: T; - name: string; - useHook: ( props: P ) => any; - memo?: boolean; -}; - export type ResponsiveCSSValue< T > = Array< T | undefined > | T; export type PopperPlacement = diff --git a/packages/components/src/ui/visually-hidden/hook.js b/packages/components/src/ui/visually-hidden/hook.js index b9bbb10919f44e..d46c65cb8cbfe9 100644 --- a/packages/components/src/ui/visually-hidden/hook.js +++ b/packages/components/src/ui/visually-hidden/hook.js @@ -1,17 +1,18 @@ /** * External dependencies */ -import { cx } from '@wp-g2/styles'; +import { cx } from 'emotion'; /** * Internal dependencies */ import * as styles from './styles'; -/** @typedef {import('@wp-g2/create-styles').ViewOwnProps<{}, 'div'>} Props */ +// 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 {Props} props + * @param {import('../context').ViewOwnProps<{}, 'div'>} props */ export function useVisuallyHidden( { className, ...props } ) { // circumvent the context system and write the classnames ourselves From 8f43857b0cd73ebc26bf0e81c53e5215aa4bc7b6 Mon Sep 17 00:00:00 2001 From: sarayourfriend Date: Mon, 26 Apr 2021 06:48:33 -0700 Subject: [PATCH 05/10] Update snapshot tests --- .../test/__snapshots__/index.js.snap | 191 +++--- .../test/__snapshots__/index.js.snap | 379 ++++-------- .../button/test/__snapshots__/index.js.snap | 556 ++++++++---------- .../ui/card/test/__snapshots__/index.js.snap | 452 +++++--------- .../context-system-provider.js.snap | 6 +- .../test/__snapshots__/index.js.snap | 182 +++--- .../test/__snapshots__/index.js.snap | 208 +++---- .../test/__snapshots__/index.js.snap | 272 +++------ .../ui/flex/test/__snapshots__/index.js.snap | 173 ++---- .../test/__snapshots__/index.js.snap | 200 ++----- .../h-stack/test/__snapshots__/index.js.snap | 198 +------ .../heading/test/__snapshots__/index.js.snap | 70 +-- .../test/__snapshots__/index.js.snap | 31 +- .../spinner/test/__snapshots__/index.js.snap | 122 +--- .../surface/test/__snapshots__/index.js.snap | 76 +-- .../ui/text/test/__snapshots__/text.js.snap | 81 +-- .../tooltip/test/__snapshots__/index.js.snap | 24 +- .../v-stack/test/__snapshots__/index.js.snap | 195 +----- .../ui/view/test/__snapshots__/index.js.snap | 139 +---- .../test/__snapshots__/index.js.snap | 24 +- 20 files changed, 1077 insertions(+), 2502 deletions(-) diff --git a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap index 7c2e9de5b95c49..b157f270edb0ec 100644 --- a/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/base-button/test/__snapshots__/index.js.snap @@ -1,35 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`props should render correctly 1`] = ` -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -77,119 +49,51 @@ exports[`props should render correctly 1`] = ` -ms-user-select: none; user-select: none; width: auto; - text-align: center; -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:hover, +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:active, +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[disabled]:not( [aria-busy='true'] ), +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 svg { display: block; } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; font-size: 13px; font-size: var(--wp-g2-font-size); opacity: 1; white-space: nowrap; } -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; +.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { border-radius: inherit; bottom: -1px; box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); @@ -204,40 +108,81 @@ exports[`props should render correctly 1`] = ` transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); } -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } +.emotion-0 { + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; +} + +.emotion-1 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.emotion-5 { + background: transparent; + display: block; + margin: 0 !important; + pointer-events: none; + position: absolute; + will-change: box-shadow; +} + +.emotion-11 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + text-align: center; +} + +.emotion-11 > * + *:not(marquee) { + margin-left: calc(4px * 2); } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; +.emotion-11 > * { + min-width: 0; } `; diff --git a/packages/components/src/ui/button-group/test/__snapshots__/index.js.snap b/packages/components/src/ui/button-group/test/__snapshots__/index.js.snap index 4d776a309dfaa1..6dfc80c757e096 100644 --- a/packages/components/src/ui/button-group/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/button-group/test/__snapshots__/index.js.snap @@ -2,53 +2,6 @@ exports[`props should render correctly 1`] = ` .emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -@media (prefers-reduced-motion) { - .emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -96,95 +49,75 @@ exports[`props should render correctly 1`] = ` -ms-user-select: none; user-select: none; width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); - background-color: #ffffff; - background-color: var(--wp-g2-control-background-color); - border: 1px solid; - border-color: #757575; - border-color: var(--wp-g2-control-border-color); - color: #1e1e1e; - color: var(--wp-g2-color-text); - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - border-color: transparent; - border-color: var(--wp-g2-control-border-color-subtle); - color: #1e1e1e; - color: var(--wp-g2-color-text); - background-color: transparent; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:hover, +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:active, +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[disabled]:not( [aria-busy='true'] ), +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 svg { display: block; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { +.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11 { + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); +} + +.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11:active { color: #007cba; color: var(--wp-g2-button-text-color-active); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12 { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:hover { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-hover); border-color: #007cba; border-color: var(--wp-g2-button-secondary-border-color-hover); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:focus, +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-focused='true'] { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-focus); border-color: #007cba; @@ -193,7 +126,7 @@ exports[`props should render correctly 1`] = ` color: var(--wp-g2-button-secondary-text-color-focus); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:active { background-color: rgba(0, 0, 0, 0.05); background-color: var(--wp-g2-button-secondary-color-active); border-color: #007cba; @@ -202,113 +135,29 @@ exports[`props should render correctly 1`] = ` color: var(--wp-g2-button-secondary-text-color-active); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:hover, +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:active, +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:focus, +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true'][data-focused='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:active { color: #1e1e1e; color: var(--wp-g2-color-text); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color-focus); - box-shadow: 0 0 0 0.5px #007cba; - box-shadow: var(--wp-g2-control-box-shadow-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - border-color: transparent; - border-color: var(--wp-g2-control-border-color-subtle); - color: #1e1e1e; - color: var(--wp-g2-color-text); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - background-color: #ffffff; - background-color: var(--wp-g2-control-background-color); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { - border-color: #007cba; - border-color: var(--wp-g2-button-primary-border-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { - background-color: rgba(0, 0, 0, 0.05); - background-color: var(--wp-g2-control-background-color-active); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-active='true'] { - background: #1e1e1e; - background: var(--wp-g2-color-text); - color: #ffffff; - color: var(--wp-g2-color-text-inverted); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-active='true'] { - -webkit-transition: all 200ms cubic-bezier(0.12, 0.8, 0.32, 1); - -webkit-transition: all var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function-control); - transition: all 200ms cubic-bezier(0.12, 0.8, 0.32, 1); - transition: all var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function-control); - z-index: 1; - background: #1e1e1e; - background: var(--wp-g2-button-control-active-state-color); - border-color: #1e1e1e; - border-color: var(--wp-g2-button-control-active-state-color); - color: #ffffff; - color: var(--wp-g2-button-control-active-state-text-color); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-active='true']:hover { - background: #1e1e1e; - background: var(--wp-g2-button-control-active-state-color-hover); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-active='true']:focus { - background: #1e1e1e; - background: var(--wp-g2-button-control-active-state-color-focus); - box-shadow: 0 0 0 0.5px #007cba , 0 0 0 2px #ffffff inset; - box-shadow: var(--wp-g2-button-control-active-state-box-shadow-focus); - border-color: #007cba; - border-color: var(--wp-g2-button-control-active-state-border-color-focus); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-active='true']:active { - background: #1e1e1e; - background: var(--wp-g2-button-control-active-state-color-active); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-45.emotion-45.emotion-45.emotion-45.emotion-45.emotion-45.emotion-45 { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -319,50 +168,33 @@ exports[`props should render correctly 1`] = ` font-weight: normal; font-weight: var(--wp-g2-font-weight); margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; - display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - font-size: 13px; - font-size: var(--wp-g2-font-size); - opacity: 1; - white-space: nowrap; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; } @media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { + .emotion-45.emotion-45.emotion-45.emotion-45.emotion-45.emotion-45.emotion-45 { -webkit-transition: none !important; transition: none !important; } } -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +[data-system-ui-reduced-motion-mode="true"] .emotion-45.emotion-45.emotion-45.emotion-45.emotion-45.emotion-45.emotion-45 { -webkit-transition: none !important; transition: none !important; } -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { + display: var(--wp-g2-flex-item-display); font-size: 13px; font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; + opacity: 1; + white-space: nowrap; +} + +.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { border-radius: inherit; bottom: -1px; box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); @@ -377,21 +209,60 @@ exports[`props should render correctly 1`] = ` transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); } -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } +.emotion-0 { + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; +.emotion-1 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.emotion-5 { + background: transparent; + display: block; + margin: 0 !important; + pointer-events: none; + position: absolute; + will-change: box-shadow; +} + +.emotion-14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + text-align: center; +} + +.emotion-14 > * + *:not(marquee) { + margin-left: calc(4px * 2); +} + +.emotion-14 > * { + min-width: 0; }
Code
diff --git a/packages/components/src/ui/button/test/__snapshots__/index.js.snap b/packages/components/src/ui/button/test/__snapshots__/index.js.snap index ef04b87133f3ec..b3d7448ae5dc6c 100644 --- a/packages/components/src/ui/button/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/button/test/__snapshots__/index.js.snap @@ -2,19 +2,7 @@ exports[`props should render (Flex) gap 1`] = ` Snapshot Diff: -- Received styles -+ Base styles - -@@ -1,8 +1,8 @@ - Array [ - Object { -- "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 1)", -+ "--wp-g2-flex-gap": "calc(var(--wp-g2-grid-base) * 2)", - "-moz-appearance": "none", - "-moz-osx-font-smoothing": "grayscale", - "-moz-user-select": "none", - "-ms-flex-align": "center", - "-ms-flex-direction": "row", +Compared values have no visual difference. `; exports[`props should render as link (href) 1`] = ` @@ -26,59 +14,31 @@ Snapshot Diff: - + `; exports[`props should render correctly 1`] = ` -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - --wp-g2-flex-gap: calc(4px * 2); - --wp-g2-flex-gap: calc(var(--wp-g2-grid-base) * 2); - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -126,91 +86,75 @@ exports[`props should render correctly 1`] = ` -ms-user-select: none; user-select: none; width: auto; - text-align: center; - color: #007cba; - color: var(--wp-g2-button-text-color); - font-weight: 600; - padding-left: calc(12px * calc(4/3)); - padding-left: var(--wp-g2-button-padding-x); - padding-right: calc(12px * calc(4/3)); - padding-right: var(--wp-g2-button-padding-x); - background-color: transparent; - background-color: var(--wp-g2-button-secondary-color); - border-color: #007cba; - border-color: var(--wp-g2-button-secondary-border-color); - color: #007cba; - color: var(--wp-g2-button-secondary-text-color); -} - -@media (prefers-reduced-motion) { - .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; - } } -[data-system-ui-reduced-motion-mode="true"] .emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * + *:not(marquee) { - margin-left: calc(4px * 2); - margin-left: calc(var(--wp-g2-grid-base) * 2); -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 > * { - min-width: 0; -} - -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:hover, +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:active, +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { -webkit-transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); -webkit-transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); transition: all 200ms cubic-bezier( 0.12,0.8,0.32,1 ); transition: all var(--wp-g2-transition-duration) cubic-bezier( 0.12,0.8,0.32,1 ); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[disabled]:not( [aria-busy='true'] ), -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[aria-disabled='true']:not( [aria-busy='true'] ) { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[disabled]:not( [aria-busy='true'] ), +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[aria-disabled='true']:not( [aria-busy='true'] ) { opacity: 0.5; cursor: auto; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9:focus { box-shadow: 0 0 0 0.5px #007cba; box-shadow: var(--wp-g2-control-box-shadow-focus); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-destructive='true']:focus { box-shadow: 0 0 0 0.5px #D94F4F; box-shadow: var(--wp-g2-control-destructive-box-shadow-focus); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-icon='true'] { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9[data-icon='true'] { min-width: 30px; min-width: var(--wp-g2-control-height); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 svg { +.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9.emotion-9 svg { display: block; } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { +.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11 { + color: #007cba; + color: var(--wp-g2-button-text-color); + font-weight: 600; + padding-left: calc(12px * calc(4/3)); + padding-left: var(--wp-g2-button-padding-x); + padding-right: calc(12px * calc(4/3)); + padding-right: var(--wp-g2-button-padding-x); +} + +.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11.emotion-11:active { color: #007cba; color: var(--wp-g2-button-text-color-active); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:hover { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12 { + background-color: transparent; + background-color: var(--wp-g2-button-secondary-color); + border-color: #007cba; + border-color: var(--wp-g2-button-secondary-border-color); + color: #007cba; + color: var(--wp-g2-button-secondary-text-color); +} + +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:hover { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-hover); border-color: #007cba; border-color: var(--wp-g2-button-secondary-border-color-hover); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-focused='true'] { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:focus, +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-focused='true'] { background-color: transparent; background-color: var(--wp-g2-button-secondary-color-focus); border-color: #007cba; @@ -219,7 +163,7 @@ exports[`props should render correctly 1`] = ` color: var(--wp-g2-button-secondary-text-color-focus); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2:active { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12:active { background-color: rgba(0, 0, 0, 0.05); background-color: var(--wp-g2-button-secondary-color-active); border-color: #007cba; @@ -228,83 +172,37 @@ exports[`props should render correctly 1`] = ` color: var(--wp-g2-button-secondary-text-color-active); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'] { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:hover, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:focus, -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true'][data-focused='true'] { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:hover, +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:active, +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:focus, +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true'][data-focused='true'] { border-color: #D94F4F; border-color: var(--wp-g2-color-destructive); color: #D94F4F; color: var(--wp-g2-color-destructive); } -.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2[data-destructive='true']:active { +.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12[data-destructive='true']:active { color: #1e1e1e; color: var(--wp-g2-color-text); } -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; +.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2.emotion-2 { display: var(--wp-g2-flex-item-display); - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; font-size: 13px; font-size: var(--wp-g2-font-size); opacity: 1; white-space: nowrap; } -@media (prefers-reduced-motion) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; - } -} - -[data-system-ui-reduced-motion-mode="true"] .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { - -webkit-transition: none !important; - transition: none !important; -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - box-sizing: border-box; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; - font-family: var(--wp-g2-font-family); - font-size: 13px; - font-size: var(--wp-g2-font-size); - font-weight: normal; - font-weight: var(--wp-g2-font-weight); - margin: 0; - background: transparent; - display: block; - margin: 0 !important; - pointer-events: none; - position: absolute; - will-change: box-shadow; +.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6.emotion-6 { border-radius: inherit; bottom: -1px; box-shadow: 0 0px 0px 0 rgba(0 ,0,0,0); @@ -319,41 +217,82 @@ exports[`props should render correctly 1`] = ` transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function); } -@media (prefers-reduced-motion) { - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; - } +.emotion-0 { + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; } -[data-system-ui-reduced-motion-mode="true"] .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { - -webkit-transition: none !important; - transition: none !important; +.emotion-1 { + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.emotion-5 { + background: transparent; + display: block; + margin: 0 !important; + pointer-events: none; + position: absolute; + will-change: box-shadow; +} + +.emotion-14 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + text-align: center; +} + +.emotion-14 > * + *:not(marquee) { + margin-left: calc(4px * 2); +} + +.emotion-14 > * { + min-width: 0; } `; @@ -367,24 +306,24 @@ Snapshot Diff: