Merge pull request #221 from cratebind/fix/220/remove-pseudobox

feat: replace base Box component with PseudoBox

src/PseudoBox/index.tsx

@@ -1,7 +1,7 @@
 // import React from 'react';
 import styled, { CSSObject } from 'styled-components';
 import css from '@styled-system/css';
-import { MinervaProps, Box, shouldForwardProp } from '../layout';
+import { MinervaProps, shouldForwardProp, BaseBox } from '../layout';
 // import { transformAliasProps } from '../utils';
 
 export interface PseudoBoxProps {
@@ -162,7 +162,7 @@ const groupHover = '[role=group]:hover &';
 
 export type PseudoProps = MinervaProps & PseudoBoxProps;
 
-const PseudoBox = styled(Box).withConfig({
+const PseudoBox = styled(BaseBox).withConfig({
   shouldForwardProp,
 })<PseudoProps>(
   ({

src/layout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import css from '@styled-system/css';
 // import PropTypes from 'prop-types';
 import StyledSystem, {
   background,
@@ -22,6 +23,7 @@ import {
 // import systemPropTypes from '@styled-system/prop-types';
 
 import extraConfig from './utils';
+import { PseudoBoxProps } from '.';
 
 const customProps = system({
   textDecoration: true,
@@ -324,7 +326,7 @@ export const shouldForwardProp = createShouldForwardProp([
   // 'id',
 ]);
 
-export const Box = styled('div').withConfig({
+export const BaseBox = styled('div').withConfig({
   shouldForwardProp,
 })<MinervaProps>(
   {
@@ -334,6 +336,89 @@ export const Box = styled('div').withConfig({
   systemProps
 );
 
+const hover = '&:hover';
+const active = '&:active, &[data-active=true]';
+const focus = '&:focus';
+const visited = '&:visited';
+const even = '&:nth-of-type(even)';
+const odd = '&:nth-of-type(odd)';
+const disabled =
+  '&:disabled, &:disabled:focus, &:disabled:hover, &[aria-disabled=true], &[aria-disabled=true]:focus, &[aria-disabled=true]:hover';
+const checked = '&[aria-checked=true],&[data-state="checked"]';
+const mixed = '&[aria-checked=mixed]';
+const selected =
+  '&[aria-selected=true], &[data-selected=true], &[data-selected]';
+const invalid = '&[aria-invalid=true]';
+const pressed = '&[aria-pressed=true]';
+const readOnly = '&[aria-readonly=true], &[readonly]';
+const first = '&:first-of-type';
+const last = '&:last-of-type';
+const expanded = '&[aria-expanded=true]';
+const grabbed = '&[aria-grabbed=true]';
+const notFirst = '&:not(:first-of-type)';
+const notLast = '&:not(:last-of-type)';
+const groupHover = '[role=group]:hover &';
+
+export type BoxProps = MinervaProps & PseudoBoxProps;
+
+export const Box = styled(BaseBox).withConfig({
+  shouldForwardProp,
+})<BoxProps>(
+  ({
+    _after,
+    _focus,
+    _selected,
+    _focusWithin,
+    _hover,
+    _invalid,
+    _active,
+    _disabled,
+    _grabbed,
+    _pressed,
+    _expanded,
+    _visited,
+    _before,
+    _readOnly,
+    _first,
+    _notFirst,
+    _notLast,
+    _last,
+    _placeholder,
+    _checked,
+    _groupHover,
+    _mixed,
+    _odd,
+    _even,
+  }: PseudoBoxProps) => {
+    return css({
+      [hover]: _hover,
+      [focus]: _focus,
+      [active]: _active,
+      [visited]: _visited,
+      [disabled]: _disabled,
+      [selected]: _selected,
+      [invalid]: _invalid,
+      [expanded]: _expanded,
+      [grabbed]: _grabbed,
+      [readOnly]: _readOnly,
+      [first]: _first,
+      [notFirst]: _notFirst,
+      [notLast]: _notLast,
+      [last]: _last,
+      [odd]: _odd,
+      [even]: _even,
+      [mixed]: _mixed,
+      [checked]: _checked,
+      [pressed]: _pressed,
+      [groupHover]: _groupHover,
+      '&:before': _before,
+      '&:after': _after,
+      '&:focus-within': _focusWithin,
+      '&::placeholder': _placeholder,
+    });
+  }
+);
+
 // export const Box = styled('div')<MinervaProps>(
 //   {
 //     boxSizing: 'border-box',

test/__snapshots__/checkbox.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Checkbox can have checked state changed by theme: Checked Checkbox 1`] = `
 <input
   aria-checked="true"
-  class="sc-bdnxRM sc-eCApnc hNpHox eAGjQQ"
+  class="sc-bdnxRM sc-jSFjdj hNpHox dRkgPV"
   data-reach-custom-checkbox-input=""
   type="checkbox"
 />
@@ -66,7 +66,7 @@ exports[`Checkbox can have checked state changed by theme: Unchecked Checkbox 1`
 exports[`Checkbox shows checkbox when checked: Checked Checkbox 1`] = `
 <input
   aria-checked="true"
-  class="sc-bdnxRM sc-eCApnc hvnVQY kaZnNq"
+  class="sc-bdnxRM sc-jSFjdj hvnVQY ibNROD"
   data-reach-custom-checkbox-input=""
   type="checkbox"
 />

test/__snapshots__/menu.test.tsx.snap

@@ -93,7 +93,7 @@ exports[`<Menu /> should render when positioned to Right: Open Menu 1`] = `
     aria-busy="false"
     aria-controls="menu--7"
     aria-haspopup="true"
-    class="sc-bdnxRM sc-eCApnc eJeGwH dEiIhW"
+    class="sc-bdnxRM sc-jSFjdj eJeGwH hsaKCn"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--7"
@@ -198,7 +198,7 @@ exports[`<Menu /> should render: Open Menu 1`] = `
     aria-busy="false"
     aria-controls="menu--1"
     aria-haspopup="true"
-    class="sc-bdnxRM sc-eCApnc eJeGwH dEiIhW"
+    class="sc-bdnxRM sc-jSFjdj eJeGwH hsaKCn"
     data-reach-menu-button=""
     data-testid="menu-button"
     id="menu-button--menu--1"