From 1413360343d88c07a1742478f0bb9518463cd230 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 30 Jul 2018 14:54:33 -0400 Subject: [PATCH] Allowing `EuiPopover` arrow to be optional Fixin some popover override css --- .../views/super_select/super_select_basic.js | 6 +- .../collapsed_item_actions.test.js.snap | 1 + .../in_memory_table.test.js.snap | 1 + .../form/super_select/_super_select.scss | 18 +- .../form/super_select/super_select.js | 3 +- .../icon/__snapshots__/icon.test.js.snap | 5414 +++++++++++++++++ src/components/popover/_popover.scss | 5 + src/components/popover/index.d.ts | 1 + src/components/popover/popover.js | 8 +- .../field_value_selection_filter.test.js.snap | 4 + 10 files changed, 5445 insertions(+), 16 deletions(-) create mode 100644 src/components/icon/__snapshots__/icon.test.js.snap diff --git a/src-docs/src/views/super_select/super_select_basic.js b/src-docs/src/views/super_select/super_select_basic.js index 57bdf074b80..c018d596b13 100644 --- a/src-docs/src/views/super_select/super_select_basic.js +++ b/src-docs/src/views/super_select/super_select_basic.js @@ -16,7 +16,7 @@ export default class extends Component { { value: 'warning', inputDisplay: ( - + Warning ), @@ -24,7 +24,7 @@ export default class extends Component { { value: 'minor', inputDisplay: ( - + Minor ), @@ -32,7 +32,7 @@ export default class extends Component { { value: 'critical', inputDisplay: ( - + Critical ), diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap index 99fb827f551..7f2c460a91f 100644 --- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap +++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.js.snap @@ -16,6 +16,7 @@ exports[`CollapsedItemActions render 1`] = ` /> } closePopover={[Function]} + hasArrow={true} id="id-actions" isOpen={false} ownFocus={false} diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap index a06b20b54bb..dbc4406a8e2 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap @@ -268,6 +268,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` } closePopover={[Function]} + hasArrow={true} id="customizablePagination" isOpen={false} ownFocus={false} diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss index 025bfcdacf7..5bbe742de33 100644 --- a/src/components/form/super_select/_super_select.scss +++ b/src/components/form/super_select/_super_select.scss @@ -1,7 +1,6 @@ /* * 1. Make popover the same width as the form control * 2. Style popover similar to combobox - * 3. Specificity to override default popover */ .euiSuperSelect.euiPopover { /* 3 */ @@ -13,20 +12,19 @@ } } -.euiSuperSelect__popoverPanel { /* 3 */ - //width: calc(100% + 2px); /* 1 */ - - .euiPopover__panel__arrow { - display: none; /* 2 */ - } -} - -.euiSuperSelect.euiPopover--anchorDownCenter .euiSuperSelect__popoverPanel { /* 3 */ +.euiSuperSelect__popoverPanel[class*="bottom"] { border-top-color: transparentize($euiBorderColor, .2); border-top-right-radius: 0; /* 2 */ border-top-left-radius: 0; /* 2 */ } +.euiSuperSelect__popoverPanel[class*="top"].euiPanel--shadow { + border-bottom-color: transparentize($euiBorderColor, .2); + border-bottom-right-radius: 0; /* 2 */ + border-bottom-left-radius: 0; /* 2 */ + @include euiBottomShadowFlat; /* 2 */ +} + .euiSuperSelect.euiPopover--anchorDownCenter.euiPopover-isOpen .euiSuperSelect__popoverPanel { /* 3 */ transform: translateX(-50%) translateY(0) translateZ(0); /* 2 */ } diff --git a/src/components/form/super_select/super_select.js b/src/components/form/super_select/super_select.js index b73e7bbc0b4..ea0cd3c62c0 100644 --- a/src/components/form/super_select/super_select.js +++ b/src/components/form/super_select/super_select.js @@ -53,7 +53,7 @@ export class EuiSuperSelect extends Component { this.focusItemAt(indexOfSelected); this.setState({ - menuWidth: this.popoverRef.getBoundingClientRect().width, + menuWidth: this.popoverRef.getBoundingClientRect().width - 2, // account for border not inner shadow }); }); } else { @@ -200,6 +200,7 @@ export class EuiSuperSelect extends Component { anchorPosition="downCenter" ownFocus={false} popoverRef={this.setPopoverRef} + hasArrow={false} > {items} diff --git a/src/components/icon/__snapshots__/icon.test.js.snap b/src/components/icon/__snapshots__/icon.test.js.snap new file mode 100644 index 00000000000..ed574b70a5f --- /dev/null +++ b/src/components/icon/__snapshots__/icon.test.js.snap @@ -0,0 +1,5414 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiIcon is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props size l is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props size m is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props size original is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props size s is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props size xl is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props size xxl is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props tabIndex renders focusable="false" when -1 1`] = ` + + + + + + +`; + +exports[`EuiIcon props tabIndex renders focusable="false" when not provided 1`] = ` + + + + + + +`; + +exports[`EuiIcon props tabIndex renders focusable="true" when 0 1`] = ` + + + + + + +`; + +exports[`EuiIcon props title defaults to a humanized version of the type 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props title is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type addDataApp is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type advancedSettingsApp is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`EuiIcon props type alert is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type apmApp is rendered 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`EuiIcon props type apps is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type arrowDown is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type arrowLeft is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type arrowRight is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type arrowUp is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type asterisk is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type bolt is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type boxesHorizontal is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type boxesVertical is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type broom is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type brush is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type bullseye is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type calendar is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type check is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type checkInCircleFilled is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type clock is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type compute is rendered 1`] = ` + + + + +`; + +exports[`EuiIcon props type console is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type consoleApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type controlsHorizontal is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type controlsVertical is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type copy is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type copyClipboard is rendered 1`] = ` + + + + +`; + +exports[`EuiIcon props type createAdvancedJob is rendered 1`] = ` + + + + + + + + + + + + +`; + +exports[`EuiIcon props type createMultiMetricJob is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`EuiIcon props type createPopulationJob is rendered 1`] = ` + + + + + + + + + + + +`; + +exports[`EuiIcon props type createSingleMetricJob is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type cross is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type dashboardApp is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type dataVisualizer is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type database is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type devToolsApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type discoverApp is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type document is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type dot is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorAlignCenter is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorAlignLeft is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorAlignRight is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorBold is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorCodeBlock is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorComment is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorHeading is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorItalic is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorLink is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorOrderedList is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorStrike is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorTable is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorUnderline is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type editorUnorderedList is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type empty is rendered 1`] = ` + +`; + +exports[`EuiIcon props type emsApp is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type exit is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type expand is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type exportAction is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type eye is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type eyeClosed is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type faceHappy is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type faceNeutral is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type faceSad is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type filter is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type fullScreen is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type gear is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type globe is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type grab is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type graphApp is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type grid is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type grokApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type heatmap is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type help is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type iInCircle is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type importAction is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type indexClose is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type indexEdit is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type indexFlush is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type indexManagementApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type indexMapping is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type indexOpen is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type indexPatternApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type indexSettings is rendered 1`] = ` + + + + + +`; + +exports[`EuiIcon props type inputOutput is rendered 1`] = ` + + + + + +`; + +exports[`EuiIcon props type inspect is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type invert is rendered 1`] = ` + + + + +`; + +exports[`EuiIcon props type kqlField is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type kqlFunction is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type kqlOperand is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type kqlSelector is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type kqlValue is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type link is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type list is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type listAdd is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type lock is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type loggingApp is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type logoAerospike is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type logoApache is rendered 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`EuiIcon props type logoBeats is rendered 1`] = ` + + + + + + + + + +`; + +exports[`EuiIcon props type logoCeph is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoCloud is rendered 1`] = ` + + + + + + + + + +`; + +exports[`EuiIcon props type logoCloudEnterprise is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`EuiIcon props type logoCouchbase is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoDocker is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoDropwizard is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoElastic is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`EuiIcon props type logoElasticStack is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type logoElasticsearch is rendered 1`] = ` + + + + + + + + + + + + +`; + +exports[`EuiIcon props type logoEtcd is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type logoGithub is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoGmail is rendered 1`] = ` + + + + + + + + + + + +`; + +exports[`EuiIcon props type logoGolang is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoHAproxy is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoKafka is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoKibana is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type logoKubernetes is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoLogstash is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type logoMemcached is rendered 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`EuiIcon props type logoMongodb is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`EuiIcon props type logoMySQL is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type logoNginx is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type logoOsquery is rendered 1`] = ` + + + + + + + + + + + + +`; + +exports[`EuiIcon props type logoPhp is rendered 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`EuiIcon props type logoPostgres is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type logoPrometheus is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoRabbitmq is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoRedis is rendered 1`] = ` + + + + + + + + + + + + + + +`; + +exports[`EuiIcon props type logoSketch is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`EuiIcon props type logoSlack is rendered 1`] = ` + + + + + +`; + +exports[`EuiIcon props type logoWebhook is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type logoWindows is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logoXpack is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`EuiIcon props type logstashFilter is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logstashIf is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logstashInput is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logstashOutput is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type logstashQueue is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type machineLearningApp is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type managementApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type mapMarker is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type memory is rendered 1`] = ` + + + + +`; + +exports[`EuiIcon props type merge is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type minusInCircle is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type monitoringApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type node is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type number is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type offline is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type online is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type pause is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type pencil is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type pin is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type pipelineApp is rendered 1`] = ` + + + + + + + + + + + + +`; + +exports[`EuiIcon props type play is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type plusInCircle is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type popout is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type questionInCircle is rendered 1`] = ` + + + + +`; + +exports[`EuiIcon props type refresh is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type reportingApp is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type save is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type savedObjectsApp is rendered 1`] = ` + + + + + + + + + + + +`; + +exports[`EuiIcon props type scale is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type search is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type searchProfilerApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type securityApp is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type shard is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type share is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type sortDown is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type sortLeft is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type sortRight is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type sortUp is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type starEmpty is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type starPlusFilled is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type stats is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type stop is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type stopFilled is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type storage is rendered 1`] = ` + + + + + + + + +`; + +exports[`EuiIcon props type string is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type tableOfContents is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type tear is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type temperature is rendered 1`] = ` + + + + +`; + +exports[`EuiIcon props type timelionApp is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type trash is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type upgradeAssistantApp is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type user is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type usersRolesApp is rendered 1`] = ` + + + + + + + + + + +`; + +exports[`EuiIcon props type vector is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visArea is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visBarHorizontal is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visBarVertical is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visControls is rendered 1`] = ` + + + + + + +`; + +exports[`EuiIcon props type visGauge is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visGoal is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visHeatmap is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visLine is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visMapCoordinate is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visMapRegion is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visMetric is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visPie is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visTable is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visTagCloud is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visText is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visTimelion is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visVega is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visVisualBuilder is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type visualizeApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type watchesApp is rendered 1`] = ` + + + + + + + +`; + +exports[`EuiIcon props type wrench is rendered 1`] = ` + + + + +`; diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index 803063ad5c6..79e983194c9 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -130,6 +130,11 @@ } } } + + + &.euiPopover__panel-noArrow .euiPopover__panel__arrow { + display: none; + } } .euiPopover__panel.euiPopover__panel-withTitle { diff --git a/src/components/popover/index.d.ts b/src/components/popover/index.d.ts index 687308e6d0e..51622c122e0 100644 --- a/src/components/popover/index.d.ts +++ b/src/components/popover/index.d.ts @@ -31,6 +31,7 @@ declare module '@elastic/eui' { withTitle?: boolean; isOpen?: boolean; ownFocus?: boolean; + hasArrow?: boolean; anchorPosition?: PopoverAnchorPosition; panelClassName?: string; panelPaddingSize?: PanelPaddingSize; diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index 3dd0fd9e970..4c5066ea5cb 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -236,7 +236,7 @@ export class EuiPopover extends Component { align: getPopoverAlignFromAnchorPosition(this.props.anchorPosition), anchor: this.button, popover: this.panel, - offset: 16, + offset: this.props.hasArrow ? 16 : 8, arrowConfig: { arrowWidth: 24, arrowBuffer: 10, @@ -254,7 +254,7 @@ export class EuiPopover extends Component { zIndex, }; - const arrowStyles = arrow; + const arrowStyles = this.props.hasArrow ? arrow : null; const arrowPosition = position; this.setState({ popoverStyles, arrowStyles, arrowPosition }); @@ -293,6 +293,7 @@ export class EuiPopover extends Component { panelClassName, panelPaddingSize, popoverRef, + hasArrow, ...rest } = this.props; @@ -311,6 +312,7 @@ export class EuiPopover extends Component { `euiPopover__panel-${this.state.arrowPosition}`, { 'euiPopover__panel-isOpen': this.state.isOpening }, { 'euiPopover__panel-withTitle': withTitle }, + { 'euiPopover__panel-noArrow': !hasArrow }, panelClassName ); @@ -417,6 +419,7 @@ EuiPopover.propTypes = { panelClassName: PropTypes.string, panelPaddingSize: PropTypes.oneOf(SIZES), popoverRef: PropTypes.func, + hasArrow: PropTypes.bool, container: PropTypes.oneOfType([ PropTypes.node, PropTypes.instanceOf(HTMLElement) @@ -428,4 +431,5 @@ EuiPopover.defaultProps = { ownFocus: false, anchorPosition: 'downCenter', panelPaddingSize: 'm', + hasArrow: true, }; diff --git a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap index dbadf457d73..43889704dc8 100644 --- a/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap +++ b/src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.js.snap @@ -17,6 +17,7 @@ exports[`FieldValueSelectionFilter render - all configurations 1`] = ` } closePopover={[Function]} + hasArrow={true} id="field_value_selection_0" isOpen={false} ownFocus={true} @@ -62,6 +63,7 @@ exports[`FieldValueSelectionFilter render - multi-select OR 1`] = ` } closePopover={[Function]} + hasArrow={true} id="field_value_selection_0" isOpen={false} ownFocus={true} @@ -107,6 +109,7 @@ exports[`FieldValueSelectionFilter render - options as a function 1`] = ` } closePopover={[Function]} + hasArrow={true} id="field_value_selection_0" isOpen={false} ownFocus={true} @@ -152,6 +155,7 @@ exports[`FieldValueSelectionFilter render - options as an array 1`] = ` } closePopover={[Function]} + hasArrow={true} id="field_value_selection_0" isOpen={false} ownFocus={true}