components: Remove @emotion/css from Divider (#33054)

* Remove `@emotion/css` from Divider * Fix space input types * Fix mysteriously broken type * Change how we parse values so that `px` values are respected * Update snapshots * Handle empty values * Fallback to `Number` parsing when CSS.supports does not exist * Add tests * Follow View naming convention * Handle null so that stories work * Split the stories in two * Rename DividerProps to Props * Combine NaN and CSS.supports check * Update packages/components/src/ui/utils/space.ts Co-authored-by: Marco Ciampini <[email protected]> Co-authored-by: Marco Ciampini <[email protected]>
WordPress · Jun 30, 2021 · 6a21c81 · 6a21c81
1 parent d3fb83c
commit 6a21c81
Show file tree

Hide file tree

Showing 11 changed files with 195 additions and 145 deletions.
diff --git a/packages/components/src/card/test/__snapshots__/index.js.snap b/packages/components/src/card/test/__snapshots__/index.js.snap
@@ -298,41 +298,44 @@ Object {
 }
 
 .emotion-15 {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.emotion-16 {
   border-color: rgba(0, 0, 0, 0.1);
   border-width: 0 0 1px 0;
   height: 0;
   margin: 0;
   width: auto;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  border-color: rgba(0, 0, 0, 0.1);
 }
 
-.emotion-19 {
+.emotion-21 {
   box-sizing: border-box;
   overflow: hidden;
 }
 
-.emotion-19>img,
-.emotion-19>iframe {
+.emotion-21>img,
+.emotion-21>iframe {
   display: block;
   height: auto;
   max-width: 100%;
   width: 100%;
 }
 
-.emotion-19:first-of-type {
+.emotion-21:first-of-type {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 }
 
-.emotion-19:last-of-type {
+.emotion-21:last-of-type {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
 
-.emotion-22 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -353,29 +356,29 @@ Object {
   padding: calc(4px * 4) calc(4px * 6);
 }
 
-.emotion-22>*+*:not(marquee) {
+.emotion-24>*+*:not(marquee) {
   margin-left: calc(4px * 2);
 }
 
-.emotion-22>* {
+.emotion-24>* {
   min-width: 0;
 }
 
-.emotion-22:first-child {
+.emotion-24:first-child {
   border-top: none;
 }
 
-.emotion-22:first-of-type {
+.emotion-24:first-of-type {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 }
 
-.emotion-22:last-of-type {
+.emotion-24:last-of-type {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
 
-.emotion-25 {
+.emotion-27 {
   background: transparent;
   display: block;
   margin: 0!important;
@@ -427,7 +430,7 @@ Object {
           </div>
           <hr
             aria-orientation="horizontal"
-            class="components-divider components-card__divider components-card-divider emotion-15"
+            class="components-divider components-card__divider components-card-divider emotion-15 emotion-16 emotion-17"
             data-wp-c16t="true"
             data-wp-component="CardDivider"
             role="separator"
@@ -440,7 +443,7 @@ Object {
             Card Body 3
           </div>
           <div
-            class="components-card__media components-card-media emotion-19 emotion-1 emotion-2"
+            class="components-card__media components-card-media emotion-21 emotion-1 emotion-2"
             data-wp-c16t="true"
             data-wp-component="CardMedia"
           >
@@ -450,7 +453,7 @@ Object {
             />
           </div>
           <div
-            class="components-flex components-card__footer components-card-footer emotion-22 emotion-1 emotion-2"
+            class="components-flex components-card__footer components-card-footer emotion-24 emotion-1 emotion-2"
             data-wp-c16t="true"
             data-wp-component="CardFooter"
           >
@@ -459,13 +462,13 @@ Object {
         </div>
         <div
           aria-hidden="true"
-          class="components-elevation emotion-25 emotion-1 emotion-2"
+          class="components-elevation emotion-27 emotion-1 emotion-2"
           data-wp-c16t="true"
           data-wp-component="Elevation"
         />
         <div
           aria-hidden="true"
-          class="components-elevation emotion-25 emotion-1 emotion-2"
+          class="components-elevation emotion-27 emotion-1 emotion-2"
           data-wp-c16t="true"
           data-wp-component="Elevation"
         />
@@ -576,41 +579,44 @@ Object {
 }
 
 .emotion-15 {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.emotion-16 {
   border-color: rgba(0, 0, 0, 0.1);
   border-width: 0 0 1px 0;
   height: 0;
   margin: 0;
   width: auto;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  border-color: rgba(0, 0, 0, 0.1);
 }
 
-.emotion-19 {
+.emotion-21 {
   box-sizing: border-box;
   overflow: hidden;
 }
 
-.emotion-19>img,
-.emotion-19>iframe {
+.emotion-21>img,
+.emotion-21>iframe {
   display: block;
   height: auto;
   max-width: 100%;
   width: 100%;
 }
 
-.emotion-19:first-of-type {
+.emotion-21:first-of-type {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 }
 
-.emotion-19:last-of-type {
+.emotion-21:last-of-type {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
 
-.emotion-22 {
+.emotion-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -631,29 +637,29 @@ Object {
   padding: calc(4px * 4) calc(4px * 6);
 }
 
-.emotion-22>*+*:not(marquee) {
+.emotion-24>*+*:not(marquee) {
   margin-left: calc(4px * 2);
 }
 
-.emotion-22>* {
+.emotion-24>* {
   min-width: 0;
 }
 
-.emotion-22:first-child {
+.emotion-24:first-child {
   border-top: none;
 }
 
-.emotion-22:first-of-type {
+.emotion-24:first-of-type {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
 }
 
-.emotion-22:last-of-type {
+.emotion-24:last-of-type {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
 
-.emotion-25 {
+.emotion-27 {
   background: transparent;
   display: block;
   margin: 0!important;
@@ -704,7 +710,7 @@ Object {
         </div>
         <hr
           aria-orientation="horizontal"
-          class="components-divider components-card__divider components-card-divider emotion-15"
+          class="components-divider components-card__divider components-card-divider emotion-15 emotion-16 emotion-17"
           data-wp-c16t="true"
           data-wp-component="CardDivider"
           role="separator"
@@ -717,7 +723,7 @@ Object {
           Card Body 3
         </div>
         <div
-          class="components-card__media components-card-media emotion-19 emotion-1 emotion-2"
+          class="components-card__media components-card-media emotion-21 emotion-1 emotion-2"
           data-wp-c16t="true"
           data-wp-component="CardMedia"
         >
@@ -727,7 +733,7 @@ Object {
           />
         </div>
         <div
-          class="components-flex components-card__footer components-card-footer emotion-22 emotion-1 emotion-2"
+          class="components-flex components-card__footer components-card-footer emotion-24 emotion-1 emotion-2"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -736,13 +742,13 @@ Object {
       </div>
       <div
         aria-hidden="true"
-        class="components-elevation emotion-25 emotion-1 emotion-2"
+        class="components-elevation emotion-27 emotion-1 emotion-2"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />
       <div
         aria-hidden="true"
-        class="components-elevation emotion-25 emotion-1 emotion-2"
+        class="components-elevation emotion-27 emotion-1 emotion-2"
         data-wp-c16t="true"
         data-wp-component="Elevation"
       />

diff --git a/packages/components/src/divider/component.tsx b/packages/components/src/divider/component.tsx
@@ -1,94 +1,30 @@
 /**
  * External dependencies
  */
-// Disable reason: Temporarily disable for existing usages
-// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css
-// eslint-disable-next-line no-restricted-imports
-import { css, cx } from '@emotion/css';
 // eslint-disable-next-line no-restricted-imports
 import { Separator } from 'reakit';
-// eslint-disable-next-line no-restricted-imports, no-duplicate-imports
-import type { SeparatorProps } from 'reakit';
 // eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
 import { contextConnect, useContextSystem } from '../ui/context';
 // eslint-disable-next-line no-duplicate-imports
 import type { PolymorphicComponentProps } from '../ui/context';
-import * as styles from './styles';
-import { space } from '../ui/utils/space';
-
-export interface DividerProps extends Omit< SeparatorProps, 'children' > {
-	/**
-	 * Adjusts all margins.
-	 */
-	margin?: number;
-	/**
-	 * Adjusts top margins.
-	 */
-	marginTop?: number;
-	/**
-	 * Adjusts bottom margins.
-	 */
-	marginBottom?: number;
-}
+import { DividerView } from './styles';
+import type { Props } from './types';
 
 function Divider(
-	props: PolymorphicComponentProps< DividerProps, 'hr', false >,
+	props: PolymorphicComponentProps< Props, 'hr', false >,
 	forwardedRef: Ref< any >
 ) {
-	const {
-		className,
-		margin,
-		marginBottom,
-		marginTop,
-		...otherProps
-	} = useContextSystem( props, 'Divider' );
-
-	const classes = useMemo( () => {
-		const sx: Record< string, string > = {};
-
-		if ( typeof margin !== 'undefined' ) {
-			sx.margin = css`
-				margin-bottom: ${ space( margin ) };
-				margin-top: ${ space( margin ) };
-			`;
-		} else {
-			if ( typeof marginTop !== 'undefined' ) {
-				sx.marginTop = css`
-					margin-top: ${ space( marginTop ) };
-				`;
-			}
-
-			if ( typeof marginBottom !== 'undefined' ) {
-				sx.marginBottom = css`
-					margin-bottom: ${ space( marginBottom ) };
-				`;
-			}
-		}
-
-		return cx(
-			styles.Divider,
-			sx.marginBottom,
-			sx.marginTop,
-			sx.margin,
-			className
-		);
-	}, [ className, margin, marginBottom, marginTop ] );
+	const contextProps = useContextSystem( props, 'Divider' );
 
 	return (
 		<Separator
-			as="hr"
-			{ ...otherProps }
-			className={ classes }
+			as={ DividerView }
+			{ ...contextProps }
 			ref={ forwardedRef }
 		/>
 	);

diff --git a/packages/components/src/divider/index.ts b/packages/components/src/divider/index.ts
@@ -1,2 +1,2 @@
 export { default as Divider } from './component';
-export type { DividerProps } from './component';
+export type { Props as DividerProps } from './types';