Skip to content

Commit

Permalink
components: Remove wp-g2 imports from elevation (#31230)
Browse files Browse the repository at this point in the history 
* components: Remove wp-g2 imports from elevation

* components: Update elevation storybook to remove css prop

* Fix compilation errors and remove a usage of the `config` helper

* Update snapshot tests
  • Loading branch information
@sarayourfriend
sarayourfriend authored Apr 27, 2021
1 parent 3af493b commit cebcfb0
Show file tree
Hide file tree
Showing 8 changed files with 195 additions and 229 deletions.
117 changes: 56 additions & 61 deletions packages/components/src/ui/card/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,65 +24,12 @@ Snapshot Diff:
`;
exports[`props should render correctly 1`] = `
.emotion-22.emotion-22.emotion-22.emotion-22.emotion-22.emotion-22.emotion-22 {
background-color: #ffffff;
background-color: var(--wp-g2-surface-color);
color: #1e1e1e;
color: var(--wp-g2-color-text);
position: relative;
--wp-g2-surface-background-size: 12px;
--wp-g2-surface-background-size-dotted: 11px;
}
.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12.emotion-12 {
border-radius: inherit;
bottom: 0;
box-shadow: 0 1px 2px 0 rgba(0 ,0,0,0.05);
opacity: 1;
opacity: var(--wp-g2-elevation-intensity);
left: 0;
right: 0;
top: 0;
-webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
}
.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17 {
border-radius: inherit;
bottom: 0;
box-shadow: 0 2px 4px 0 rgba(0 ,0,0,0.1);
opacity: 1;
opacity: var(--wp-g2-elevation-intensity);
left: 0;
right: 0;
top: 0;
-webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-webkit-transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
transition: box-shadow var(--wp-g2-transition-duration) var(--wp-g2-transition-timing-function);
}
.emotion-11 {
background: transparent;
display: block;
margin: 0 !important;
pointer-events: none;
position: absolute;
will-change: box-shadow;
}
.emotion-21 {
.emotion-17 {
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
outline: none;
border-radius: 2px;
}
.emotion-13 {
border-radius: 2px;
}
.emotion-0 {
display: -webkit-box;
display: -webkit-flex;
Expand Down Expand Up @@ -216,8 +163,56 @@ exports[`props should render correctly 1`] = `
border-bottom-right-radius: 2px;
}
.emotion-11 {
background: transparent;
display: block;
margin: 0 !important;
pointer-events: none;
position: absolute;
will-change: box-shadow;
border-radius: inherit;
bottom: 0;
box-shadow: 0 1px 2px 0 rgba(0 ,0,0,0.05);
opacity: 1;
left: 0;
right: 0;
top: 0;
-webkit-transition: box-shadow 200ms cubic-bezier(0.08,0.52,0.52,1);
transition: box-shadow 200ms cubic-bezier(0.08,0.52,0.52,1);
border-radius: 2px;
}
.emotion-14 {
background: transparent;
display: block;
margin: 0 !important;
pointer-events: none;
position: absolute;
will-change: box-shadow;
border-radius: inherit;
bottom: 0;
box-shadow: 0 2px 4px 0 rgba(0 ,0,0,0.1);
opacity: 1;
left: 0;
right: 0;
top: 0;
-webkit-transition: box-shadow 200ms cubic-bezier(0.08,0.52,0.52,1);
transition: box-shadow 200ms cubic-bezier(0.08,0.52,0.52,1);
border-radius: 2px;
}
.emotion-18.emotion-18.emotion-18.emotion-18.emotion-18.emotion-18.emotion-18 {
background-color: #ffffff;
background-color: var(--wp-g2-surface-color);
color: #1e1e1e;
color: var(--wp-g2-color-text);
position: relative;
--wp-g2-surface-background-size: 12px;
--wp-g2-surface-background-size-dotted: 11px;
}
<div
class="components-surface components-card emotion-21 emotion-22 emotion-1 emotion-2"
class="components-surface components-card emotion-17 emotion-18 emotion-1 emotion-2"
data-wp-c16t="true"
data-wp-component="Card"
>
Expand Down Expand Up @@ -249,13 +244,13 @@ exports[`props should render correctly 1`] = `
</div>
<div
aria-hidden="true"
class="emotion-11 emotion-12 components-elevation emotion-13 emotion-1 emotion-2"
class="components-elevation emotion-11 emotion-1 emotion-2"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
<div
aria-hidden="true"
class="emotion-11 emotion-17 components-elevation emotion-13 emotion-1 emotion-2"
class="components-elevation emotion-14 emotion-1 emotion-2"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
Expand All @@ -273,15 +268,15 @@ Snapshot Diff:
/>
<div
aria-hidden="true"
- class="css-zsg5ag-Elevation css-1yc4u8p components-elevation css-icip60 css-1mm2cvy-View egi4jkx0"
+ class="css-zsg5ag-Elevation css-lxi9t4 components-elevation css-icip60 css-1mm2cvy-View egi4jkx0"
- class="components-elevation css-109wvzr-Elevation css-1mm2cvy-View egi4jkx0"
+ class="components-elevation css-xtff41-Elevation css-1mm2cvy-View egi4jkx0"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
<div
aria-hidden="true"
- class="css-zsg5ag-Elevation css-akhjqa components-elevation css-icip60 css-1mm2cvy-View egi4jkx0"
+ class="css-zsg5ag-Elevation css-19rc1q1 components-elevation css-icip60 css-1mm2cvy-View egi4jkx0"
- class="components-elevation css-1ajhhcx-Elevation css-1mm2cvy-View egi4jkx0"
+ class="components-elevation css-hdn3qt-Elevation css-1mm2cvy-View egi4jkx0"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
Expand Down
21 changes: 16 additions & 5 deletions packages/components/src/ui/elevation/hook.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { css, cx, getBoxShadow, ui } from '@wp-g2/styles';
import { css, cx } from 'emotion';
import { isNil } from 'lodash';

/**
Expand All @@ -14,6 +14,19 @@ import { useMemo } from '@wordpress/element';
*/
import { useContextSystem } from '../context';
import * as styles from './styles';
import CONFIG from '../../utils/config-values';

/**
* @param {number} value
* @return {string} The box shadow value.
*/
export function getBoxShadow( value ) {
const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
const boxShadow = `0 ${ value }px ${ value * 2 }px 0
${ boxShadowColor }`;

return boxShadow;
}

/**
* @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
Expand Down Expand Up @@ -42,17 +55,15 @@ export function useElevation( props ) {
activeValue = ! isNil( active ) ? active : undefined;
}

const transition = `box-shadow ${ ui.get(
'transitionDuration'
) } ${ ui.get( 'transitionTimingFunction' ) }`;
const transition = `box-shadow ${ CONFIG.transitionDuration } ${ CONFIG.transitionTimingFunction }`;

const sx = {};

sx.Base = css( {
borderRadius,
bottom: offset,
boxShadow: getBoxShadow( value ),
opacity: ui.get( 'elevationIntensity' ),
opacity: CONFIG.elevationIntensity,
left: offset,
right: offset,
top: offset,
Expand Down
12 changes: 6 additions & 6 deletions packages/components/src/ui/elevation/stories/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External dependencies
*/
import { number } from '@storybook/addon-knobs';
import { Divider } from '@wp-g2/components';

/**
* Internal dependencies
Expand All @@ -11,6 +10,7 @@ import { Elevation } from '../index';
import { Grid } from '../../grid';
import { View } from '../../view';
import { HStack } from '../../h-stack';
import { Divider } from '../../divider';
import {
ExampleGrid,
ExampleGridItem,
Expand All @@ -30,7 +30,7 @@ export default {
const ElevationWrapper = ( { children } ) => (
<HStack alignment="center">
<View
css={ {
style={ {
position: 'relative',
width: 40,
height: 40,
Expand Down Expand Up @@ -59,10 +59,10 @@ export const _default = () => {
{ elevations.map( ( elevation, index ) => {
return (
<ExampleGridItem key={ index }>
<View css={ { padding: 20, paddingBottom: 40 } }>
<View style={ { padding: 20, paddingBottom: 40 } }>
<ElevationWrapper>
<Elevation
css={ { background: 'white' } }
style={ { background: 'white' } }
value={ index }
/>
</ElevationWrapper>
Expand Down Expand Up @@ -92,7 +92,7 @@ export const Focus = () => {
as="a"
href="#"
onClick={ ( e ) => e.preventDefault() }
css={ {
style={ {
display: 'block',
width: 100,
height: 100,
Expand All @@ -107,7 +107,7 @@ export const Focus = () => {

return (
<View
css={ {
style={ {
padding: '10vh',
} }
>
Expand Down
Loading

0 comments on commit cebcfb0

Please sign in to comment.