components: Remove wp-g2 from form-group and control-label (#31234)

* components: Remove wp-g2 from form-group and control-label * Update snapshots
WordPress · Apr 27, 2021 · 9f2e5c8 · 9f2e5c8
1 parent e901798
commit 9f2e5c8
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 182 deletions.
diff --git 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
@@ -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<typeof ui.get>[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/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;
+  }
 }
 
 <label
-  class="emotion-0 emotion-1 components-truncate components-text components-control-label emotion-2 emotion-3 emotion-4 emotion-5"
+  class="components-truncate components-text components-control-label emotion-0 emotion-1 emotion-2"
   data-wp-c16t="true"
   data-wp-component="ControlLabel"
 >
@@ -61,54 +47,40 @@ exports[`props should render correctly 1`] = `
 `;
 
 exports[`props should render no truncate 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);
+  padding-bottom: calc((30px - calc(13px * 1.2)) / 2);
+  padding-top: calc((30px - calc(13px * 1.2)) / 2);
+  color: #000;
+  line-height: 1.2;
+  margin: 0;
+  font-size: calc((13 / 13) * 13px);
+  font-weight: normal;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active {
+.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 > * {
+@media ( -webkit-min-device-pixel-ratio:1.25 ),( min-resolution:120dpi ) {
+  .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 {
-  color: #000;
-  line-height: 1.2;
-  margin: 0;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-}
-
 <label
-  class="emotion-0 emotion-1 components-truncate components-text components-control-label emotion-2 emotion-3 emotion-4 emotion-5"
+  class="components-truncate components-text components-control-label emotion-0 emotion-1 emotion-2"
   data-wp-c16t="true"
   data-wp-component="ControlLabel"
 >
@@ -117,58 +89,44 @@ exports[`props should render no truncate 1`] = `
 `;
 
 exports[`props should render size 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);
+  padding-bottom: calc((calc( 30px * 0.8 ) - calc(13px * 1.2)) / 2);
+  padding-top: calc((calc( 30px * 0.8 ) - calc(13px * 1.2)) / 2);
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #000;
+  line-height: 1.2;
+  margin: 0;
+  font-size: calc((13 / 13) * 13px);
+  font-weight: normal;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0.emotion-0:active {
+.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 > * {
+@media ( -webkit-min-device-pixel-ratio:1.25 ),( min-resolution:120dpi ) {
+  .emotion-0 > * {
     position: relative;
     top: 0.5px;
   }
 }
 
-.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 {
-  padding-bottom: calc((calc(30px * 0.8) - calc(13px * 1.2)) / 2);
-  padding-bottom: calc((var(--wp-g2-control-height-small) - calc(var(--wp-g2-font-size) * 1.2)) / 2);
-  padding-top: calc((calc(30px * 0.8) - calc(13px * 1.2)) / 2);
-  padding-top: calc((var(--wp-g2-control-height-small) - 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;
-  white-space: nowrap;
-  color: #000;
-  line-height: 1.2;
-  margin: 0;
-  font-size: calc((13 / 13) * 13px);
-  font-weight: normal;
-}
-
 <label
-  class="emotion-0 emotion-1 components-truncate components-text components-control-label emotion-2 emotion-3 emotion-4 emotion-5"
+  class="components-truncate components-text components-control-label emotion-0 emotion-1 emotion-2"
   data-wp-c16t="true"
   data-wp-component="ControlLabel"
 >

diff --git 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 ? (
-		<VStack
-			expanded={ false }
-			{ ...ui.$( 'FormGroupContentContainer' ) }
-			spacing={ spacing }
-		>
+		<VStack expanded={ false } spacing={ spacing }>
 			{ children }
 			<FormGroupHelp>{ help }</FormGroupHelp>
 		</VStack>

diff --git 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
@@ -16,7 +16,7 @@ const TextInput = ( { id: idProp, ...props } ) => {
 
 export default {
 	component: FormGroup,
-	title: 'Components/FormGroup',
+	title: 'G2 Components (Experimental)/FormGroup',
 };
 
 export const _default = () => {