From dc1d75c8953c4046621215d49e20a1cd689e51e8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 5 Apr 2021 12:40:23 -0400 Subject: [PATCH 01/18] Fixing up Breadcrumbs page --- .../views/breadcrumbs/breadcrumbs_example.js | 82 ++++++++++++------- src-docs/src/views/breadcrumbs/playground.js | 76 +++++++++++++++++ src-docs/src/views/breadcrumbs/responsive.js | 40 ++------- .../views/breadcrumbs/responsive_custom.js | 53 ++++++++++++ src-docs/src/views/breadcrumbs/truncate.js | 32 ++------ .../src/views/breadcrumbs/truncate_single.js | 50 +++++++++++ src/components/breadcrumbs/breadcrumbs.tsx | 4 +- 7 files changed, 246 insertions(+), 91 deletions(-) create mode 100644 src-docs/src/views/breadcrumbs/playground.js create mode 100644 src-docs/src/views/breadcrumbs/responsive_custom.js create mode 100644 src-docs/src/views/breadcrumbs/truncate_single.js diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js index 05dbd441c02..fe3d17070b9 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js @@ -1,28 +1,28 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; import { EuiCode, EuiBreadcrumbs } from '../../../../src/components'; import { BreadcrumbResponsiveMaxCount, BreadcrumbProps } from './props'; +import { breadcrumbsConfig } from './playground'; + import Breadcrumbs from './breadcrumbs'; const breadcrumbsSource = require('!!raw-loader!./breadcrumbs'); -const breadcrumbsHtml = renderToHtml(Breadcrumbs); import Responsive from './responsive'; const responsiveSource = require('!!raw-loader!./responsive'); -const responsiveHtml = renderToHtml(Responsive); +import ResponsiveCustom from './responsive_custom'; +const responsiveCustomSource = require('!!raw-loader!./responsive_custom'); import Truncate from './truncate'; const truncateSource = require('!!raw-loader!./truncate'); -const truncateHtml = renderToHtml(Truncate); +import TruncateSingle from './truncate_single'; +const truncateSingleSource = require('!!raw-loader!./truncate_single'); import Max from './max'; const maxSource = require('!!raw-loader!./max'); -const maxHtml = renderToHtml(Max); const breadcrumpProps = { EuiBreadcrumbs, @@ -39,10 +39,6 @@ export const BreadcrumbsExample = { type: GuideSectionTypes.JS, code: breadcrumbsSource, }, - { - type: GuideSectionTypes.HTML, - code: breadcrumbsHtml, - }, ], text: (

@@ -63,6 +59,7 @@ export const BreadcrumbsExample = {

), props: breadcrumpProps, + playground: breadcrumbsConfig, snippet: ` @@ -116,10 +109,6 @@ export const BreadcrumbsExample = { type: GuideSectionTypes.JS, code: truncateSource, }, - { - type: GuideSectionTypes.HTML, - code: truncateHtml, - }, ], text: ( <> @@ -127,9 +116,7 @@ export const BreadcrumbsExample = { EuiBreadcrumbs will truncate the full set by default, forcing it to a single line and setting a max width on all items except for the last. You can turn this off by setting{' '} - {'truncate={false}'}. You can also - force truncation on single breadcrumb item by - adding {'truncate: true'}. + {'truncate={false}'}.

), @@ -141,6 +128,28 @@ export const BreadcrumbsExample = { breadcrumbs={breadcrumbs} aria-label="" />`, + ], + }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: truncateSingleSource, + }, + ], + text: ( + <> +

Single item only

+

+ You can also force truncation on single breadcrumb{' '} + item by adding{' '} + {'truncate: true'}. +

+ + ), + props: breadcrumpProps, + demo: , + snippet: [ ` @@ -173,10 +178,6 @@ export const BreadcrumbsExample = { {'responsive={false}'} will keep all breadcrumbs visible at all screens sizes.

-

- Alternatively, you can change number of breadcrumbs that show per - breakpoint by passing a custom responsive object. -

), props: breadcrumpProps, @@ -187,6 +188,27 @@ export const BreadcrumbsExample = { breadcrumbs={breadcrumbs} aria-label="" />`, + ], + demo: , + }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: responsiveCustomSource, + }, + ], + text: ( + <> +

Customizing number of items to display

+

+ Alternatively, you can change number of breadcrumbs that show per + breakpoint by passing a custom responsive object. +

+ + ), + props: breadcrumpProps, + snippet: [ ``, ], - demo: , + demo: , }, ], }; diff --git a/src-docs/src/views/breadcrumbs/playground.js b/src-docs/src/views/breadcrumbs/playground.js new file mode 100644 index 00000000000..839ed5805df --- /dev/null +++ b/src-docs/src/views/breadcrumbs/playground.js @@ -0,0 +1,76 @@ +import { + EuiBreadcrumbs, + EuiBreadcrumb, +} from '../../../../src/components/breadcrumbs'; +import { + propUtilityForPlayground, + generateCustomProps, +} from '../../services/playground'; + +export const breadcrumbsConfig = () => { + const docgenInfo = Array.isArray(EuiBreadcrumbs.__docgenInfo) + ? EuiBreadcrumbs.__docgenInfo[0] + : EuiBreadcrumbs.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + const breadcrumbs = `[ + { + text: 'Animals', + href: '#', + }, + { + text: 'Metazoans', + href: '#', + }, + { + text: 'Chordates', + href: '#', + }, + { + text: 'Vertebrates', + href: '#', + }, + { + text: 'Tetrapods', + href: '#', + }, + { + text: 'Reptiles', + href: '#', + }, + { + text: 'Boa constrictor', + href: '#', + }, + { + text: 'Nebulosa subspecies', + }, +]`; + + propsToUse.breadcrumbs = { + ...propsToUse.breadcrumbs, + value: breadcrumbs, + }; + + propsToUse.max = { + ...propsToUse.max, + value: 5, + }; + + return { + config: { + componentName: 'EuiBreadcrumbs', + props: propsToUse, + scope: { + EuiBreadcrumbs, + EuiBreadcrumb, + }, + imports: { + '@elastic/eui': { + named: ['EuiBreadcrumbs', 'EuiBreadcrumb'], + }, + }, + customProps: generateCustomProps(['breadcrumbs']), + }, + }; +}; diff --git a/src-docs/src/views/breadcrumbs/responsive.js b/src-docs/src/views/breadcrumbs/responsive.js index 3f9c0e1d6a4..7621c4f7814 100644 --- a/src-docs/src/views/breadcrumbs/responsive.js +++ b/src-docs/src/views/breadcrumbs/responsive.js @@ -1,10 +1,6 @@ import React from 'react'; -import { - EuiBreadcrumbs, - EuiTitle, - EuiSpacer, -} from '../../../../src/components'; +import { EuiBreadcrumbs } from '../../../../src/components'; export default () => { const breadcrumbs = [ @@ -42,33 +38,11 @@ export default () => { ]; return ( - <> - - Turning responsive completely off - - - - - - Customizing number of items to display - - - - + ); }; diff --git a/src-docs/src/views/breadcrumbs/responsive_custom.js b/src-docs/src/views/breadcrumbs/responsive_custom.js new file mode 100644 index 00000000000..5e206a7f7c1 --- /dev/null +++ b/src-docs/src/views/breadcrumbs/responsive_custom.js @@ -0,0 +1,53 @@ +import React from 'react'; + +import { EuiBreadcrumbs } from '../../../../src/components'; + +export default () => { + const breadcrumbs = [ + { + text: 'Animals', + href: '#', + }, + { + text: 'Metazoans', + href: '#', + }, + { + text: 'Chordates', + href: '#', + }, + { + text: 'Vertebrates', + href: '#', + }, + { + text: 'Tetrapods', + href: '#', + }, + { + text: 'Reptiles', + href: '#', + }, + { + text: 'Boa constrictor', + href: '#', + }, + { + text: 'Nebulosa subspecies', + }, + ]; + + return ( + + ); +}; diff --git a/src-docs/src/views/breadcrumbs/truncate.js b/src-docs/src/views/breadcrumbs/truncate.js index bfe9ca4de75..5bc8b31e1ef 100644 --- a/src-docs/src/views/breadcrumbs/truncate.js +++ b/src-docs/src/views/breadcrumbs/truncate.js @@ -1,10 +1,6 @@ import React from 'react'; -import { - EuiBreadcrumbs, - EuiSpacer, - EuiTitle, -} from '../../../../src/components'; +import { EuiBreadcrumbs } from '../../../../src/components'; export default () => { const breadcrumbs = [ @@ -45,26 +41,10 @@ export default () => { ]; return ( -
- - Truncation on the entire set - - - - - - Truncation on a single item - - - -
+ ); }; diff --git a/src-docs/src/views/breadcrumbs/truncate_single.js b/src-docs/src/views/breadcrumbs/truncate_single.js new file mode 100644 index 00000000000..5aa30b1804b --- /dev/null +++ b/src-docs/src/views/breadcrumbs/truncate_single.js @@ -0,0 +1,50 @@ +import React from 'react'; + +import { EuiBreadcrumbs } from '../../../../src/components'; + +export default () => { + const breadcrumbs = [ + { + text: 'Animals', + href: '#', + }, + { + text: + 'Metazoans is a real mouthful, especially for creatures without mouths', + href: '#', + truncate: true, + }, + { + text: 'Chordates', + href: '#', + }, + { + text: 'Vertebrates', + href: '#', + }, + { + text: 'Tetrapods', + href: '#', + }, + { + text: 'Reptiles', + href: '#', + }, + { + text: 'Boa constrictor', + href: '#', + }, + { + text: + 'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths', + }, + ]; + + return ( + + ); +}; diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index ddddbce606e..2ce18ba3460 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -56,7 +56,6 @@ export type EuiBreadcrumbsProps = CommonProps & { /** * Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller. * Pass a custom #EuiBreadcrumbResponsiveMaxCount object to change the number of breadcrumbs to show at the particular breakpoints. - * Omitting or passing a `0` value will show all breadcrumbs. * * Pass `false` to turn this behavior off. * @@ -73,7 +72,8 @@ export type EuiBreadcrumbsProps = CommonProps & { /** * Collapses the inner items past the maximum set here - * into a single ellipses item + * into a single ellipses item. + * Omitting or passing a `0` value will show all breadcrumbs. */ max?: number | null; From db1ef8d21d415a4b3e3399da28dd9cceb0d6e731 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Aug 2021 17:25:46 -0400 Subject: [PATCH 02/18] Cleanup of breadcrumbs --- src-docs/src/views/breadcrumbs/breadcrumbs.js | 20 ++--- .../views/breadcrumbs/breadcrumbs_example.js | 74 ++++++++++++------- 2 files changed, 53 insertions(+), 41 deletions(-) diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs.js b/src-docs/src/views/breadcrumbs/breadcrumbs.js index 118c0ae4f2d..c54e9ef9d2a 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs.js @@ -4,9 +4,7 @@ import { EuiBreadcrumbs, EuiButton, EuiPageContent, - EuiPageContentHeader, - EuiPageContentHeaderSection, - EuiTitle, + EuiPageHeader, EuiSpacer, } from '../../../../src/components'; @@ -15,6 +13,7 @@ export default () => { { text: 'Animals', href: '#', + color: 'primary', onClick: (e) => { e.preventDefault(); }, @@ -47,17 +46,10 @@ export default () => { aria-label="An example of EuiBreadcrumbs" /> - - - -

Boa constrictor

- - - - - Cancel - - + Cancel]} + /> ); }; diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js index fe3d17070b9..7d834ab6b09 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiBreadcrumbs } from '../../../../src/components'; +import { EuiCode, EuiBreadcrumbs, EuiText } from '../../../../src/components'; import { BreadcrumbResponsiveMaxCount, BreadcrumbProps } from './props'; import { breadcrumbsConfig } from './playground'; @@ -22,6 +22,7 @@ import TruncateSingle from './truncate_single'; const truncateSingleSource = require('!!raw-loader!./truncate_single'); import Max from './max'; +import { EuiCallOut } from '../../../../src/components/call_out'; const maxSource = require('!!raw-loader!./max'); const breadcrumpProps = { @@ -32,6 +33,22 @@ const breadcrumpProps = { export const BreadcrumbsExample = { title: 'Breadcrumbs', + intro: ( + +

+ EuiBreadcrumbs let the user track their progress within + and back out of a UX flow and work well when used in combination with{' '} + + EuiPageHeader + + . They are meant to be used at lower page level flows, while{' '} + + EuiHeaderBreadcrumbs + {' '} + should be used for application-wide navigation. +

+ + ), sections: [ { source: [ @@ -41,22 +58,28 @@ export const BreadcrumbsExample = { }, ], text: ( -

- EuiBreadcrumbs let the user track their progress - within and back out of a UX flow. You can provide an{' '} - href prop on any breadcrumb item that you wish to - make clickable, including the last item, though we recommend the last - item represent the current page and therefore the link is unnecessary. - They work well within{' '} - - EuiPageContentHeader - {' '} - but be careful not to use them within an app that also uses{' '} - - EuiHeaderBreadcrumbs - - . -

+ <> +

+ EuiBreadcrumbs requires an array of{' '} + EuiBreadcrumb objects as{' '} + breadcrumbs and handles truncation, including + middle-truncation in the case of many items, and mobile + responsiveness. Each item accepts an href prop, + though we recommend the last item represent the current page and + therefore the link is unnecessary. +

+ + For accessibility, it is highly recommended to provide a + descriptive aria-label for each set of + breadcrumbs. + + } + /> + ), props: breadcrumpProps, playground: breadcrumbsConfig, @@ -70,11 +93,15 @@ export const BreadcrumbsExample = { text: 'Breadcrumb 2', href: '#', }, + { + text: 'Current', + href: '#', + }, ]} - aria-label="" /> `, demo: , + demoPanelProps: { color: 'subdued' }, }, { title: 'Limit the number of breadcrumbs', @@ -98,7 +125,6 @@ export const BreadcrumbsExample = { snippet: ``, demo: , }, @@ -126,7 +152,6 @@ export const BreadcrumbsExample = { ``, ], }, @@ -139,11 +164,10 @@ export const BreadcrumbsExample = { ], text: ( <> -

Single item only

- You can also force truncation on single breadcrumb{' '} + Alternatively, you can force truncation on single breadcrumb{' '} item by adding{' '} - {'truncate: true'}. + {'truncate: true'} to the object.

), @@ -158,7 +182,6 @@ export const BreadcrumbsExample = { truncate: true, } ]} - aria-label="" />`, ], }, @@ -186,7 +209,6 @@ export const BreadcrumbsExample = { responsive={false} max={null} breadcrumbs={breadcrumbs} - aria-label="" />`, ], demo: , @@ -200,7 +222,6 @@ export const BreadcrumbsExample = { ], text: ( <> -

Customizing number of items to display

Alternatively, you can change number of breadcrumbs that show per breakpoint by passing a custom responsive object. @@ -216,7 +237,6 @@ export const BreadcrumbsExample = { }} max={null} breadcrumbs={breadcrumbs} - aria-label="" />`, ], demo: , From 129a68dd083953ede4a8304b98c8490d66c8267c Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 13 Aug 2021 12:29:31 -0400 Subject: [PATCH 03/18] Updating guidance on overflow usage --- .../utility_classes_example.js | 7 ++-- .../utility_classes_overflow.js | 36 ++++++++++++++----- 2 files changed, 33 insertions(+), 10 deletions(-) diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js index bd8bdd5c3dd..dc360e5d937 100644 --- a/src-docs/src/views/utility_classes/utility_classes_example.js +++ b/src-docs/src/views/utility_classes/utility_classes_example.js @@ -54,11 +54,14 @@ export const UtilityClassesExample = { + title="Scrollable regions must be focusable, promoted to region and with the right aria-label">

To ensure keyboard-only users have access to the scrollable regions, the optimal solution is to apply{' '} - {'tabIndex="0"'} to the region.{' '} + {'tabIndex="0"'} to the region. Add{' '} + {'role="region"'} and supply an + accessible name by using{' '} + aria-label or another method. Learn more about the{' '} scrollable-region-focusable rule at Deque. diff --git a/src-docs/src/views/utility_classes/utility_classes_overflow.js b/src-docs/src/views/utility_classes/utility_classes_overflow.js index 94a529b09aa..ea573a8b34a 100644 --- a/src-docs/src/views/utility_classes/utility_classes_overflow.js +++ b/src-docs/src/views/utility_classes/utility_classes_overflow.js @@ -46,6 +46,8 @@ export default () => ( }}> @@ -73,8 +75,10 @@ export default () => ( snippet={` `} /> @@ -103,7 +107,11 @@ export default () => ( } example={ -

+

Orbiting this at a distance of roughly ninety-two million miles @@ -116,8 +124,10 @@ export default () => ( } snippet={` + tabIndex={0} + role="region" + aria-label="" + className="eui-xScrollWithShadows"> `} /> @@ -152,7 +162,12 @@ export default () => ( gutterSize="s" responsive={false}> - +

Orbiting this at a distance of roughly ninety-two million @@ -165,7 +180,12 @@ export default () => ( - +

Orbiting this at a distance of roughly ninety-two million @@ -185,11 +205,11 @@ export default () => ( className="eui-fullHeight" responsive={false}> + className="eui-yScroll" tabIndex="0" role="region" aria-label=""/> + className="eui-yScroll" tabIndex="0" role="region" aria-label=""/> `} From 109f68d846208cc8614d68eb8bca1b385396876f Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 13 Aug 2021 12:30:02 -0400 Subject: [PATCH 04/18] Fixed breadcrumb playground error --- src-docs/src/views/breadcrumbs/playground.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/breadcrumbs/playground.js b/src-docs/src/views/breadcrumbs/playground.js index 839ed5805df..3e39b5379fd 100644 --- a/src-docs/src/views/breadcrumbs/playground.js +++ b/src-docs/src/views/breadcrumbs/playground.js @@ -1,7 +1,4 @@ -import { - EuiBreadcrumbs, - EuiBreadcrumb, -} from '../../../../src/components/breadcrumbs'; +import { EuiBreadcrumbs } from '../../../../src/components/breadcrumbs'; import { propUtilityForPlayground, generateCustomProps, @@ -63,11 +60,10 @@ export const breadcrumbsConfig = () => { props: propsToUse, scope: { EuiBreadcrumbs, - EuiBreadcrumb, }, imports: { '@elastic/eui': { - named: ['EuiBreadcrumbs', 'EuiBreadcrumb'], + named: ['EuiBreadcrumbs'], }, }, customProps: generateCustomProps(['breadcrumbs']), From a52f7a1dfea03e6cbd7cc14ce96972452da02ec9 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 13 Aug 2021 12:31:11 -0400 Subject: [PATCH 05/18] Ams - Fixing border radius of EuiNotificationBadge --- src/themes/eui-amsterdam/overrides/_index.scss | 2 ++ src/themes/eui-amsterdam/overrides/_notification_badge.scss | 3 +++ 2 files changed, 5 insertions(+) create mode 100644 src/themes/eui-amsterdam/overrides/_notification_badge.scss diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/eui-amsterdam/overrides/_index.scss index a9ce099058e..a8721b94f11 100644 --- a/src/themes/eui-amsterdam/overrides/_index.scss +++ b/src/themes/eui-amsterdam/overrides/_index.scss @@ -9,6 +9,7 @@ @import 'color_stops'; @import 'comment'; @import 'date_picker'; +@import 'facet'; @import 'filter_group'; @import 'form_control_layout'; @import 'form_control_layout_delimited'; @@ -22,6 +23,7 @@ @import 'mark'; @import 'markdown_editor'; @import 'modal'; +@import 'notification_badge'; @import 'overlay_mask'; @import 'popover'; @import 'progress'; diff --git a/src/themes/eui-amsterdam/overrides/_notification_badge.scss b/src/themes/eui-amsterdam/overrides/_notification_badge.scss new file mode 100644 index 00000000000..1c9ec46c7e5 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_notification_badge.scss @@ -0,0 +1,3 @@ +.euiNotificationBadge { + border-radius: $euiBorderRadiusSmall; +} From 27c1cfdc2801f214c361c10ec69ed53934ba027e Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 13 Aug 2021 12:47:40 -0400 Subject: [PATCH 06/18] Fixing up Facets to behave like links do in Ams, and docs --- src-docs/src/views/facet/facet_example.js | 36 +++-- .../views/facet/facet_layout_horizontal.js | 150 ++++++++++++++++++ src/components/flyout/flyout.tsx | 23 ++- .../global_styling/mixins/_link.scss | 18 ++- .../eui-amsterdam/overrides/_facet.scss | 10 ++ 5 files changed, 211 insertions(+), 26 deletions(-) create mode 100644 src-docs/src/views/facet/facet_layout_horizontal.js create mode 100644 src/themes/eui-amsterdam/overrides/_facet.scss diff --git a/src-docs/src/views/facet/facet_example.js b/src-docs/src/views/facet/facet_example.js index b5e7c2d151c..f6399df258d 100644 --- a/src-docs/src/views/facet/facet_example.js +++ b/src-docs/src/views/facet/facet_example.js @@ -1,7 +1,5 @@ import React from 'react'; -import { renderToHtml } from '../../services'; - import { GuideSectionTypes } from '../../components'; import { @@ -14,7 +12,6 @@ import { facetButtonConfig, facetLayoutConfig } from './playground'; import Facet from './facet'; const facetSource = require('!!raw-loader!./facet'); -const facetHtml = renderToHtml(Facet); const facetSnippet = `} @@ -25,7 +22,8 @@ const facetSnippet = ` @@ -67,10 +61,6 @@ export const FacetExample = { type: GuideSectionTypes.JS, code: facetLayoutSource, }, - { - type: GuideSectionTypes.HTML, - code: facetLayoutHtml, - }, ], text: ( <> @@ -94,12 +84,28 @@ export const FacetExample = { props: { EuiFacetGroup }, demo: , snippet: [ - `// Restrict the width of default (vertical) if not restricted by parent + `// Restrict the width of the default (vertical) layout only if not restricted by parent {facets}`, - `// Horizontal -{facets}`, ], playground: facetLayoutConfig, }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: facetLayoutHorizontalSource, + }, + ], + text: ( + <> +

Horizontal and large gutter

+ + ), + props: { EuiFacetGroup }, + demo: , + snippet: [ + '{facets}', + ], + }, ], }; diff --git a/src-docs/src/views/facet/facet_layout_horizontal.js b/src-docs/src/views/facet/facet_layout_horizontal.js new file mode 100644 index 00000000000..899a1453731 --- /dev/null +++ b/src-docs/src/views/facet/facet_layout_horizontal.js @@ -0,0 +1,150 @@ +import React, { useState } from 'react'; + +import { + EuiFacetButton, + EuiFacetGroup, + EuiIcon, + EuiAvatar, +} from '../../../../src/components'; + +import { euiPaletteColorBlind } from '../../../../src/services'; + +export default () => { + const [icon, setIcon] = useState(false); + const [disabled, setDisabled] = useState(false); + const [avatars, setAvatars] = useState(false); + const [loading, setLoading] = useState(false); + const [selectedOptionId, setSelectedOptionId] = useState(undefined); + + const facet0Clicked = (id) => { + setIcon(false); + setDisabled(false); + setAvatars(false); + setLoading(false); + setSelectedOptionId((selectedOptionId) => + selectedOptionId === id ? undefined : id + ); + }; + + const facet1Clicked = (id) => { + setIcon(true); + setDisabled(false); + setAvatars(false); + setLoading(false); + setSelectedOptionId((selectedOptionId) => + selectedOptionId === id ? undefined : id + ); + }; + + const facet2Clicked = (id) => { + setDisabled((disabled) => !disabled); + setSelectedOptionId((selectedOptionId) => + selectedOptionId === id ? undefined : id + ); + }; + + const facet3Clicked = (id) => { + setIcon(false); + setDisabled(false); + setAvatars(true); + setLoading(false); + setSelectedOptionId((selectedOptionId) => + selectedOptionId === id ? undefined : id + ); + }; + + const facet4Clicked = (id) => { + setLoading(true); + setSelectedOptionId((selectedOptionId) => + selectedOptionId === id ? undefined : id + ); + }; + + const list = [ + { + id: 'facetHorizontal0', + label: 'Simple, no icon', + quantity: 6, + iconColor: euiPaletteColorBlind()[0], + onClick: facet0Clicked, + }, + { + id: 'facetHorizontal1', + label: 'Label or color indicator', + quantity: 60, + iconColor: euiPaletteColorBlind()[1], + onClick: facet1Clicked, + }, + { + id: 'facetHorizontal2', + label: 'Disable all others', + quantity: 600, + iconColor: euiPaletteColorBlind()[2], + onClick: facet2Clicked, + }, + { + id: 'facetHorizontal3', + label: 'Avatars instead of icons', + quantity: 60, + iconColor: euiPaletteColorBlind()[3], + onClick: facet3Clicked, + }, + { + id: 'facetHorizontal4', + label: 'Show all as loading', + quantity: 6, + iconColor: euiPaletteColorBlind()[4], + onClick: facet4Clicked, + }, + { + id: 'facetHorizontal5', + label: 'Just here to show truncation of really long labels', + quantity: 0, + iconColor: euiPaletteColorBlind()[5], + }, + ]; + + clearTimeout(searchTimeout); + + const searchTimeout = setTimeout(() => { + // Simulate a remotely-executed search. + setLoading(false); + }, 1200); + + const facets = (align) => { + return ( + <> + {list.map((facet) => { + let iconNode; + if (icon) { + iconNode = ; + } else if (avatars) { + iconNode = ; + } + + return ( + facet.onClick(facet.id) : undefined + }> + {facet.label} + + ); + })} + + ); + }; + + return ( + + {facets('Horizontal')} + + ); +}; diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx index 14cb2a8816b..a3ef3fe433f 100644 --- a/src/components/flyout/flyout.tsx +++ b/src/components/flyout/flyout.tsx @@ -361,15 +361,26 @@ const EuiFlyout = forwardRef( */ let flyout = ( - {/* Outside click detector is needed if theres no overlay mask to auto-close when clicking on elements outside */} - onClose()}> - {flyoutContent} - + {flyoutContent} ); + /** + * Unless outsideClickCloses = true, then add the outside click detector + */ + if (ownFocus === false && outsideClickCloses === true) { + flyout = ( + + {/* Outside click detector is needed if theres no overlay mask to auto-close when clicking on elements outside */} + onClose()}> + {flyoutContent} + + + ); + } + // If ownFocus is set, wrap with an overlay and allow the user to click it to close it. if (ownFocus && !isPushed) { flyout = ( diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_link.scss b/src/themes/eui-amsterdam/global_styling/mixins/_link.scss index f925d9e0849..5b7161b09b0 100644 --- a/src/themes/eui-amsterdam/global_styling/mixins/_link.scss +++ b/src/themes/eui-amsterdam/global_styling/mixins/_link.scss @@ -2,14 +2,22 @@ text-align: left; font-weight: $euiButtonFontWeight; - &:hover, - &:focus { - text-decoration: underline; + &:hover { + @include euiLinkHover; } &:focus { @include euiFocusRing(null, 'outer'); - // sass-lint:disable-block no-misspelled-properties no-important - text-decoration-thickness: $euiBorderWidthThick !important; + @include euiLinkFocus; } } + +@mixin euiLinkHover { + text-decoration: underline; +} + +@mixin euiLinkFocus { + text-decoration: underline; + // sass-lint:disable-block no-misspelled-properties no-important + text-decoration-thickness: $euiBorderWidthThick !important; +} diff --git a/src/themes/eui-amsterdam/overrides/_facet.scss b/src/themes/eui-amsterdam/overrides/_facet.scss new file mode 100644 index 00000000000..d854667d1a5 --- /dev/null +++ b/src/themes/eui-amsterdam/overrides/_facet.scss @@ -0,0 +1,10 @@ +.euiFacetButton { + &:focus { + background-color: transparent; + box-shadow: none; + + &:not(:disabled) .euiFacetButton__text { + @include euiLinkFocus; + } + } +} From 20df7e8199e51e211407bba557a8fa13ac86f1d2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Fri, 13 Aug 2021 13:49:54 -0400 Subject: [PATCH 07/18] [EuiPagination] Fix default `activePage` to be `0` --- .../pagination/__snapshots__/pagination.test.tsx.snap | 10 +++++++--- src/components/pagination/pagination.tsx | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap index 8d50f580d46..435c6921c1d 100644 --- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap +++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap @@ -7,9 +7,10 @@ exports[`EuiPagination is rendered 1`] = ` data-test-subj="test subject string" >