From aca40ed0601462d604d3b3be9bb23324cfadee87 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Tue, 27 Apr 2021 06:20:21 -0700 Subject: [PATCH 1/2] components: Remove wp-g2 from form-group and control-label --- .../src/ui/control-label/stories/index.js | 2 +- .../components/src/ui/control-label/styles.js | 16 ++++++++++------ .../src/ui/form-group/form-group-content.js | 11 +---------- .../src/ui/form-group/form-group-help.js | 9 +++++---- .../src/ui/form-group/stories/index.js | 2 +- .../components/src/ui/utils/get-high-dpi.ts | 19 +++++++++++++++++++ 6 files changed, 37 insertions(+), 22 deletions(-) create mode 100644 packages/components/src/ui/utils/get-high-dpi.ts diff --git a/packages/components/src/ui/control-label/stories/index.js b/packages/components/src/ui/control-label/stories/index.js index e64e5f3908f675..d4769f1e531426 100644 --- a/packages/components/src/ui/control-label/stories/index.js +++ b/packages/components/src/ui/control-label/stories/index.js @@ -5,7 +5,7 @@ import { ControlLabel } from '../index'; export default { component: ControlLabel, - title: 'Components/ControlLabel', + title: 'G2 Components (Experimental)/ControlLabel', }; export const _default = () => { diff --git a/packages/components/src/ui/control-label/styles.js b/packages/components/src/ui/control-label/styles.js index a3291e1d431933..a753ce18ee08f9 100644 --- a/packages/components/src/ui/control-label/styles.js +++ b/packages/components/src/ui/control-label/styles.js @@ -1,17 +1,21 @@ /** * External dependencies */ -import { css, getHighDpi, ui } from '@wp-g2/styles'; +import { css } from 'emotion'; -const lineHeight = `calc(${ ui.get( 'fontSize' ) } * 1.2)`; +/** + * Internal dependencies + */ +import CONFIG from '../../utils/config-values'; +import { getHighDpi } from '../utils/get-high-dpi'; + +const lineHeight = `calc(${ CONFIG.fontSize } * 1.2)`; -/* eslint-disable jsdoc/valid-types */ /** - * @param {Parameters[0]} size The padding size. + * @param {keyof CONFIG} size The padding size. */ -/* eslint-enable jsdoc/valid-types */ function getPadding( size ) { - return `calc((${ ui.get( size ) } - ${ lineHeight }) / 2)`; + return `calc((${ CONFIG[ size ] } - ${ lineHeight }) / 2)`; } const highDpiAdjust = getHighDpi` 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 610d2af4f41d9a..453eff093c19b0 100644 --- a/packages/components/src/ui/form-group/form-group-content.js +++ b/packages/components/src/ui/form-group/form-group-content.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { ui } from '@wp-g2/styles'; - /** * WordPress dependencies */ @@ -37,11 +32,7 @@ function FormGroupContent( { ] ); const content = help ? ( - + { children } { help } diff --git a/packages/components/src/ui/form-group/form-group-help.js b/packages/components/src/ui/form-group/form-group-help.js index ccf9d591def338..456d5325b5cbb0 100644 --- a/packages/components/src/ui/form-group/form-group-help.js +++ b/packages/components/src/ui/form-group/form-group-help.js @@ -1,12 +1,13 @@ -/** - * External dependencies - */ -import { ContextSystemProvider } from '@wp-g2/context'; /** * WordPress dependencies */ import { memo } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { ContextSystemProvider } from '../context'; + const contextValue = { Text: { variant: 'muted' } }; /** diff --git a/packages/components/src/ui/form-group/stories/index.js b/packages/components/src/ui/form-group/stories/index.js index 1da78f16d4b08e..c207ab2df5456d 100644 --- a/packages/components/src/ui/form-group/stories/index.js +++ b/packages/components/src/ui/form-group/stories/index.js @@ -16,7 +16,7 @@ const TextInput = ( { id: idProp, ...props } ) => { export default { component: FormGroup, - title: 'Components/FormGroup', + title: 'G2 Components (Experimental)/FormGroup', }; export const _default = () => { diff --git a/packages/components/src/ui/utils/get-high-dpi.ts b/packages/components/src/ui/utils/get-high-dpi.ts new file mode 100644 index 00000000000000..6e9073533300cf --- /dev/null +++ b/packages/components/src/ui/utils/get-high-dpi.ts @@ -0,0 +1,19 @@ +/** + * External dependencies + */ +import type { Interpolation } from '@emotion/core'; +import { css } from 'emotion'; + +export function getHighDpi( + strings: TemplateStringsArray, + ...interpolations: Interpolation[] +) { + const interpolatedStyles = css( strings, ...interpolations ); + + return css` + @media ( -webkit-min-device-pixel-ratio: 1.25 ), + ( min-resolution: 120dpi ) { + ${ interpolatedStyles } + } + `; +} From 4e4a08c210f43af17aa568db7eb770e02b31cb9c Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Tue, 27 Apr 2021 06:21:54 -0700 Subject: [PATCH 2/2] Update snapshots --- .../test/__snapshots__/index.js.snap | 142 ++++++------------ .../test/__snapshots__/index.js.snap | 108 +++++-------- 2 files changed, 90 insertions(+), 160 deletions(-) diff --git a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap index fa934ed6341447..2a568af4aaf00b 100644 --- a/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/control-label/test/__snapshots__/index.js.snap @@ -1,45 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`props should render correctly 1`] = ` -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 { +.emotion-0 { display: inline-block; line-height: calc(13px * 1.2); - line-height: calc(var(--wp-g2-font-size) * 1.2); margin: 0; max-width: 100%; padding-bottom: calc((30px - calc(13px * 1.2)) / 2); - padding-bottom: calc((var(--wp-g2-control-height) - calc(var(--wp-g2-font-size) * 1.2)) / 2); padding-top: calc((30px - calc(13px * 1.2)) / 2); - padding-top: calc((var(--wp-g2-control-height) - calc(var(--wp-g2-font-size) * 1.2)) / 2); -} - -.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -@media (-webkit-min-device-pixel-ratio:1.25), (min-resolution:120dpi) { - .emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0 > * { - position: relative; - top: 0.5px; - } -} - -.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { padding-bottom: calc((30px - calc(13px * 1.2)) / 2); - padding-bottom: calc((var(--wp-g2-control-height) - calc(var(--wp-g2-font-size) * 1.2)) / 2); padding-top: calc((30px - calc(13px * 1.2)) / 2); - padding-top: calc((var(--wp-g2-control-height) - calc(var(--wp-g2-font-size) * 1.2)) / 2); -} - -.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3.emotion-3 { - display: inline-block; - vertical-align: middle; -} - -.emotion-2 { display: block; overflow: hidden; text-overflow: ellipsis; @@ -49,10 +19,26 @@ exports[`props should render correctly 1`] = ` margin: 0; font-size: calc((13 / 13) * 13px); font-weight: normal; + display: inline-block; + vertical-align: middle; +} + +.emotion-0:active { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +@media ( -webkit-min-device-pixel-ratio:1.25 ),( min-resolution:120dpi ) { + .emotion-0 > * { + position: relative; + top: 0.5px; + } }