diff --git a/package-lock.json b/package-lock.json index bb70539a83817..db9df24abe649 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19518,7 +19518,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", + "resolved": false, "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "dev": true, "optional": true, @@ -19537,7 +19537,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -27310,7 +27310,7 @@ "dependencies": { "clone-deep": { "version": "0.2.4", - "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", + "resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=", "dev": true, "requires": { @@ -27344,7 +27344,7 @@ "dependencies": { "kind-of": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", + "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=", "dev": true, "requires": { diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap index f261c3d29c020..ff9d3e594b679 100644 --- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap +++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap @@ -1,11 +1,28 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ColorPaletteControl matches the snapshot 1`] = ` +.emotion-4 + .emotion-4 { + margin-bottom: 8px; +} + +.emotion-2 { + margin-bottom: 8px; +} + +.emotion-0 { + display: inline-block; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + margin-bottom: 4px; +} +
@@ -13,7 +30,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = ` className="block-editor-color-gradient-control__color-indicator" > Test Color
Currently selected link settings
"`; +exports[`Basic rendering should render 1`] = `"
Currently selected link settings
"`; diff --git a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap index 50527efe61021..1001b99a497f0 100644 --- a/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Basic rendering should render with required props 1`] = `"
Padding

Toggle between using the same value for all screen sizes or using a unique value per screen size.

All is used here for testing purposes to ensure we have access to details about the device.

"`; +exports[`Basic rendering should render with required props 1`] = `"
Padding

Toggle between using the same value for all screen sizes or using a unique value per screen size.

All is used here for testing purposes to ensure we have access to details about the device.

"`; diff --git a/packages/components/src/base-control/index.js b/packages/components/src/base-control/index.js index 00c24d7a4d1f4..b6b0258fbc86a 100644 --- a/packages/components/src/base-control/index.js +++ b/packages/components/src/base-control/index.js @@ -7,6 +7,7 @@ import classnames from 'classnames'; * Internal dependencies */ import VisuallyHidden from '../visually-hidden'; +import { Control, Field, Label, Help } from './styles/index-styles'; function BaseControl( { id, @@ -17,8 +18,10 @@ function BaseControl( { children, } ) { return ( -
-
+ + { label && id && ( hideLabelFromVision ? ( @@ -26,12 +29,12 @@ function BaseControl( { { label } ) : ( - + ) ) } { label && ! id && @@ -43,22 +46,26 @@ function BaseControl( { ) ) } { children } -
+ { !! help && ( -

{ help } -

+ ) } -
+ ); } BaseControl.VisualLabel = ( { className, children } ) => { className = classnames( 'components-base-control__label', className ); - return { children }; + return ( + + ); }; export default BaseControl; diff --git a/packages/components/src/base-control/style.scss b/packages/components/src/base-control/style.scss deleted file mode 100644 index b8509f7743397..0000000000000 --- a/packages/components/src/base-control/style.scss +++ /dev/null @@ -1,26 +0,0 @@ -.components-base-control { - font-family: $default-font; - font-size: $default-font-size; - - .components-base-control__field { - margin-bottom: $grid-size; - - .components-panel__row & { - margin-bottom: inherit; - } - } - - .components-base-control__label { - display: inline-block; - margin-bottom: $grid-size-small; - } - - .components-base-control__help { - margin-top: -$grid-size; - font-style: italic; - } -} - -.components-base-control + .components-base-control { - margin-bottom: $grid-size-large; -} diff --git a/packages/components/src/base-control/styles/index-styles.js b/packages/components/src/base-control/styles/index-styles.js new file mode 100644 index 0000000000000..58a48d20be75c --- /dev/null +++ b/packages/components/src/base-control/styles/index-styles.js @@ -0,0 +1,32 @@ +/** + * External dependencies + */ +import styled from '@emotion/styled'; + +/** + * Internal dependencies + */ +import { marginTop, marginBottom } from '../../utils/style-mixins'; +import { text } from '../../text/mixins'; + +export const Control = styled.div` + & + & { + ${marginBottom( 2 )} + } +`; + +export const Field = styled.div` + ${marginBottom( 2 )} +`; + +export const Label = styled.label` + display: inline-block; + ${text( { variant: 'body.small' } )} + ${marginBottom( 1 )} +`; + +export const Help = styled.p` + font-style: italic; + ${text( { variant: 'caption' } )} + ${marginTop( -2 )} +`; diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap index 3f58e17213bf9..b9f16e78eeca4 100644 --- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap +++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap @@ -1,6 +1,84 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ColorPicker should commit changes to all views on blur 1`] = ` +.emotion-6 + .emotion-6 { + margin-bottom: 8px; +} + +.emotion-4 { + margin-bottom: 8px; +} + +.emotion-0 { + display: inline-block; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + margin-bottom: 4px; +} + +.emotion-2 { + box-sizing: border-box; + width: 100%; + padding-left: 8px; + padding-right: 8px; + padding-top: 4px; + padding-bottom: 4px; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; + box-shadow: 0 0 0 transparent; + -webkit-transition: box-shadow 0.1s linear; + transition: box-shadow 0.1s linear; + border-radius: 4px; + border: 1px solid #7e8993; +} + +.emotion-2::-webkit-input-placeholder { + color: rgba(14,28,46,0.62); +} + +.emotion-2::-moz-placeholder { + color: rgba(14,28,46,0.62); +} + +.emotion-2:-ms-input-placeholder { + color: rgba(14,28,46,0.62); +} + +.emotion-2::placeholder { + color: rgba(14,28,46,0.62); +} + +.emotion-2::-webkit-input-placeholder { + color: rgba(14,28,46,0.62); +} + +.emotion-2::-moz-placeholder { + color: rgba(14,28,46,0.62); + opacity: 1; +} + +.emotion-2:-ms-input-placeholder { + color: rgba(14,28,46,0.62); +} + +@media ( prefers-reduced-motion:reduce ) { + .emotion-2 { + -webkit-transition-duration: 0ms; + transition-duration: 0ms; + } +} + +.emotion-2:focus { + color: #191e23; + border-color: #007cba; + box-shadow: 0 0 0 1px #007cba; + outline: 2px solid transparent; +} +
@@ -117,19 +195,19 @@ exports[`ColorPicker should commit changes to all views on blur 1`] = ` className="components-color-picker__inputs-fields" >
@@ -291,19 +447,19 @@ exports[`ColorPicker should commit changes to all views on keyDown = DOWN 1`] = className="components-color-picker__inputs-fields" >
@@ -465,19 +699,19 @@ exports[`ColorPicker should commit changes to all views on keyDown = ENTER 1`] = className="components-color-picker__inputs-fields" >
@@ -639,19 +951,19 @@ exports[`ColorPicker should commit changes to all views on keyDown = UP 1`] = ` className="components-color-picker__inputs-fields" >
@@ -813,19 +1203,19 @@ exports[`ColorPicker should only update input view for draft changes 1`] = ` className="components-color-picker__inputs-fields" >
@@ -987,19 +1455,19 @@ exports[`ColorPicker should render color picker 1`] = ` className="components-color-picker__inputs-fields" >
- { + return ( + {} } + /> + ); +}; diff --git a/packages/components/src/text-control/style.scss b/packages/components/src/text-control/style.scss deleted file mode 100644 index 273ee929fbb62..0000000000000 --- a/packages/components/src/text-control/style.scss +++ /dev/null @@ -1,4 +0,0 @@ -.components-text-control__input { - width: 100%; - padding: 6px 8px; -} diff --git a/packages/components/src/text-control/styles/index-styles.js b/packages/components/src/text-control/styles/index-styles.js new file mode 100644 index 0000000000000..01cae09dc6433 --- /dev/null +++ b/packages/components/src/text-control/styles/index-styles.js @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import styled from '@emotion/styled'; + +/** + * Internal dependencies + */ +import { + inputPlaceholder, + inputOutline, + focusedInputOutline, + paddingX, + paddingY, +} from '../../utils/style-mixins'; +import { text } from '../../text/mixins'; + +export const Input = styled.input` + box-sizing: border-box; + width: 100%; + ${ paddingX( 2 ) } + ${ paddingY( 1 ) } + ${ text( { variant: 'body' } ) } + ${ inputPlaceholder() } + ${ inputOutline() } + &:focus { + ${ focusedInputOutline() } + } +`; diff --git a/packages/components/src/utils/borderRadius.js b/packages/components/src/utils/borderRadius.js new file mode 100644 index 0000000000000..8f8f4aa8f63de --- /dev/null +++ b/packages/components/src/utils/borderRadius.js @@ -0,0 +1 @@ +export const borderRadius = '4px'; diff --git a/packages/components/src/utils/input.js b/packages/components/src/utils/input.js new file mode 100644 index 0000000000000..5b60ff1279f8c --- /dev/null +++ b/packages/components/src/utils/input.js @@ -0,0 +1,47 @@ +/** + * Internal dependencies + */ +import { rgba } from './colors'; +import { reduceMotion } from './reduce-motion'; +import { borderRadius } from './borderRadius'; + +/* Use opacity to work in various editor styles */ +const placeholderColor = rgba( '#0e1c2e', 0.62 ); + +export const inputPlaceholder = () => ` + /* individual definitions seem necessary, otherwise chrome doesn't seem to apply the styles */ + + ::placeholder { + color: ${ placeholderColor }; + } + + &::-webkit-input-placeholder { + color: ${ placeholderColor }; + } + + ::-moz-placeholder { + color: ${ placeholderColor }; + opacity: 1; /* Necessary because Firefox reduces this from 1 */ + } + + :-ms-input-placeholder { + color: ${ placeholderColor }; + } + +`; + +export const inputOutline = () => ` + box-shadow: 0 0 0 transparent; + transition: box-shadow 0.1s linear; + border-radius: ${ borderRadius }; + border: 1px solid #7e8993; + ${ reduceMotion( 'transition' ) }; +`; + +export const focusedInputOutline = () => ` + color: #191e23; + border-color: #007cba; + box-shadow: 0 0 0 1px #007cba; + /* Windows High Contrast mode will show this outline, but not the box-shadow */ + outline: 2px solid transparent; +`; diff --git a/packages/components/src/utils/reduce-motion.js b/packages/components/src/utils/reduce-motion.js index b3651d494c66e..8ce65b8b09d25 100644 --- a/packages/components/src/utils/reduce-motion.js +++ b/packages/components/src/utils/reduce-motion.js @@ -1,7 +1,7 @@ /** * Allows users to opt-out of animations via OS-level preferences. * - * @param {string} prop CSS Property name + * @param {"transition" | "animation" | undefined} prop CSS Property name * @return {string} */ export function reduceMotion( prop = 'transition' ) { diff --git a/packages/components/src/utils/spacing.js b/packages/components/src/utils/spacing.js new file mode 100644 index 0000000000000..c7b6f54fccb8f --- /dev/null +++ b/packages/components/src/utils/spacing.js @@ -0,0 +1,52 @@ +/** + * @typedef {-8 | -7 | -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8} SpacingScale + */ + +/** + * @type {Record} + */ +const spacings = { + 0: '0', + 1: '4px', + 2: '8px', + 3: '4px', + 4: '8px', + 5: '24px', + 6: '32px', + 7: '40px', + 8: '48px', +}; + +/** + * @param {string[]} properties + * @return {(value: SpacingScale) => string} + */ +const createMixin = ( properties ) => { + return ( value ) => + properties.reduce( + ( styles, property ) => ( { + ...styles, + [ property ]: + value < 0 + ? `-${ spacings[ Math.abs( value ) ] }` + : spacings[ value ], + } ), + {} + ); +}; + +export const margin = createMixin( [ 'margin' ] ); +export const marginX = createMixin( [ 'marginLeft', 'marginRight' ] ); +export const marginY = createMixin( [ 'marginTop', 'marginBottom' ] ); +export const marginTop = createMixin( [ 'marginTop' ] ); +export const marginRight = createMixin( [ 'marginRight' ] ); +export const marginBottom = createMixin( [ 'marginBottom' ] ); +export const marginLeft = createMixin( [ 'marginLeft' ] ); + +export const padding = createMixin( [ 'padding' ] ); +export const paddingX = createMixin( [ 'paddingLeft', 'paddingRight' ] ); +export const paddingY = createMixin( [ 'paddingTop', 'paddingBottom' ] ); +export const paddingTop = createMixin( [ 'paddingTop' ] ); +export const paddingRight = createMixin( [ 'paddingRight' ] ); +export const paddingBottom = createMixin( [ 'paddingBottom' ] ); +export const paddingLeft = createMixin( [ 'paddingLeft' ] ); diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js index 26344df68a9d9..7819e2628a537 100644 --- a/packages/components/src/utils/style-mixins.js +++ b/packages/components/src/utils/style-mixins.js @@ -1,3 +1,5 @@ export { color, rgba } from './colors'; export { reduceMotion } from './reduce-motion'; export { rtl } from './rtl'; +export * from './input'; +export * from './spacing'; diff --git a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap index 7988c3f41af70..7e490feb85d59 100644 --- a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap +++ b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap @@ -1,14 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation message when toggled on 1`] = ` +.emotion-2 + .emotion-2 { + margin-bottom: 8px; +} + +.emotion-0 { + margin-bottom: 8px; +} +

Help text @@ -1822,14 +1848,40 @@ exports[`Storyshots Components/Card/Media On Top 1`] = ` `; exports[`Storyshots Components/CheckboxControl All 1`] = ` +.emotion-6 + .emotion-6 { + margin-bottom: 8px; +} + +.emotion-2 { + margin-bottom: 8px; +} + +.emotion-0 { + display: inline-block; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 20px; + margin-bottom: 4px; +} + +.emotion-4 { + font-style: italic; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 16px; + margin-top: -8px; +} +

Is the user an author or not? @@ -1878,11 +1930,19 @@ exports[`Storyshots Components/CheckboxControl All 1`] = ` `; exports[`Storyshots Components/CheckboxControl Default 1`] = ` +.emotion-2 + .emotion-2 { + margin-bottom: 8px; +} + +.emotion-0 { + margin-bottom: 8px; +} +

@@ -2292,19 +2430,19 @@ exports[`Storyshots Components/ColorPicker Alpha Enabled 1`] = ` className="components-color-picker__inputs-fields" >
@@ -2466,19 +2682,19 @@ exports[`Storyshots Components/ColorPicker Default 1`] = ` className="components-color-picker__inputs-fields" >