From e12751e5b7f567bd95ae7211261ea25802dda772 Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 27 Mar 2021 17:54:42 -0400 Subject: [PATCH 1/8] Update HR page --- src-docs/src/components/guide_components.scss | 25 ++++++------- .../views/horizontal_rule/horizontal_rule.js | 14 ++++++++ .../views/horizontal_rule/horizontal_rule.tsx | 11 ------ .../horizontal_rule_example.js | 30 ++++++---------- .../horizontal_rule/horizontal_rule_margin.js | 36 +++++++++++++++++++ .../horizontal_rule_margin.tsx | 20 ----------- 6 files changed, 71 insertions(+), 65 deletions(-) create mode 100644 src-docs/src/views/horizontal_rule/horizontal_rule.js delete mode 100644 src-docs/src/views/horizontal_rule/horizontal_rule.tsx create mode 100644 src-docs/src/views/horizontal_rule/horizontal_rule_margin.js delete mode 100644 src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index bac92417c9a..07e99fabdd3 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -90,24 +90,21 @@ $guideZLevelHighest: $euiZLevel9 + 1000; } } -.guideDemo__highlightSpacer { - .euiSpacer { - background: transparentize($euiColorPrimary, .9); - } +.guideDemo__highlightHR > div, +.guideDemo__highlightSpacer .euiSpacer, +.guideDemo__highlightGrid .euiFlexItem, +.guideDemo__highlightGridWrap .euiFlexItem div { + background: transparentize($euiColorPrimary, .9); } -.guideDemo__highlightGrid { - .euiFlexItem { - background: transparentize($euiColorPrimary, .9); - padding: $euiSize; - } +.guideDemo__highlightHR > div { + padding: .1px; + margin-bottom: $euiSize; } -.guideDemo__highlightGridWrap { - .euiFlexItem div { - background: transparentize($euiColorPrimary, .9); - padding: $euiSize; - } +.guideDemo__highlightGrid .euiFlexItem, +.guideDemo__highlightGridWrap .euiFlexItem div { + padding: $euiSize; } // sass-lint:disable no-important diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule.js b/src-docs/src/views/horizontal_rule/horizontal_rule.js new file mode 100644 index 00000000000..86376325a79 --- /dev/null +++ b/src-docs/src/views/horizontal_rule/horizontal_rule.js @@ -0,0 +1,14 @@ +import React from 'react'; + +import { EuiHorizontalRule, EuiCode } from '../../../../src/components'; + +export default () => ( +
+ quarter + + half + + full (default) + +
+); diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule.tsx b/src-docs/src/views/horizontal_rule/horizontal_rule.tsx deleted file mode 100644 index f5bc7af1bfd..00000000000 --- a/src-docs/src/views/horizontal_rule/horizontal_rule.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import { EuiHorizontalRule } from '../../../../src/components/horizontal_rule'; - -export default () => ( -
- - - -
-); diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js index 6bfcf86cd85..7ea0a6cdefd 100644 --- a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js +++ b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js @@ -1,22 +1,18 @@ import React from 'react'; -import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; -import { EuiHorizontalRule } from '../../../../src/components'; +import { EuiHorizontalRule, EuiCode } from '../../../../src/components'; import { horizontalRuleConfig } from './playground'; import HorizontalRule from './horizontal_rule'; const horizontalRuleSource = require('!!raw-loader!./horizontal_rule'); -const horizontalRuleHtml = renderToHtml(HorizontalRule); import HorizontalRuleMargin from './horizontal_rule_margin'; const horizontalRuleMarginSource = require('!!raw-loader!./horizontal_rule_margin'); -const horizontalRuleMarginHtml = renderToHtml(HorizontalRuleMargin); -const horizontalRuleSnippet = ''; +const horizontalRuleSnippet = ''; const horizontalRuleMarginSnippet = ''; export const HorizontalRuleExample = { @@ -28,20 +24,18 @@ export const HorizontalRuleExample = { type: GuideSectionTypes.JS, code: horizontalRuleSource, }, - { - type: GuideSectionTypes.HTML, - code: horizontalRuleHtml, - }, ], text: (

- EuiHorizontalRule can carry a size. By default it - will be full. + EuiHorizontalRule is a styled{' '} + {'

'} element. It can be one of three provided + sizes (lengths), by default it will be full.

), props: { EuiHorizontalRule }, snippet: horizontalRuleSnippet, demo: , + playground: horizontalRuleConfig, }, { title: 'Margins', @@ -50,21 +44,17 @@ export const HorizontalRuleExample = { type: GuideSectionTypes.JS, code: horizontalRuleMarginSource, }, - { - type: GuideSectionTypes.HTML, - code: horizontalRuleMarginHtml, - }, ], text: (

- EuiHorizontalRule margins can also be defined. - Don’t forget that margins will collapse against items that - proceed / follow. + The spacing added before and after EuiHorizontalRule{' '} + can be adjusted using the margin prop. Don’t + forget that margins will collapse against items that proceed and/or + follow.

), snippet: horizontalRuleMarginSnippet, demo: , }, ], - playground: horizontalRuleConfig, }; diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js new file mode 100644 index 00000000000..6a26805cc4a --- /dev/null +++ b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import { EuiHorizontalRule, EuiCode } from '../../../../src/components'; + +export default () => ( +
+ none +
+ +
+ xs +
+ +
+ s +
+ +
+ m +
+ +
+ l (default) +
+ +
+ xl +
+ +
+ xxl +
+ +
+
+); diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx deleted file mode 100644 index bfe4ebb55f0..00000000000 --- a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import { EuiHorizontalRule } from '../../../../src/components/horizontal_rule'; - -export default () => ( -
-

xs

- -

s

- -

m

- -

l (default)

- -

xl

- -

xxl

- -
-); From 992b027bc905c6d620e26ee5874cc790d95d4cdc Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 27 Mar 2021 23:30:10 -0400 Subject: [PATCH 2/8] Fixed up Modal page --- src-docs/src/views/color_picker/containers.js | 4 +- src-docs/src/views/combo_box/containers.js | 4 +- src-docs/src/views/modal/confirm_modal.js | 84 -------- .../src/views/modal/confirm_modal_loading.js | 69 ++++++ src-docs/src/views/modal/guidelines.js | 6 +- src-docs/src/views/modal/modal.js | 140 +++---------- src-docs/src/views/modal/modal_example.js | 197 ++++++++++++++---- src-docs/src/views/modal/modal_form.js | 144 +++++++++++++ src-docs/src/views/modal/modal_width.js | 68 ++++++ src-docs/src/views/modal/overflow_test.js | 86 -------- src-docs/src/views/toast/guidelines.js | 2 +- .../views/window_event/basic_window_event.js | 4 +- .../window_event/window_event_conflict.js | 4 +- src/components/modal/_modal.scss | 11 +- src/components/modal/modal.tsx | 5 +- 15 files changed, 498 insertions(+), 330 deletions(-) create mode 100644 src-docs/src/views/modal/confirm_modal_loading.js create mode 100644 src-docs/src/views/modal/modal_form.js create mode 100644 src-docs/src/views/modal/modal_width.js delete mode 100644 src-docs/src/views/modal/overflow_test.js diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js index 0b706dbd8f8..e999be869c8 100644 --- a/src-docs/src/views/color_picker/containers.js +++ b/src-docs/src/views/color_picker/containers.js @@ -64,7 +64,9 @@ export default () => { modal = ( - Color picker in a modal + +

Color picker in a modal

+ diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js index 576229fa02f..25d658d0c31 100644 --- a/src-docs/src/views/combo_box/containers.js +++ b/src-docs/src/views/combo_box/containers.js @@ -123,7 +123,9 @@ export default () => { modal = ( - Combo box in a modal + +

Combo box in a modal

+ {comboBox} diff --git a/src-docs/src/views/modal/confirm_modal.js b/src-docs/src/views/modal/confirm_modal.js index 3260b7f2558..867e8b7f17c 100644 --- a/src-docs/src/views/modal/confirm_modal.js +++ b/src-docs/src/views/modal/confirm_modal.js @@ -10,15 +10,6 @@ import { export default () => { const [isModalVisible, setIsModalVisible] = useState(false); const [isDestroyModalVisible, setIsDestroyModalVisible] = useState(false); - const [isEmptyModalVisible, setIsEmptyModalVisible] = useState(false); - const [ - isButtonDisabledModalVisible, - setIsButtonDisabledModalVisible, - ] = useState(false); - const [ - isConfirmlLoadingModalVisible, - setIsConfirmlLoadingModalVisible, - ] = useState(false); const closeModal = () => setIsModalVisible(false); const showModal = () => setIsModalVisible(true); @@ -26,16 +17,6 @@ export default () => { const closeDestroyModal = () => setIsDestroyModalVisible(false); const showDestroyModal = () => setIsDestroyModalVisible(true); - const closeEmptyModal = () => setIsEmptyModalVisible(false); - const showEmptyModal = () => setIsEmptyModalVisible(true); - - const closeButtonDisabledModal = () => setIsButtonDisabledModalVisible(false); - const showButtonDisabledModal = () => setIsButtonDisabledModalVisible(true); - - const closeConfirmLoadingModal = () => - setIsConfirmlLoadingModalVisible(false); - const showConfirmLoadingModal = () => setIsConfirmlLoadingModalVisible(true); - let modal; if (isModalVisible) { @@ -71,53 +52,6 @@ export default () => { ); } - let emptyModal; - - if (isEmptyModalVisible) { - emptyModal = ( - - ); - } - - let buttonDisabledModal; - - if (isButtonDisabledModalVisible) { - buttonDisabledModal = ( - - ); - } - - let confirmLoadingModal; - - if (isConfirmlLoadingModalVisible) { - confirmLoadingModal = ( - - ); - } - return (
@@ -129,27 +63,9 @@ export default () => { Show dangerous confirm modal - - - Show title-only confirm modal - - - - - Show confirm disabled confirm modal - - - - - Show confirm loading confirm modal - - {modal} {destroyModal} - {emptyModal} - {buttonDisabledModal} - {confirmLoadingModal}
); }; diff --git a/src-docs/src/views/modal/confirm_modal_loading.js b/src-docs/src/views/modal/confirm_modal_loading.js new file mode 100644 index 00000000000..e054eff2bd4 --- /dev/null +++ b/src-docs/src/views/modal/confirm_modal_loading.js @@ -0,0 +1,69 @@ +import React, { useState } from 'react'; + +import { + EuiButton, + EuiConfirmModal, + EuiFormRow, + EuiFieldText, +} from '../../../../src/components'; + +export default () => { + const [isLoading, setIsLoading] = useState(false); + clearTimeout(searchTimeout); + const searchTimeout = setTimeout(() => { + // Simulate a remotely-executed search. + setIsLoading(false); + }, 1200); + + const [isModalVisible, setIsModalVisible] = useState(false); + const showModal = () => { + setIsModalVisible(true); + setIsLoading(true); + }; + const closeModal = () => { + setIsModalVisible(false); + setIsLoading(false); + clearTimeout(searchTimeout); + }; + + const [value, setValue] = useState(''); + const onChange = (e) => { + setValue(e.target.value); + }; + + let modal; + + if (isModalVisible) { + modal = ( + { + closeModal(); + window.alert('Shame on you!'); + }} + confirmButtonText="Delete" + cancelButtonText="Cancel" + buttonColor="danger" + initialFocus="[name=delete]" + confirmButtonDisabled={value.toLowerCase() !== 'delete'} + isLoading={isLoading}> + + + + + ); + } + + return ( +
+ Show loading confirm modal + {modal} +
+ ); +}; diff --git a/src-docs/src/views/modal/guidelines.js b/src-docs/src/views/modal/guidelines.js index 65e599f06ed..51f22f319ee 100644 --- a/src-docs/src/views/modal/guidelines.js +++ b/src-docs/src/views/modal/guidelines.js @@ -25,11 +25,7 @@ import { export default () => ( <> -

- A modal says “pay attention to me and nothing else.” A modal works best - for focusing users' attention on a short amount of - content and getting them to make a decision. -

+

A modal says “pay attention to me and nothing else.”

 diff --git a/src-docs/src/views/modal/modal.js b/src-docs/src/views/modal/modal.js index 337abb5505b..e5df3006f6a 100644 --- a/src-docs/src/views/modal/modal.js +++ b/src-docs/src/views/modal/modal.js @@ -1,146 +1,64 @@ -import React, { useState, Fragment } from 'react'; +import React, { useState } from 'react'; import { EuiButton, - EuiButtonEmpty, - EuiFieldText, - EuiForm, - EuiFormRow, EuiModal, EuiModalBody, EuiModalFooter, EuiModalHeader, EuiModalHeaderTitle, - EuiRange, - EuiSwitch, EuiCodeBlock, - EuiSpacer, - EuiSuperSelect, - EuiText, } from '../../../../src/components'; - -import { htmlIdGenerator } from '../../../../src/services'; +import { EuiSpacer } from '../../../../src/components/spacer'; export default () => { const [isModalVisible, setIsModalVisible] = useState(false); - const [isSwitchChecked, setIsSwitchChecked] = useState(true); - const [superSelectvalue, setSuperSelectValue] = useState('option_one'); - - const onSwitchChange = () => - setIsSwitchChecked((isSwitchChecked) => !isSwitchChecked); const closeModal = () => setIsModalVisible(false); - const showModal = () => setIsModalVisible(true); - const superSelectOptions = [ - { - value: 'option_one', - inputDisplay: 'Option one', - dropdownDisplay: ( - - Option one - -

- Has a short description giving more detail to the option. -

- - - ), - }, - { - value: 'option_two', - inputDisplay: 'Option two', - dropdownDisplay: ( - - Option two - -

- Has a short description giving more detail to the option. -

- - - ), - }, - { - value: 'option_three', - inputDisplay: 'Option three', - dropdownDisplay: ( - - Option three - -

- Has a short description giving more detail to the option. -

- - - ), - }, - ]; - - const formSample = ( - - - - - - - - - - - - - - - onSuperSelectChange(value)} - itemLayoutAlign="top" - hasDividers - /> - - - - - - {'

Title

'} - - - ); - - const onSuperSelectChange = (value) => { - setSuperSelectValue(value); - }; - let modal; if (isModalVisible) { modal = ( - + - Modal title + +

Modal title

+ - {formSample} + + This modal has the following setup: + + + {` + +

+ + + + + + + + + Close + + +`} + + - Cancel - - Save + Close ); } + return (
Show modal diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js index 96a2379469f..48779bfbcfd 100644 --- a/src-docs/src/views/modal/modal_example.js +++ b/src-docs/src/views/modal/modal_example.js @@ -1,29 +1,52 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiModal, EuiConfirmModal } from '../../../../src/components'; +import { + EuiCode, + EuiModal, + EuiModalHeader, + EuiModalHeaderTitle, + EuiModalBody, + EuiModalFooter, + EuiConfirmModal, + EuiText, +} from '../../../../src/components'; import Guidelines from './guidelines'; import Modal from './modal'; const modalSource = require('!!raw-loader!./modal'); -const modalHtml = renderToHtml(Modal); + +import ModalForm from './modal_form'; +const modalFormSource = require('!!raw-loader!./modal_form'); import ConfirmModal from './confirm_modal'; const confirmModalSource = require('!!raw-loader!./confirm_modal'); -const confirmModalHtml = renderToHtml(ConfirmModal); -import OverflowTest from './overflow_test'; -import { EuiText } from '../../../../src/components/text'; -const overflowTestSource = require('!!raw-loader!./overflow_test'); -const overflowTestHtml = renderToHtml(OverflowTest); +import ConfirmLoadingModal from './confirm_modal_loading'; +const confirmModalLoadingSource = require('!!raw-loader!./confirm_modal_loading'); + +import ModalWidth from './modal_width'; +const modalWidthSource = require('!!raw-loader!./modal_width'); const modalSnippet = ` - +

+ + + + + + + + Close + +`; + +const modalWidthSnippet = ` + +

@@ -31,7 +54,22 @@ const modalSnippet = ` - + Close + +`; + +const modalFormSnippet = ` + +

+ + + + + + + + Cancel + Save `; @@ -55,64 +93,116 @@ const confirmModalSnippet = [ `, ]; +const confirmModalLoadingSnippet = [ + ` + +`, +]; + export const ModalExample = { title: 'Modal', intro: (

- Use a modal to temporarily interrupt a user’s current task and block - interactions to the content below it. EuiModal comes - with a wrapping EuiOverlayMask to obscure the content - beneath. + A modal works best for focusing users' attention on a{' '} + short amount of content and getting them to make a + decision. Use it to temporarily interrupt a user’s current task and + block interactions to the content below it. +

+

+ If your modal content is more complex, or requires considerable time to + complete, consider using an{' '} + + EuiFlyout + {' '} + instead.

), sections: [ { - title: 'Form modal', source: [ { type: GuideSectionTypes.JS, code: modalSource, }, - { - type: GuideSectionTypes.HTML, - code: modalHtml, - }, ], text: ( <>

- Unlike flyouts, modals cannot be - dismissed by clicking on the overlay mask. This is inline with our{' '} + Each EuiModal requires a specific set of nested + child components. They can be omitted if necessary, but the order + cannot be changed or interrupted. +

+

+ Modals come a wrapping EuiOverlayMask to obscure + the content beneath, but unlike{' '} + flyouts, modals cannot be dismissed + by clicking on the overlay mask. This is inline with our{' '} modal usage guidelines{' '} which requires there to be a primary action button, even if that button simply closes the modal.

), - props: { EuiModal }, + props: { + EuiModal, + EuiModalHeader, + EuiModalHeaderTitle, + EuiModalBody, + EuiModalFooter, + }, snippet: modalSnippet, demo: , }, { - title: 'Confirm modal', + title: 'Forms in a modal', source: [ { type: GuideSectionTypes.JS, - code: confirmModalSource, + code: modalFormSource, }, + ], + text: ( + <> +

+ Since the child components of EuiModal are required + to be in a specific order, you can only wrap the contents within{' '} + EuiModalBody with the{' '} + {'

'} element. You can then hook up your + submit button inside EuiModalFooter by adding the{' '} + id of the {''} element + to the form prop of the button. +

+ + ), + props: { EuiModal }, + snippet: modalFormSnippet, + demo: , + }, + { + title: 'Confirm modal', + source: [ { - type: GuideSectionTypes.HTML, - code: confirmModalHtml, + type: GuideSectionTypes.JS, + code: confirmModalSource, }, ], text: (

Use the EuiConfirmModal to ask the user to confirm a - decision. The default type is a positive or neutral confirmation. To - change the main button color change the buttonColor{' '} - property to any of the button color options. + decision. It is a contextual wrapper around EuiModal{' '} + that provides some helpful props for filling in common modal pieces. + By default, the button color indicates a positive or neutral action. + Change the buttonColor property to{' '} + danger to indicate a destructive action.

), props: { EuiConfirmModal }, @@ -120,20 +210,53 @@ export const ModalExample = { demo: , }, { - title: 'Overflow test', + title: 'Loading and disabling confirm button', source: [ { type: GuideSectionTypes.JS, - code: overflowTestSource, + code: confirmModalLoadingSource, }, + ], + text: ( +

+ EuiConfirmModal supports being able to apply loading + and disabled states to the confirm button with the{' '} + confirmButtonDisabled and{' '} + isLoading props respectively. This is helpful to + indicate the fetching of data and/or to wait for a user's input + before enabling the confirm action. +

+ ), + props: { EuiConfirmModal }, + snippet: confirmModalLoadingSnippet, + demo: , + }, + { + title: 'Widths', + source: [ { - type: GuideSectionTypes.HTML, - code: overflowTestHtml, + type: GuideSectionTypes.JS, + code: modalWidthSource, }, ], - text:

This demo is to test long overflowing body content.

, - props: { EuiConfirmModal }, - demo: , + text: ( + <> +

+ Modals start with a minimum width of 400px, just + enough to display form rows. They will grow to fit the contents + until it reaches the specified maxWidth, the + default of which is set to the medium breakpoint. +

+

+ If the modal is not growing wide enough to fit your contents, you + can pass a specific style.width, just remember + that modals will always shrink to fit the window width. +

+ + ), + props: { EuiModal }, + snippet: modalWidthSnippet, + demo: , }, ], guidelines: , diff --git a/src-docs/src/views/modal/modal_form.js b/src-docs/src/views/modal/modal_form.js new file mode 100644 index 00000000000..76e8c74ed7c --- /dev/null +++ b/src-docs/src/views/modal/modal_form.js @@ -0,0 +1,144 @@ +import React, { useState, Fragment } from 'react'; + +import { + EuiButton, + EuiButtonEmpty, + EuiFieldText, + EuiForm, + EuiFormRow, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiRange, + EuiSwitch, + EuiSuperSelect, + EuiText, +} from '../../../../src/components'; + +import { htmlIdGenerator } from '../../../../src/services'; + +export default () => { + const [isModalVisible, setIsModalVisible] = useState(false); + const [isSwitchChecked, setIsSwitchChecked] = useState(true); + const [superSelectvalue, setSuperSelectValue] = useState('option_one'); + + const onSwitchChange = () => + setIsSwitchChecked((isSwitchChecked) => !isSwitchChecked); + + const closeModal = () => setIsModalVisible(false); + + const showModal = () => setIsModalVisible(true); + + const superSelectOptions = [ + { + value: 'option_one', + inputDisplay: 'Option one', + dropdownDisplay: ( + + Option one + +

+ Has a short description giving more detail to the option. +

+ + + ), + }, + { + value: 'option_two', + inputDisplay: 'Option two', + dropdownDisplay: ( + + Option two + +

+ Has a short description giving more detail to the option. +

+ + + ), + }, + { + value: 'option_three', + inputDisplay: 'Option three', + dropdownDisplay: ( + + Option three + +

+ Has a short description giving more detail to the option. +

+ + + ), + }, + ]; + + const formSample = ( + + + + + + + + + + + + + + + onSuperSelectChange(value)} + itemLayoutAlign="top" + hasDividers + /> + + + ); + + const onSuperSelectChange = (value) => { + setSuperSelectValue(value); + }; + + let modal; + + if (isModalVisible) { + modal = ( + + + +

Modal title

+ + + + {formSample} + + + Cancel + + + Save + + + + ); + } + return ( +
+ Show form modal + {modal} +
+ ); +}; diff --git a/src-docs/src/views/modal/modal_width.js b/src-docs/src/views/modal/modal_width.js new file mode 100644 index 00000000000..1a92c52c19c --- /dev/null +++ b/src-docs/src/views/modal/modal_width.js @@ -0,0 +1,68 @@ +import React, { useState } from 'react'; + +import { + EuiButton, + EuiModal, + EuiModalBody, + EuiModalFooter, + EuiModalHeader, + EuiModalHeaderTitle, + EuiCodeBlock, +} from '../../../../src/components'; +import { EuiSpacer } from '../../../../src/components/spacer'; + +export default () => { + const [isModalVisible, setIsModalVisible] = useState(false); + + const closeModal = () => setIsModalVisible(false); + const showModal = () => setIsModalVisible(true); + + let modal; + + if (isModalVisible) { + modal = ( + + + +

Modal title

+ + + + + This modal has the following setup: + + + {` + +

+ + + + + + + + + Close + + +`} + + + + + + Close + + + + ); + } + + return ( +
+ Show modal with custom width + {modal} +
+ ); +}; diff --git a/src-docs/src/views/modal/overflow_test.js b/src-docs/src/views/modal/overflow_test.js deleted file mode 100644 index 5a67fc5ddd0..00000000000 --- a/src-docs/src/views/modal/overflow_test.js +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useState } from 'react'; - -import { - EuiButton, - EuiModal, - EuiModalBody, - EuiModalFooter, - EuiModalHeader, - EuiModalHeaderTitle, - EuiText, -} from '../../../../src/components'; - -export default () => { - const [isModalVisible, setIsModalVisible] = useState(false); - - const closeModal = () => setIsModalVisible(false); - const showModal = () => setIsModalVisible(true); - - let modal; - - if (isModalVisible) { - modal = ( - - - Overflow test - - - - -

- KING. Whats he that wishes so? My cousin, Westmorland? No, my fair - cousin; If we are mark’d to die, we are enow To do our - country loss; and if to live, The fewer men, the greater share of - honour. God’s will! I pray thee, wish not one man more. By - Jove, I am not covetous for gold, Nor care I who doth feed upon my - cost; It yearns me not if men my garments wear; Such outward - things dwell not in my desires. But if it be a sin to covet - honour, I am the most offending soul alive. No, faith, my coz, - wish not a man from England. God’s peace! I would not lose - so great an honour As one man more methinks would share from me - For the best hope I have. O, do not wish one more! Rather proclaim - it, Westmorland, through my host, That he which hath no stomach to - this fight, Let him depart; his passport shall be made, And crowns - for convoy put into his purse; We would not die in that - man’s company That fears his fellowship to die with us. This - day is call’d the feast of Crispian. He that outlives this - day, and comes safe home, Will stand a tip-toe when this day is - nam’d, And rouse him at the name of Crispian. He that shall - live this day, and see old age, Will yearly on the vigil feast his - neighbours, And say “To-morrow is Saint Crispian.” - Then will he strip his sleeve and show his scars, And say - “These wounds I had on Crispin’s day.” Old men - forget; yet all shall be forgot, But he’ll remember, with - advantages, What feats he did that day. Then shall our names, - Familiar in his mouth as household words— Harry the King, Bedford - and Exeter, Warwick and Talbot, Salisbury and Gloucester— Be in - their flowing cups freshly rememb’red. This story shall the - good man teach his son; And Crispin Crispian shall ne’er go - by, From this day to the ending of the world, But we in it shall - be rememberèd— We few, we happy few, we band of brothers; For he - to-day that sheds his blood with me Shall be my brother; be he - ne’er so vile, This day shall gentle his condition; And - gentlemen in England now a-bed Shall think themselves - accurs’d they were not here, And hold their manhoods cheap - whiles any speaks That fought with us upon Saint Crispin’s - day. -

- - - - - - Close - - - - ); - } - return ( -
- Show modal - - {modal} -
- ); -}; diff --git a/src-docs/src/views/toast/guidelines.js b/src-docs/src/views/toast/guidelines.js index c744dd627a5..50944d3740b 100644 --- a/src-docs/src/views/toast/guidelines.js +++ b/src-docs/src/views/toast/guidelines.js @@ -36,7 +36,7 @@ export default () => { - Your visualization has an error +

Your visualization has an error

 diff --git a/src-docs/src/views/window_event/basic_window_event.js b/src-docs/src/views/window_event/basic_window_event.js index 0e16b2635c3..5441bb6b6de 100644 --- a/src-docs/src/views/window_event/basic_window_event.js +++ b/src-docs/src/views/window_event/basic_window_event.js @@ -12,7 +12,9 @@ import { ModalExample } from './modal_example_container'; const BasicModal = ({ onClose }) => ( - Example modal + +

Example modal

+

diff --git a/src-docs/src/views/window_event/window_event_conflict.js b/src-docs/src/views/window_event/window_event_conflict.js index 23b6bf787fd..bea68055c48 100644 --- a/src-docs/src/views/window_event/window_event_conflict.js +++ b/src-docs/src/views/window_event/window_event_conflict.js @@ -28,7 +28,9 @@ const ConflictModal = (props) => { return ( - Example modal + +

Example modal

+ { * set to a string for a custom width in custom measurement. */ maxWidth?: boolean | number | string; - /** specifies what element should initially have focus; Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. */ + /** + * Specifies what element should initially have focus. + * Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node. + */ initialFocus?: HTMLElement | (() => HTMLElement) | string; } From 493a2d416e4adeaf662b81141c2a2b549d1b3d84 Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 27 Mar 2021 23:36:04 -0400 Subject: [PATCH 3/8] Remove HTML stuff from page page --- src-docs/src/views/page/page_example.js | 55 ------------------------- 1 file changed, 55 deletions(-) diff --git a/src-docs/src/views/page/page_example.js b/src-docs/src/views/page/page_example.js index b00bad6e9f8..01a981a59aa 100644 --- a/src-docs/src/views/page/page_example.js +++ b/src-docs/src/views/page/page_example.js @@ -1,8 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; import { pageTemplateConfig } from './playground'; import { PageDemo } from './_page_demo'; @@ -26,61 +24,44 @@ import PageNew from './page_new'; const pageNewSource = require('!!raw-loader!./page_new'); import PageTemplate from './page_template'; const PageTemplateSource = require('!!raw-loader!./page_template'); -const PageTemplateHtml = renderToHtml(PageTemplate); import PageRestricingWidth from './page_restricting_width'; const PageRestricingWidthSource = require('!!raw-loader!./page_restricting_width'); import PageRestricingWidthTemplate from './page_restricting_width_template'; const PageRestricingWidthTemplateSource = require('!!raw-loader!./page_restricting_width_template'); -const PageRestricingWidthTemplateHtml = renderToHtml( - PageRestricingWidthTemplate -); import PageCenteredBody from './page_centered_body'; const PageCenteredBodySource = require('!!raw-loader!./page_centered_body'); import PageCenteredBodyTemplate from './page_centered_body_template'; const PageCenteredBodyTemplateSource = require('!!raw-loader!./page_centered_body_template'); -const PageCenteredBodyTemplateHtml = renderToHtml(PageCenteredBodyTemplate); import PageCenteredContent from './page_centered_content'; const PageCenteredContentSource = require('!!raw-loader!./page_centered_content'); import PageCenteredContentTemplate from './page_centered_content_template'; const PageCenteredContentTemplateSource = require('!!raw-loader!./page_centered_content_template'); -const PageCenteredContentTemplateHtml = renderToHtml( - PageCenteredContentTemplate -); import PageSimple from './page_simple'; const PageSimpleSource = require('!!raw-loader!./page_simple'); import PageSimpleTemplate from './page_simple_template'; const PageSimpleTemplateSource = require('!!raw-loader!./page_simple_template'); -const PageSimpleTemplateHtml = renderToHtml(PageSimpleTemplate); import PageSimpleCenteredBody from './page_simple_content_body'; const PageSimpleCenteredBodySource = require('!!raw-loader!./page_simple_content_body'); import PageSimpleCenteredBodyTemplate from './page_simple_content_body_template'; const PageSimpleCenteredBodyTemplateSource = require('!!raw-loader!./page_simple_content_body_template'); -const PageSimpleCenteredBodyTemplateHtml = renderToHtml( - PageSimpleCenteredBodyTemplate -); import PageSimpleEmptyContent from './page_simple_empty_content'; const PageSimpleEmptyContentSource = require('!!raw-loader!./page_simple_empty_content'); import PageSimpleEmptyContentTemplate from './page_simple_empty_content_template'; const PageSimpleEmptyContentTemplateSource = require('!!raw-loader!./page_simple_empty_content_template'); -const PageSimpleEmptyContentTemplateHtml = renderToHtml( - PageSimpleEmptyContentTemplate -); import PageCustomContent from './page_custom_content'; const PageCustomContentSource = require('!!raw-loader!./page_custom_content'); import PageCustomContentTemplate from './page_custom_content_template'; const PageCustomContentTemplateSource = require('!!raw-loader!./page_custom_content_template'); -const PageCustomContentTemplateHtml = renderToHtml(PageCustomContentTemplate); import PageLegacy from './page'; const PageLegacySource = require('!!raw-loader!./page'); -const PageLegacyHtml = renderToHtml(PageLegacy); export const PageExample = { title: 'Page', @@ -120,10 +101,6 @@ export const PageExample = { code: pageNewSource, displayName: 'Components JS', }, - { - type: GuideSectionTypes.HTML, - code: PageTemplateHtml, - }, ], text: (
@@ -219,10 +196,6 @@ export const PageExample = { code: PageRestricingWidthSource, displayName: 'Components JS', }, - { - type: GuideSectionTypes.HTML, - code: PageRestricingWidthTemplateHtml, - }, ], text: ( <> @@ -280,10 +253,6 @@ export const PageExample = { code: PageCenteredBodySource, displayName: 'Components JS', }, - { - type: GuideSectionTypes.HTML, - code: PageCenteredBodyTemplateHtml, - }, ], text: ( <> @@ -341,10 +310,6 @@ export const PageExample = { code: PageCenteredContentSource, displayName: 'Components JS', }, - { - type: GuideSectionTypes.HTML, - code: PageCenteredContentTemplateHtml, - }, ], text: ( <> @@ -398,10 +363,6 @@ export const PageExample = { code: PageSimpleSource, displayName: 'Components JS', }, - { - type: GuideSectionTypes.HTML, - code: PageSimpleTemplateHtml, - }, ], text: ( <> @@ -448,10 +409,6 @@ export const PageExample = { code: PageSimpleCenteredBodySource, displayName: 'Components JS', }, - { - type: GuideSectionTypes.HTML, - code: PageSimpleCenteredBodyTemplateHtml, - }, ], text: (

@@ -495,10 +452,6 @@ export const PageExample = { code: PageSimpleEmptyContentSource, displayName: 'Components JS', }, - { - type: GuideSectionTypes.HTML, - code: PageSimpleEmptyContentTemplateHtml, - }, ], text: (

@@ -539,10 +492,6 @@ export const PageExample = { code: PageCustomContentSource, displayName: 'Components JS', }, - { - type: GuideSectionTypes.HTML, - code: PageCustomContentTemplateHtml, - }, ], text: ( <> @@ -582,10 +531,6 @@ export const PageExample = { type: GuideSectionTypes.JS, code: PageLegacySource, }, - { - type: GuideSectionTypes.HTML, - code: PageLegacyHtml, - }, ], text: (

From 552d0352bcc545aa901e29bfe36426b7738226d0 Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 27 Mar 2021 23:38:26 -0400 Subject: [PATCH 4/8] Cleanup page header --- .../views/page_header/page_header_example.js | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/src-docs/src/views/page_header/page_header_example.js b/src-docs/src/views/page_header/page_header_example.js index 08ac4e858b9..bef2283a572 100644 --- a/src-docs/src/views/page_header/page_header_example.js +++ b/src-docs/src/views/page_header/page_header_example.js @@ -1,8 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; import { @@ -15,20 +13,16 @@ import { pageHeaderConfig } from './playground'; import PageHeader from './page_header'; const pageHeaderSource = require('!!raw-loader!./page_header'); -const pageHeaderHtml = renderToHtml(PageHeader); import PageHeaderTabs from './page_header_tabs'; const pageHeaderTabsSource = require('!!raw-loader!./page_header_tabs'); -const pageHeaderTabsHtml = renderToHtml(PageHeaderTabs); import PageHeaderCustom from './page_header_custom'; import { EuiText } from '../../../../src/components/text'; const pageHeaderCustomSource = require('!!raw-loader!./page_header_custom'); -const pageHeaderCustomHtml = renderToHtml(PageHeaderCustom); export const PageHeaderExample = { title: 'Page header', - playground: [pageHeaderConfig], intro: (

@@ -49,11 +43,8 @@ export const PageHeaderExample = { type: GuideSectionTypes.JS, code: pageHeaderSource, }, - { - type: GuideSectionTypes.HTML, - code: pageHeaderHtml, - }, ], + playground: pageHeaderConfig, text: ( <>

@@ -103,10 +94,6 @@ rightSideItems={[ type: GuideSectionTypes.JS, code: pageHeaderTabsSource, }, - { - type: GuideSectionTypes.HTML, - code: pageHeaderTabsHtml, - }, ], text: ( <> @@ -136,10 +123,6 @@ description="Example of a description." type: GuideSectionTypes.JS, code: pageHeaderCustomSource, }, - { - type: GuideSectionTypes.HTML, - code: pageHeaderCustomHtml, - }, ], text: ( <> From dad985af326dc6ec2a78768c251e782e2a7a271d Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 27 Mar 2021 23:59:37 -0400 Subject: [PATCH 5/8] Spacer page --- src-docs/src/components/guide_components.scss | 6 +++ .../views/horizontal_rule/horizontal_rule.js | 4 +- .../horizontal_rule_example.js | 12 +++++- .../horizontal_rule/horizontal_rule_margin.js | 4 +- src-docs/src/views/spacer/spacer.js | 42 +++++++++++++++++++ src-docs/src/views/spacer/spacer.tsx | 39 ----------------- src-docs/src/views/spacer/spacer_example.js | 23 +++------- 7 files changed, 68 insertions(+), 62 deletions(-) create mode 100644 src-docs/src/views/spacer/spacer.js delete mode 100644 src-docs/src/views/spacer/spacer.tsx diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss index 07e99fabdd3..2765f6b063e 100644 --- a/src-docs/src/components/guide_components.scss +++ b/src-docs/src/components/guide_components.scss @@ -102,6 +102,12 @@ $guideZLevelHighest: $euiZLevel9 + 1000; margin-bottom: $euiSize; } +.guideDemo__highlightSpacer .euiCodeBlock { + align-self: flex-start; + margin-bottom: $euiSize; +} + + .guideDemo__highlightGrid .euiFlexItem, .guideDemo__highlightGridWrap .euiFlexItem div { padding: $euiSize; diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule.js b/src-docs/src/views/horizontal_rule/horizontal_rule.js index 86376325a79..df1fbc5e84f 100644 --- a/src-docs/src/views/horizontal_rule/horizontal_rule.js +++ b/src-docs/src/views/horizontal_rule/horizontal_rule.js @@ -3,12 +3,12 @@ import React from 'react'; import { EuiHorizontalRule, EuiCode } from '../../../../src/components'; export default () => ( -

+ <> quarter half full (default) -
+ ); diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js index 7ea0a6cdefd..cb2b62fd332 100644 --- a/src-docs/src/views/horizontal_rule/horizontal_rule_example.js +++ b/src-docs/src/views/horizontal_rule/horizontal_rule_example.js @@ -34,7 +34,11 @@ export const HorizontalRuleExample = { ), props: { EuiHorizontalRule }, snippet: horizontalRuleSnippet, - demo: , + demo: ( +
+ +
+ ), playground: horizontalRuleConfig, }, { @@ -54,7 +58,11 @@ export const HorizontalRuleExample = {

), snippet: horizontalRuleMarginSnippet, - demo: , + demo: ( +
+ +
+ ), }, ], }; diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js index 6a26805cc4a..fe5276aa4d1 100644 --- a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js +++ b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js @@ -3,7 +3,7 @@ import React from 'react'; import { EuiHorizontalRule, EuiCode } from '../../../../src/components'; export default () => ( -
+ <> none
@@ -32,5 +32,5 @@ export default () => (
-
+ ); diff --git a/src-docs/src/views/spacer/spacer.js b/src-docs/src/views/spacer/spacer.js new file mode 100644 index 00000000000..98c66e18951 --- /dev/null +++ b/src-docs/src/views/spacer/spacer.js @@ -0,0 +1,42 @@ +import React from 'react'; + +import { + EuiSpacer, + EuiCode, + EuiFlexGroup, + EuiFlexItem, +} from '../../../../src/components'; + +export default () => ( + + + xs + + + + + s + + + + + m + + + + + l (default) + + + + + xl + + + + + xxl + + + +); diff --git a/src-docs/src/views/spacer/spacer.tsx b/src-docs/src/views/spacer/spacer.tsx deleted file mode 100644 index caa2ed19de9..00000000000 --- a/src-docs/src/views/spacer/spacer.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; - -import { EuiSpacer } from '../../../../src/components/spacer'; - -export default () => ( -
-

xs: 4px

- - -
-
- -

s: 8px

- - -
-
- -

m: 16px

- - -
-
- -

l: 24px (this is the default)

- - -
-
- -

xl: 32px

- - -
-
-

xxl: 40px

- -
-); diff --git a/src-docs/src/views/spacer/spacer_example.js b/src-docs/src/views/spacer/spacer_example.js index 22d225209e9..294afd3e2fc 100644 --- a/src-docs/src/views/spacer/spacer_example.js +++ b/src-docs/src/views/spacer/spacer_example.js @@ -1,7 +1,4 @@ import React from 'react'; -import { Link } from 'react-router-dom'; - -import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; @@ -11,7 +8,6 @@ import { spacerConfig } from './playground'; import Spacer from './spacer'; const spacerSource = require('!!raw-loader!./spacer'); -const spacerHtml = renderToHtml(Spacer); const spacerSnippet = ''; @@ -24,21 +20,14 @@ export const SpacerExample = { type: GuideSectionTypes.JS, code: spacerSource, }, - { - type: GuideSectionTypes.HTML, - code: spacerHtml, - }, ], text: (

- The EuiSpacer component is a fancy break tag. Use it - to add vertical space between items. Please do not stack them. If - passed without a size prop, it will default to the - large size, which matches the margins of{' '} - - EuiFlexGroup - {' '} - elements. + The EuiSpacer component is for adding vertical space + between items and should be used in place of the{' '} + {'
'} tag. There are many different heights + you can specify via the size prop which align to + the EUI vertical grid sizing.

), props: { EuiSpacer }, @@ -48,7 +37,7 @@ export const SpacerExample = {
), + playground: spacerConfig, }, ], - playground: spacerConfig, }; From f8b6aa166eac1ac43d4f7c670b53517ede7575fa Mon Sep 17 00:00:00 2001 From: cchaos Date: Sun, 28 Mar 2021 15:54:12 -0400 Subject: [PATCH 6/8] Cleanup header page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (didn’t adjust all the examples, but probably will when I tackle the EuiAppLayout component) --- src-docs/src/views/header/header_example.js | 179 ++++++++++-------- src-docs/src/views/header/header_sections.js | 2 +- src/components/header/_mixins.scss | 4 - .../_header_section_item_button.scss | 8 - 4 files changed, 96 insertions(+), 97 deletions(-) diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js index 9febb37d1c5..f7bd1f3dc6d 100644 --- a/src-docs/src/views/header/header_example.js +++ b/src-docs/src/views/header/header_example.js @@ -1,8 +1,6 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss'; @@ -23,39 +21,30 @@ import { EuiHeaderSectionsProp } from './props'; import Header from './header'; const headerSource = require('!!raw-loader!./header'); -const headerHtml = renderToHtml(Header); import HeaderSections from './header_sections'; const headerSectionsSource = require('!!raw-loader!./header_sections'); -const headerSectionsHtml = renderToHtml(HeaderSections); import HeaderPosition from './header_position'; const headerPositionSource = require('!!raw-loader!./header_position'); -const headerPositionHtml = renderToHtml(HeaderPosition); import HeaderAlert from './header_alert'; const headerAlertSource = require('!!raw-loader!./header_alert'); -const headerAlertHtml = renderToHtml(HeaderAlert); import HeaderAnimate from './header_animate'; const headerAnimateSource = require('!!raw-loader!./header_animate'); -const headerAnimateHtml = renderToHtml(HeaderAnimate); import HeaderLinks from './header_links'; const headerLinksSource = require('!!raw-loader!./header_links'); -const headerLinksHtml = renderToHtml(HeaderLinks); import HeaderDark from './header_dark'; const headerDarkSource = require('!!raw-loader!./header_dark'); -const headerDarkHtml = renderToHtml(HeaderDark); import HeaderStacked from './header_stacked'; const headerStackedSource = require('!!raw-loader!./header_stacked'); -const headerStackedHtml = renderToHtml(HeaderStacked); import HeaderElasticPattern from './header_elastic_pattern'; const headerElasticPatternSource = require('!!raw-loader!./header_elastic_pattern'); -const headerElasticPatternHtml = renderToHtml(HeaderElasticPattern); const headerSnippet = ` @@ -167,23 +156,54 @@ export const HeaderExample = { type: GuideSectionTypes.JS, code: headerSource, }, - { - type: GuideSectionTypes.HTML, - code: headerHtml, - }, ], text: ( -

- The header is made up of many individual components. -

+ <> +

+ The header is made up of many individual components + starting with EuiHeader as the container. You can + manually configure your header with the following related + components: +

+
    +
  • + EuiHeaderSection: Left/right containers with flex + properties. +
    • +
  • + EuiHeaderSectionItem: Containers for individual + header items as flex items. +
    • +
  • + EuiHeaderSectionItemButton: Specialized button + that extends{' '} + + EuiButtonEmpty + {' '} + but styled to fit the height of the header with additional{' '} + notification props. +
    • +
  • + EuiHeaderLogo: A helpful component for creating a + linked logo that fits within the header sizing. +
    • +
  • + EuiHeaderBreadcrumbs: A set of{' '} + + EuiBreadcrumbs + {' '} + specifically stylized to fit inside the header. +
    • +
+ ), props: { EuiHeader, - EuiHeaderBreadcrumbs, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, EuiHeaderLogo, + EuiHeaderBreadcrumbs, EuiHeaderSectionsProp, }, snippet: headerSnippet, @@ -199,16 +219,12 @@ export const HeaderExample = { type: GuideSectionTypes.JS, code: headerSectionsSource, }, - { - type: GuideSectionTypes.HTML, - code: headerSectionsHtml, - }, ], text: ( <>

- Alternatively, you can pass an array objects to the{' '} - sections props that takes a key of{' '} + Alternatively, you can pass an array of objects to the{' '} + sections prop that takes a key of{' '} items (array of children to wrap in an{' '} EuiHeaderSectionItem) and/or{' '} breadcrumbs (array of{' '} @@ -232,17 +248,53 @@ export const HeaderExample = { }, snippet: headerSectionsSnippet, demo: , + demoPanelProps: { + color: 'subdued', + }, }, { - title: 'Fixed header', + title: 'Header links', source: [ { type: GuideSectionTypes.JS, - code: headerPositionSource, + code: headerLinksSource, }, + ], + text: ( + <> +

+ In addition to the components mentioned prior, which lend themselves + to more application style navigation patterns,{' '} + EuiHeaderLinks and EuiHeaderLink{' '} + supply the ability to inline a list of navigational or menu style + links. +

+

+ EuiHeaderLinks comes with responsive functionality + built-in which will convert the inline list of links to a popover + list triggered by a EuiHeaderSectionItemButton. You + can adjust at which breakpoints to switch to the popover display by + passing your own array of named breakpoints to{' '} + popoverBreakpoints. +

+ + ), + props: { + EuiHeaderLinks, + EuiHeaderLink, + }, + snippet: headerLinksSnippet, + demo: , + demoPanelProps: { + color: 'subdued', + }, + }, + { + title: 'Fixed header', + source: [ { - type: GuideSectionTypes.HTML, - code: headerPositionHtml, + type: GuideSectionTypes.JS, + code: headerPositionSource, }, ], text: ( @@ -269,42 +321,9 @@ export const HeaderExample = { '@include euiHeaderAffordForFixed;', ], demo: , - }, - { - title: 'Header links', - source: [ - { - type: GuideSectionTypes.JS, - code: headerLinksSource, - }, - { - type: GuideSectionTypes.HTML, - code: headerLinksHtml, - }, - ], - text: ( - <> -

- EuiHeaderLinks and EuiHeaderLink{' '} - supply the ability to inline a list of navigational or menu style - links. -

-

- EuiHeaderLinks comes with responsive functionality - built-in which will convert the inline list of links to a popover - list triggered by a EuiHeaderSectionItemButton. You - can adjust at which breakpoints to switch to the popover display by - passing your own array of named breakpoints to{' '} - popoverBreakpoints. -

- - ), - props: { - EuiHeaderLinks, - EuiHeaderLink, + demoPanelProps: { + color: 'subdued', }, - snippet: headerLinksSnippet, - demo: , }, { title: 'Dark theme', @@ -313,10 +332,6 @@ export const HeaderExample = { type: GuideSectionTypes.JS, code: headerDarkSource, }, - { - type: GuideSectionTypes.HTML, - code: headerDarkHtml, - }, ], text: (

@@ -333,6 +348,9 @@ export const HeaderExample = { ), snippet: '', demo: , + demoPanelProps: { + color: 'subdued', + }, }, { title: 'Portal content in the header', @@ -341,10 +359,6 @@ export const HeaderExample = { type: GuideSectionTypes.JS, code: headerAlertSource, }, - { - type: GuideSectionTypes.HTML, - code: headerAlertHtml, - }, ], text: ( <> @@ -388,6 +402,9 @@ export const HeaderExample = { }, snippet: headerAlertSnippet, demo: , + demoPanelProps: { + color: 'subdued', + }, }, { title: 'Header notifications', @@ -396,10 +413,6 @@ export const HeaderExample = { type: GuideSectionTypes.JS, code: headerAnimateSource, }, - { - type: GuideSectionTypes.HTML, - code: headerAnimateHtml, - }, ], text: ( <> @@ -421,6 +434,9 @@ export const HeaderExample = { }, snippet: headerAnimateSnippet, demo: , + demoPanelProps: { + color: 'subdued', + }, }, { title: 'Stacked headers', @@ -429,10 +445,6 @@ export const HeaderExample = { type: GuideSectionTypes.JS, code: headerStackedSource, }, - { - type: GuideSectionTypes.HTML, - code: headerStackedHtml, - }, ], text: (

@@ -450,6 +462,9 @@ export const HeaderExample = { '@include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);', ], demo: , + demoPanelProps: { + color: 'subdued', + }, }, { title: 'The Elastic navigation pattern', @@ -458,10 +473,6 @@ export const HeaderExample = { type: GuideSectionTypes.JS, code: headerElasticPatternSource, }, - { - type: GuideSectionTypes.HTML, - code: headerElasticPatternHtml, - }, ], text: ( <> diff --git a/src-docs/src/views/header/header_sections.js b/src-docs/src/views/header/header_sections.js index 95bffbfde6d..857114523c6 100644 --- a/src-docs/src/views/header/header_sections.js +++ b/src-docs/src/views/header/header_sections.js @@ -56,7 +56,7 @@ export default () => { ); const renderUser = ( - + ); diff --git a/src/components/header/_mixins.scss b/src/components/header/_mixins.scss index 129edf89532..e2e0bb4fbb5 100644 --- a/src/components/header/_mixins.scss +++ b/src/components/header/_mixins.scss @@ -21,10 +21,6 @@ .euiHeaderLogo, .euiHeaderLink, .euiHeaderSectionItemButton { - &:hover { - background: transparentize(lightOrDarkTheme($euiColorDarkShade, $euiColorLightestShade), .5); - } - &:focus { background: shade($euiColorPrimary, 50%); } diff --git a/src/components/header/header_section/_header_section_item_button.scss b/src/components/header/header_section/_header_section_item_button.scss index d58693348f0..a88c7d09b4a 100644 --- a/src/components/header/header_section/_header_section_item_button.scss +++ b/src/components/header/header_section/_header_section_item_button.scss @@ -4,14 +4,6 @@ min-width: $euiHeaderChildSize; text-align: center; font-size: 0; // aligns icons better vertically - - &:hover { - background: $euiColorLightestShade; - } - - &:focus { - background: $euiFocusBackgroundColor; - } } .euiHeaderSectionItemButton__notification { From 77a9fc6cf63c638756eb42d2e896b480dcaba400 Mon Sep 17 00:00:00 2001 From: cchaos Date: Sun, 28 Mar 2021 17:08:09 -0400 Subject: [PATCH 7/8] cl --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f8c8b540589..efe890acbb5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,8 @@ **Bug fixes** - Fixed `id` attribute to be unique across `EuiButtonGroupButton` elements ([#4657](https://github.com/elastic/eui/pull/4657)) +- Fixed responsive sizing of `EuiModal` ([#4670](https://github.com/elastic/eui/pull/4670)) +- Fixed `disabled` interactions of `EuiHeaderSectionItemButton` ([#4670](https://github.com/elastic/eui/pull/4670)) ## [`31.12.0`](https://github.com/elastic/eui/tree/v31.12.0) From c6469a654ce8053de0900d739898c25fcace0e89 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 31 Mar 2021 13:27:44 -0400 Subject: [PATCH 8/8] Fixing some examples --- src-docs/src/views/header/header_animate.js | 2 +- src-docs/src/views/modal/confirm_modal.js | 2 +- .../views/page_header/page_header_example.js | 30 +++++++++---------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src-docs/src/views/header/header_animate.js b/src-docs/src/views/header/header_animate.js index fa1711461fb..c4fadf03062 100644 --- a/src-docs/src/views/header/header_animate.js +++ b/src-docs/src/views/header/header_animate.js @@ -88,7 +88,7 @@ export default () => { return ( <> - + Notify & animate diff --git a/src-docs/src/views/modal/confirm_modal.js b/src-docs/src/views/modal/confirm_modal.js index 867e8b7f17c..9d5a806f61b 100644 --- a/src-docs/src/views/modal/confirm_modal.js +++ b/src-docs/src/views/modal/confirm_modal.js @@ -54,7 +54,7 @@ export default () => { return (

- + Show confirm modal diff --git a/src-docs/src/views/page_header/page_header_example.js b/src-docs/src/views/page_header/page_header_example.js index bef2283a572..df27da36805 100644 --- a/src-docs/src/views/page_header/page_header_example.js +++ b/src-docs/src/views/page_header/page_header_example.js @@ -75,16 +75,16 @@ export const PageHeaderExample = { demo: , props: { EuiPageHeader }, snippet: `Button 1, - Button 2 -]} + pageTitle="Page title" + tabs={[ + { label:"Tab 1", isSelected: true }, + { label:"Tab 2" } + ]} + description="Example of a description." + rightSideItems={[ + Button 1, + Button 2 + ]} />`, }, { @@ -109,11 +109,11 @@ rightSideItems={[ demo: , props: { EuiPageHeader }, snippet: ``, }, {