components: Use vanilla emotion for view (#31099)

* components: Use vanilla emotion for `view` * components: Remove parts of `@wp-g2` dependencies * Fix just enough for the build to pass * Fix some more things to make the build pass * Update snapshot tests * Add selector to PolymorphicComponents * Update text tests * Fix grid gap styles * Update lots of snapshot tests for g2 removal * Convert card to use CONFIG variables
WordPress · Apr 26, 2021 · c242b60 · c242b60
1 parent 75262ab
commit c242b60
Show file tree

Hide file tree

Showing 79 changed files with 1,632 additions and 3,001 deletions.
diff --git 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<import('./types').Props, 'button'>} props
+ * @param {import('../context').ViewOwnProps<import('./types').Props, 'button'>} props
  * @param {import('react').Ref<any>} 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
@@ -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<import('./types').Props, 'button'>} props
+ * @param {import('../context').ViewOwnProps<import('./types').Props, 'button'>} 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/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;
 }
 
 <button
   aria-busy="false"
-  class="components-flex wp-components-flex ic-17cs4ki components-base-button wp-components-base-button ic-1d6ec17 ic-192yz5d emotion-2"
+  class="components-flex emotion-9 emotion-10 components-base-button emotion-11 emotion-3 emotion-4"
   data-active="false"
   data-destructive="false"
   data-focused="false"
-  data-g2-c16t="true"
-  data-g2-component="BaseButton"
   data-icon="false"
+  data-wp-c16t="true"
+  data-wp-component="BaseButton"
 >
   <span
-    class="components-flex-item wp-components-flex-item ic-1p3tlc8 ic-192yz5d emotion-0"
-    data-g2-c16t="true"
+    class="emotion-0 emotion-1 components-flex-item emotion-2 emotion-3 emotion-4"
     data-g2-component="ButtonContent"
+    data-wp-c16t="true"
+    data-wp-component="FlexItem"
   >
     Code is Poetry
   </span>
   <span
     aria-hidden="true"
-    class="components-elevation wp-components-elevation ic-i1zzlu ic-192yz5d emotion-1"
-    data-g2-c16t="true"
+    class="emotion-5 emotion-6 components-elevation emotion-3 emotion-4"
     data-g2-component="ButtonElevation"
+    data-wp-c16t="true"
+    data-wp-component="Elevation"
   />
 </button>
 `;