Remove g2

WordPress · May 21, 2021 · e57fede · e57fede
1 parent f060506
commit e57fede
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 45 deletions.
diff --git a/packages/components/src/ui/item-group/item-group.tsx b/packages/components/src/ui/item-group/item-group.tsx
@@ -1,19 +1,16 @@
-/**
- * External dependencies
- */
-import type { ViewOwnProps } from '@wp-g2/create-styles';
-import { contextConnect } from '@wp-g2/context';
-
 /**
  * Internal dependencies
  */
+import type { PolymorphicComponentProps } from '../context';
+// eslint-disable-next-line no-duplicate-imports
+import { contextConnect } from '../context';
 import { useItemGroup } from './use-item-group';
 // eslint-disable-next-line no-duplicate-imports
 import type { Props } from './use-item-group';
 import { ItemGroupContext, useItemGroupContext } from './context';
-import { View } from '../view';
+import { View } from '../../view';
 
-function ItemGroup( props: ViewOwnProps< Props, 'div' > ) {
+function ItemGroup( props: PolymorphicComponentProps< Props, 'div' > ) {
 	const { bordered, separated, size: sizeProp, ...otherProps } = useItemGroup(
 		props
 	);

diff --git a/packages/components/src/ui/item-group/stories/index.js b/packages/components/src/ui/item-group/stories/index.js
@@ -9,7 +9,7 @@ import { Button } from '../../button';
 
 export default {
 	component: ItemGroup,
-	title: 'G2 Components (Experimental)/ItemGroup',
+	title: 'Components (Experimental)/ItemGroup',
 };
 
 export const _default = () => (

diff --git a/packages/components/src/ui/item-group/styles.ts b/packages/components/src/ui/item-group/styles.ts
@@ -1,9 +1,14 @@
 /**
  * External dependencies
  */
-import { ui, css } from '@wp-g2/styles';
+import { css } from 'emotion';
+
+/**
+ * Internal dependencies
+ */
+import { CONFIG } from '../../utils';
+import COLORS from '../../utils/colors-values';
 
-// @todo: Maybe abstract to a dedicated UnstyledButton component.
 export const unstyledButton = css`
 	appearance: none;
 	border: 1px solid transparent;
@@ -12,13 +17,13 @@ export const unstyledButton = css`
 	text-align: left;
 
 	&:hover {
-		color: ${ ui.get( 'colorAdmin' ) };
+		color: ${ COLORS.admin.theme };
 	}
 
 	&:focus {
 		background-color: transparent;
-		color: ${ ui.get( 'colorAdmin' ) };
-		border-color: ${ ui.get( 'colorAdmin' ) };
+		color: ${ COLORS.admin.theme };
+		border-color: ${ COLORS.admin.theme };
 		outline: 3px solid transparent;
 	}
 `;
@@ -29,27 +34,27 @@ export const item = css`
 `;
 
 export const bordered = css`
-	${ ui.border.all }
+	border: 1px solid ${ CONFIG.surfaceBorderColor };
 `;
 
 export const separated = css`
 	> *:not( marquee ) {
-		${ ui.border.bottom }
+		border-bottom: 1px solid ${ CONFIG.surfaceBorderColor };
 	}
 
 	> *:last-child:not( :focus ) {
 		border-bottom-color: transparent;
 	}
 `;
 
-const borderRadius = ui.get( 'controlBorderRadius' );
+const borderRadius = CONFIG.controlBorderRadius;
 
 export const spacedAround = css`
-	${ ui.borderRadius( borderRadius ) }
+	border-radius: ${ borderRadius };
 `;
 
 export const rounded = css`
-	${ ui.borderRadius( borderRadius ) }
+	border-radius: ${ borderRadius };
 
 	> *:first-child {
 		border-top-left-radius: ${ borderRadius };
@@ -62,9 +67,7 @@ export const rounded = css`
 	}
 `;
 
-const baseFontHeight = `calc(${ ui.get( 'fontSize' ) } * ${ ui.get(
-	'fontLineHeightBase'
-) })`;
+const baseFontHeight = `calc(${ CONFIG.fontSize } * ${ CONFIG.fontLineHeightBase })`;
 
 /*
  * Math:
@@ -73,27 +76,18 @@ const baseFontHeight = `calc(${ ui.get( 'fontSize' ) } * ${ ui.get(
  * - Subtract the effects of border
  * - Divide the calculated number by 2, in order to get an individual top/bottom padding
  */
-const paddingY = `calc((${ ui.get(
-	'controlHeight'
-) } - ${ baseFontHeight } - 2px) / 2)`;
-const paddingYSmall = `calc((${ ui.get(
-	'controlHeightSmall'
-) } - ${ baseFontHeight } - 2px) / 2)`;
-const paddingYLarge = `calc((${ ui.get(
-	'controlHeightLarge'
-) } - ${ baseFontHeight } - 2px) / 2)`;
+const paddingY = `calc((${ CONFIG.controlHeight } - ${ baseFontHeight } - 2px) / 2)`;
+const paddingYSmall = `calc((${ CONFIG.controlHeightSmall } - ${ baseFontHeight } - 2px) / 2)`;
+const paddingYLarge = `calc((${ CONFIG.controlHeightLarge } - ${ baseFontHeight } - 2px) / 2)`;
 
 export const itemSizes = {
 	small: css`
-		${ ui.padding.y( paddingYSmall ) }
-		${ ui.padding.x( ui.get( 'controlPaddingXSmall' ) ) }
+		padding: ${ paddingYSmall }, ${ CONFIG.controlPaddingXSmall };
 	`,
 	medium: css`
-		${ ui.padding.y( paddingY ) }
-		${ ui.padding.x( ui.get( 'controlPaddingX' ) ) }
+		padding: ${ paddingY }, ${ CONFIG.controlPaddingX };
 	`,
 	large: css`
-		${ ui.padding.y( paddingYLarge ) }
-		${ ui.padding.x( ui.get( 'controlPaddingXLarge' ) ) }
+		padding: ${ paddingYLarge }, ${ CONFIG.controlPaddingXLarge };
 	`,
 };
diff --git a/packages/components/src/ui/item-group/use-item-group.ts b/packages/components/src/ui/item-group/use-item-group.ts
@@ -1,9 +1,14 @@
 /**
  * External dependencies
  */
-import { useContextSystem } from '@wp-g2/context';
-import type { ViewOwnProps } from '@wp-g2/create-styles';
-import { cx } from '@wp-g2/styles';
+import { cx } from 'emotion';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem } from '../context';
+// eslint-disable-next-line no-duplicate-imports
+import type { PolymorphicComponentProps } from '../context';
 
 /**
  * Internal dependencies
@@ -17,7 +22,9 @@ export interface Props {
 	size?: 'large' | 'medium' | 'small';
 }
 
-export function useItemGroup( props: ViewOwnProps< Props, 'div' > ) {
+export function useItemGroup(
+	props: PolymorphicComponentProps< Props, 'div' >
+) {
 	const {
 		className,
 		bordered = false,

diff --git a/packages/components/src/ui/item-group/use-item.ts b/packages/components/src/ui/item-group/use-item.ts
@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { cx } from '@wp-g2/styles';
-import { useContextSystem } from '@wp-g2/context';
-import type { ViewOwnProps } from '@wp-g2/create-styles';
+import { cx } from 'emotion';
 
 /**
  * Internal dependencies
  */
+import { useContextSystem } from '../context';
+// eslint-disable-next-line no-duplicate-imports
+import type { PolymorphicComponentProps } from '../context';
 import * as styles from './styles';
 import { useItemGroupContext } from './context';
 
@@ -16,7 +17,7 @@ export interface Props {
 	size?: 'small' | 'medium' | 'large';
 }
 
-export function useItem( props: ViewOwnProps< Props, 'div' > ) {
+export function useItem( props: PolymorphicComponentProps< Props, 'div' > ) {
 	const {
 		action = false,
 		as: asProp,

diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
@@ -5,6 +5,8 @@ import { space } from '../ui/utils/space';
 import { COLORS } from './colors-values';
 
 const CONTROL_HEIGHT = '30px';
+const CONTROL_PADDING_X = '12px';
+
 const CARD_PADDING_X = space( 3 );
 const CARD_PADDING_Y = space( 3 );
 
@@ -34,6 +36,10 @@ export default {
 	fontWeight: 'normal',
 	fontWeightHeading: '600',
 	gridBase: '4px',
+	controlPaddingX: CONTROL_PADDING_X,
+	controlPaddingXLarge: `calc(${ CONTROL_PADDING_X } * 1.3334)`,
+	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
+	controlBorderRadius: '2px',
 	controlHeight: CONTROL_HEIGHT,
 	controlHeightLarge: `calc( ${ CONTROL_HEIGHT } * 1.2 )`,
 	controlHeightSmall: `calc( ${ CONTROL_HEIGHT } * 0.8 )`,