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.

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 duplicated space utilities #32852

Merged
merged 2 commits into from
Jun 23, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
}

.emotion-0 {
margin-bottom: 8px;
margin-bottom: calc(4px * 2);
}

.components-panel__row .emotion-0 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@ import styled from '@emotion/styled';
/**
* Internal dependencies
*/
import { font, space, COLORS } from '../../utils';
import { font, COLORS } from '../../utils';
import { space } from '../../ui/utils/space';

export const Wrapper = styled.div`
font-family: ${ font( 'default.fontFamily' ) };
font-size: ${ font( 'default.fontSize' ) };
`;

export const StyledField = styled.div`
margin-bottom: ${ space( 1 ) };
margin-bottom: ${ space( 2 ) };

.components-panel__row & {
margin-bottom: inherit;
Expand All @@ -23,7 +24,7 @@ export const StyledField = styled.div`

export const StyledLabel = styled.label`
display: inline-block;
margin-bottom: ${ space( 1 ) };
margin-bottom: ${ space( 2 ) };
`;

export const StyledHelp = styled.p`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -96,10 +96,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
- htmlFor="inspector-text-control-4"
+ htmlFor="inspector-text-control-3"
>
Expand Down Expand Up @@ -218,10 +218,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
- htmlFor="inspector-text-control-8"
+ htmlFor="inspector-text-control-7"
>
Expand Down Expand Up @@ -340,10 +340,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
- htmlFor="inspector-text-control-10"
+ htmlFor="inspector-text-control-9"
>
Expand Down Expand Up @@ -462,10 +462,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
- htmlFor="inspector-text-control-6"
+ htmlFor="inspector-text-control-5"
>
Expand Down Expand Up @@ -547,10 +547,10 @@ Snapshot Diff:
</div>
@@ -119,22 +119,22 @@
<div
className="components-base-control__field css-11vcxb9-StyledField e1puf3u1"
className="components-base-control__field css-igk9ll-StyledField e1puf3u1"
>
<label
className="components-base-control__label css-pezhm9-StyledLabel e1puf3u2"
className="components-base-control__label css-13ck15n-StyledLabel e1puf3u2"
- htmlFor="inspector-text-control-2"
+ htmlFor="inspector-text-control-1"
>
Expand Down Expand Up @@ -580,7 +580,7 @@ exports[`ColorPicker should render color picker 1`] = `
}

.emotion-2 {
margin-bottom: 8px;
margin-bottom: calc(4px * 2);
}

