From fca03322c064c1c3b6f13df915749c0a0a67e629 Mon Sep 17 00:00:00 2001 From: Brent Swisher Date: Thu, 27 Feb 2020 16:04:41 -0500 Subject: [PATCH 1/4] Add setup/teardown to the storybook tests adding a stub window.MutationObserver, which the Disabled component needs --- storybook/test/index.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/storybook/test/index.js b/storybook/test/index.js index 8752847743e0b8..e9f0301822a100 100644 --- a/storybook/test/index.js +++ b/storybook/test/index.js @@ -6,6 +6,20 @@ import initStoryshots, { } from '@storybook/addon-storyshots'; import path from 'path'; +let MutationObserver; +beforeAll( () => { + MutationObserver = window.MutationObserver; + window.MutationObserver = function() {}; + window.MutationObserver.prototype = { + observe() {}, + disconnect() {}, + }; +} ); + +afterAll( () => { + window.MutationObserver = MutationObserver; +} ); + initStoryshots( { configPath: path.resolve( __dirname, '../' ), test: snapshotWithOptions( ( story ) => ( { @@ -25,7 +39,6 @@ initStoryshots( { const parentElement = document.createElement( 'div' ); parentElement.appendChild( currentElement ); } - return currentElement; }, } ) ), From 39ee42680322d0f28138b2b892d05aeb145288a2 Mon Sep 17 00:00:00 2001 From: Brent Swisher Date: Thu, 27 Feb 2020 16:05:14 -0500 Subject: [PATCH 2/4] Add a storybook story for the disabled component --- .../components/src/disabled/stories/index.js | 49 ++ storybook/test/__snapshots__/index.js.snap | 724 +++++++++++++++--- storybook/test/index.js | 3 + 3 files changed, 689 insertions(+), 87 deletions(-) create mode 100644 packages/components/src/disabled/stories/index.js diff --git a/packages/components/src/disabled/stories/index.js b/packages/components/src/disabled/stories/index.js new file mode 100644 index 00000000000000..2f89eeeab15094 --- /dev/null +++ b/packages/components/src/disabled/stories/index.js @@ -0,0 +1,49 @@ +/** + * Internal dependencies + */ +import Disabled from '../'; +import SelectControl from '../../select-control/'; +import TextControl from '../../text-control/'; +import TextareaControl from '../../textarea-control/'; +import CheckboxControl from '../../checkbox-control/'; +import RadioControl from '../../radio-control/'; +import RangeControl from '../../range-control/'; +import ToggleControl from '../../toggle-control/'; +import FormFileUpload from '../../form-file-upload/'; +import AnglePickerControl from '../../angle-picker-control/'; + +export default { + title: 'Components/Disabled', + component: Disabled, +}; + +export const _default = () => { + return ( + + + + {} } + options={ [ + { value: null, label: 'Select an option', disabled: true }, + { value: 'a', label: 'Option A' }, + { value: 'b', label: 'Option B' }, + { value: 'c', label: 'Option C' }, + ] } + /> + + + + + Upload + + + ); +}; diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 58a2e69d136498..028cb54e23b6a6 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -2590,6 +2590,556 @@ exports[`Storyshots Components/Dashicon Default 1`] = ` `; +exports[`Storyshots Components/Disabled Default 1`] = ` +.emotion-16 { + -webkit-tap-highlight-color: transparent; + box-sizing: border-box; + cursor: pointer; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + padding: 0; + position: relative; + touch-action: none; + width: 100%; +} + +.emotion-12 { + box-sizing: border-box; + color: #007cba; + display: block; + padding-top: 15px; + position: relative; + width: 100%; + height: 30px; + min-height: 30px; + margin-left: 10px; +} + +.emotion-0 { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 100%; + left: 0; + margin: 0; + opacity: 0; + outline: none; + position: absolute; + right: 0; + top: 0; + width: 100%; +} + +.emotion-2 { + background-color: #d7dade; + box-sizing: border-box; + left: 0; + pointer-events: none; + right: 0; + display: block; + height: 3px; + position: absolute; + margin-top: 14px; + top: 0; +} + +.emotion-4 { + background-color: currentColor; + border-radius: 1px; + box-sizing: border-box; + height: 3px; + pointer-events: none; + display: block; + position: absolute; + margin-top: 14px; + top: 0; +} + +.emotion-8 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + box-sizing: border-box; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: 20px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + margin-top: 5px; + outline: 0; + pointer-events: none; + position: absolute; + top: 0; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 20px; + margin-left: -10px; +} + +.emotion-6 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: white; + border-radius: 50%; + border: 1px solid #7e8993; + box-sizing: border-box; + height: 100%; + outline: 0; + pointer-events: none; + position: absolute; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 100%; + border-color: #7e8993; + box-shadow: 0 0 0 rgba(0,0,0,0); +} + +.emotion-10 { + background: #23282d; + border-radius: 3px; + box-sizing: border-box; + color: white; + display: inline-block; + font-size: 11px; + min-width: 32px; + opacity: 0; + padding: 8px; + position: absolute; + text-align: center; + -webkit-transition: opacity 120ms ease; + transition: opacity 120ms ease; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + opacity: 0; + margin-top: -4px; + top: -100%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); +} + +.emotion-10::after { + border: 6px solid #23282d; + border-left-color: transparent; + border-right-color: transparent; + bottom: -6px; + box-sizing: border-box; + content: ''; + height: 0; + left: 50%; + line-height: 0; + margin-left: -6px; + position: absolute; + width: 0; +} + +.emotion-10::after { + border-bottom: none; + border-top-style: solid; + bottom: -6px; +} + +@media ( prefers-reduced-motion:reduce ) { + .emotion-10 { + -webkit-transition-duration: 0ms; + transition-duration: 0ms; + } +} + +.emotion-14 { + box-sizing: border-box; + display: inline-block; + margin-top: 0; + min-width: 54px; + max-width: 120px; + margin-left: 16px; +} + +input[type='number'].emotion-14 { + height: 30px; + min-height: 30px; +} + +
+
+
+ + +
+
+
+
+ +