From fab52845af8e04d3a996a11e9e95355cb193455a Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Thu, 23 Dec 2021 14:54:24 -0600 Subject: [PATCH 1/4] feat: replace base Box component with PseudoBox --- src/PseudoBox/index.tsx | 4 +- src/layout.tsx | 87 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 88 insertions(+), 3 deletions(-) diff --git a/src/PseudoBox/index.tsx b/src/PseudoBox/index.tsx index 15f742d..389dac9 100644 --- a/src/PseudoBox/index.tsx +++ b/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, })( ({ diff --git a/src/layout.tsx b/src/layout.tsx index 1074969..14305ea 100644 --- a/src/layout.tsx +++ b/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 { PseudoBox, 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, })( { @@ -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 PseudoProps = MinervaProps & PseudoBoxProps; + +export const Box = styled(BaseBox).withConfig({ + shouldForwardProp, +})( + ({ + _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')( // { // boxSizing: 'border-box', From 9dfdd8f960e8ae642f15c2198caa5035e4cd70bf Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Thu, 23 Dec 2021 15:01:16 -0600 Subject: [PATCH 2/4] fix: rename PseudoProps to BoxProps --- src/layout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layout.tsx b/src/layout.tsx index 14305ea..eeab7c3 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -359,11 +359,11 @@ const notFirst = '&:not(:first-of-type)'; const notLast = '&:not(:last-of-type)'; const groupHover = '[role=group]:hover &'; -export type PseudoProps = MinervaProps & PseudoBoxProps; +export type BoxProps = MinervaProps & PseudoBoxProps; export const Box = styled(BaseBox).withConfig({ shouldForwardProp, -})( +})( ({ _after, _focus, From 2b4c03fe02e6268eeb8f265992c7e21ca82215f1 Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Thu, 23 Dec 2021 15:08:34 -0600 Subject: [PATCH 3/4] fix: update test snapshots --- test/__snapshots__/checkbox.test.tsx.snap | 4 ++-- test/__snapshots__/menu.test.tsx.snap | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/test/__snapshots__/checkbox.test.tsx.snap b/test/__snapshots__/checkbox.test.tsx.snap index 3186c6d..797c226 100644 --- a/test/__snapshots__/checkbox.test.tsx.snap +++ b/test/__snapshots__/checkbox.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Checkbox can have checked state changed by theme: Checked Checkbox 1`] = ` @@ -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`] = ` diff --git a/test/__snapshots__/menu.test.tsx.snap b/test/__snapshots__/menu.test.tsx.snap index 2c607fd..9c3d181 100644 --- a/test/__snapshots__/menu.test.tsx.snap +++ b/test/__snapshots__/menu.test.tsx.snap @@ -93,7 +93,7 @@ exports[` 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[` 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" From 470c61501519cc36bc6360c8e2e4c33261a5689f Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Thu, 23 Dec 2021 15:13:28 -0600 Subject: [PATCH 4/4] fix: remove unused import --- src/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layout.tsx b/src/layout.tsx index eeab7c3..f322f55 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -23,7 +23,7 @@ import { // import systemPropTypes from '@styled-system/prop-types'; import extraConfig from './utils'; -import { PseudoBox, PseudoBoxProps } from '.'; +import { PseudoBoxProps } from '.'; const customProps = system({ textDecoration: true,