.components-panel__row .emotion-2 {
Expand All @@ -589,7 +589,7 @@ exports[`ColorPicker should render color picker 1`] = `

.emotion-0 {
display: inline-block;
margin-bottom: 8px;
margin-bottom: calc(4px * 2);
}

<div
Expand Down
55 changes: 27 additions & 28 deletions packages/components/src/navigation/styles/navigation-styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,20 +14,21 @@ import { isRTL } from '@wordpress/i18n';
import { G2, UI } from '../../utils/colors-values';
import Button from '../../button';
import { Text } from '../../text';
import { reduceMotion, space, rtl } from '../../utils';
import { reduceMotion, rtl } from '../../utils';
import { space } from '../../ui/utils/space';

export const NavigationUI = styled.div`
width: 100%;
background-color: ${ G2.darkGray.primary };
box-sizing: border-box;
color: #f0f0f0;
padding: 0 ${ space( 2 ) };
padding: 0 ${ space( 4 ) };
overflow: hidden;
`;

export const MenuUI = styled.div`
margin-top: ${ space( 3 ) };
margin-bottom: ${ space( 3 ) };
margin-top: ${ space( 6 ) };
margin-bottom: ${ space( 6 ) };
display: flex;
flex-direction: column;
ul {
Expand All @@ -36,11 +37,11 @@ export const MenuUI = styled.div`
list-style: none;
}
.components-navigation__back-button {
margin-bottom: ${ space( 3 ) };
margin-bottom: ${ space( 6 ) };
}

.components-navigation__group + .components-navigation__group {
margin-top: ${ space( 3 ) };
margin-top: ${ space( 6 ) };
}
`;

Expand Down Expand Up @@ -70,23 +71,21 @@ export const MenuTitleHeadingUI = styled( Text )`
color: ${ G2.gray[ 100 ] };
display: flex;
justify-content: space-between;
margin-bottom: ${ space( 1 ) };
margin-bottom: ${ space( 2 ) };
padding: ${ () =>
isRTL()
? `${ space( 0.5 ) } ${ space( 2 ) } ${ space( 0.5 ) } ${ space(
1.5
) }`
: `${ space( 0.5 ) } ${ space( 1.5 ) } ${ space( 0.5 ) } ${ space(
2
? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } ${ space( 3 ) }`
: `${ space( 1 ) } ${ space( 3 ) } ${ space( 1 ) } ${ space(
4
) }` };
`;

export const MenuTitleActionsUI = styled.span`
height: ${ space( 3 ) }; // 24px, same height as the buttons inside
height: ${ space( 6 ) }; // 24px, same height as the buttons inside

.components-button.is-small {
color: ${ G2.lightGray.ui };
margin-right: ${ space( 0.5 ) }; // Avoid hiding the focus outline
margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline
padding: 0;

&:active:not( :disabled ) {
Expand All @@ -105,11 +104,11 @@ export const MenuTitleSearchUI = styled.div`
position: relative;

input {
height: ${ space( 4.5 ) }; // 36px, same height as MenuTitle
margin-bottom: ${ space( 1 ) };
padding-left: ${ space( 4 ) }; // Leave room for the search icon
height: ${ space( 9 ) }; // 36px, same height as MenuTitle
margin-bottom: ${ space( 2 ) };
padding-left: ${ space( 8 ) }; // Leave room for the search icon
padding-right: ${ space(
4
8
) }; // Leave room for the close search button

&::-webkit-search-decoration,
Expand All @@ -121,7 +120,7 @@ export const MenuTitleSearchUI = styled.div`
}

> svg {
left: ${ space( 0.5 ) };
left: ${ space( 1 ) };
position: absolute;
top: 6px;
}
Expand All @@ -130,7 +129,7 @@ export const MenuTitleSearchUI = styled.div`
height: 30px;
padding: 0;
position: absolute;
right: ${ space( 1 ) };
right: ${ space( 2 ) };
top: 3px;

&:active:not( :disabled ) {
Expand All @@ -143,11 +142,11 @@ export const MenuTitleSearchUI = styled.div`
`;

export const GroupTitleUI = styled( Text )`
margin-top: ${ space( 1 ) };
margin-top: ${ space( 2 ) };
padding: ${ () =>
isRTL()
? `${ space( 0.5 ) } ${ space( 2 ) } ${ space( 0.5 ) } 0`
: `${ space( 0.5 ) } 0 ${ space( 0.5 ) } ${ space( 2 ) }` };
? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } 0`
: `${ space( 1 ) } 0 ${ space( 1 ) } ${ space( 4 ) }` };
text-transform: uppercase;
color: ${ G2.gray[ 100 ] };
`;
Expand All @@ -162,7 +161,7 @@ export const ItemBaseUI = styled.li`
a {
width: 100%;
color: ${ G2.lightGray.ui };
padding: ${ space( 1 ) } ${ space( 2 ) }; /* 8px 16px */
padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */
${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) }

&:hover,
Expand Down Expand Up @@ -193,18 +192,18 @@ export const ItemUI = styled.div`
height: auto;
min-height: 40px;
margin: 0;
padding: ${ space( 0.75 ) } ${ space( 2 ) };
padding: ${ space( 1.5 ) } ${ space( 4 ) };
font-weight: 400;
line-height: 20px;
width: 100%;
color: ${ G2.lightGray.ui };
`;

export const ItemBadgeUI = styled.span`
margin-left: ${ () => ( isRTL() ? '0' : space( 1 ) ) };
margin-right: ${ () => ( isRTL() ? space( 1 ) : '0' ) };
margin-left: ${ () => ( isRTL() ? '0' : space( 2 ) ) };
margin-right: ${ () => ( isRTL() ? space( 2 ) : '0' ) };
display: inline-flex;
padding: ${ space( 0.5 ) } ${ space( 1.5 ) };
padding: ${ space( 1 ) } ${ space( 3 ) };
border-radius: 2px;
animation: fade-in 250ms ease-out;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import styled from '@emotion/styled';
* Internal dependencies
*/
import NumberControl from '../../number-control';
import { COLORS, reduceMotion, rtl, space } from '../../utils';
import { COLORS, reduceMotion, rtl } from '../../utils';
import { space } from '../../ui/utils/space';

const rangeHeight = () => css( { height: 30, minHeight: 30 } );
const thumbSize = 20;
Expand Down Expand Up @@ -276,13 +277,13 @@ export const InputNumber = styled( NumberControl )`
display: inline-block;
font-size: 13px;
margin-top: 0;
width: ${ space( 8 ) } !important;
width: ${ space( 16 ) } !important;

input[type='number']& {
${ rangeHeight };
}

${ rtl( { marginLeft: `${ space( 2 ) } !important` } ) }
${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }
`;

export const ActionRightWrapper = styled.span`
Expand Down
13 changes: 0 additions & 13 deletions packages/components/src/utils/space.js

This file was deleted.

1 change: 0 additions & 1 deletion packages/components/src/utils/style-mixins.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export { rgba } from './colors';
export { reduceMotion } from './reduce-motion';
export { rtl } from './rtl';
export { space } from './space';
export { font } from './font';
export { breakpoint } from './breakpoint';
export { default as CONFIG } from './config-values';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
}

.emotion-0 {
margin-bottom: 8px;
margin-bottom: calc(4px * 2);
}

.components-panel__row .emotion-0 {
Expand Down Expand Up @@ -70,7 +70,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
}

.emotion-0 {
margin-bottom: 8px;
margin-bottom: calc(4px * 2);
}

.components-panel__row .emotion-0 {
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
}

.emotion-0 {
margin-bottom: 8px;
margin-bottom: calc(4px * 2);
}

.components-panel__row .emotion-0 {
Expand Down Expand Up @@ -182,7 +182,7 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
}

.emotion-0 {
margin-bottom: 8px;
margin-bottom: calc(4px * 2);
}

.components-panel__row .emotion-0 {
Expand Down