Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

components: Remove @emotion/css from Divider #33054

Merged
merged 14 commits into from
Jun 30, 2021
Merged

components: Remove @emotion/css from Divider #33054

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
82dadd5
Remove `@emotion/css` from Divider
sarayourfriend Jun 28, 2021
d5a3d61
Fix space input types
sarayourfriend Jun 28, 2021
548e6d6
Fix mysteriously broken type
sarayourfriend Jun 28, 2021
e0f0fc8
Change how we parse values so that `px` values are respected
sarayourfriend Jun 29, 2021
e1ff4f3
Update snapshots
sarayourfriend Jun 29, 2021
cf9ad48
Handle empty values
sarayourfriend Jun 29, 2021
07469e6
Fallback to `Number` parsing when CSS.supports does not exist
sarayourfriend Jun 30, 2021
370f87b
Add tests
sarayourfriend Jun 30, 2021
96199fc
Follow View naming convention
sarayourfriend Jun 30, 2021
740c5e6
Handle null so that stories work
sarayourfriend Jun 30, 2021
37b2e39
Split the stories in two
sarayourfriend Jun 30, 2021
0b5b6c0
Rename DividerProps to Props
sarayourfriend Jun 30, 2021
0660277
Combine NaN and CSS.supports check
sarayourfriend Jun 30, 2021
ddb527e
Update packages/components/src/ui/utils/space.ts
sarayourfriend Jun 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 48 additions & 42 deletions packages/components/src/card/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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"
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -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"
/>
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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"
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -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"
/>
Expand Down
76 changes: 6 additions & 70 deletions packages/components/src/divider/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }
/>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/divider/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
export { default as Divider } from './component';
export type { DividerProps } from './component';
export type { Props as DividerProps } from './types';
Loading