From 1038b63b251b5810b6aa0244fbb0c0bc686c0508 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Wed, 2 Oct 2019 22:57:18 +0100 Subject: [PATCH] fix(ui): allow overflow for dropdowns inside accordion --- ui/src/Components/Accordion/index.js | 4 +++- ui/src/Components/Accordion/index.scss | 3 +++ .../Configuration/AlertGroupCollapseConfiguration.js | 1 - .../Configuration/AlertGroupSortConfiguration.js | 1 - .../MainModal/Configuration/SortLabelName.js | 1 - .../Configuration/__snapshots__/index.test.js.snap | 12 ++++++------ .../MainModal/__snapshots__/Help.test.js.snap | 4 ++-- .../__snapshots__/MainModalContent.test.js.snap | 12 ++++++------ ui/src/Components/MultiSelect/index.js | 2 +- 9 files changed, 21 insertions(+), 19 deletions(-) create mode 100644 ui/src/Components/Accordion/index.scss diff --git a/ui/src/Components/Accordion/index.js b/ui/src/Components/Accordion/index.js index 4692b6aba..4a86a5fb0 100644 --- a/ui/src/Components/Accordion/index.js +++ b/ui/src/Components/Accordion/index.js @@ -6,6 +6,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; +import "./index.scss"; + const Trigger = ({ text, isOpen }) => (
{text}
@@ -25,7 +27,7 @@ const Accordion = ({ text, content, extraProps }) => ( overflowWhenOpen="visible" className="card" openedClassName="card" - triggerClassName="card-header cursor-pointer" + triggerClassName="card-header cursor-pointer border-bottom-0" triggerOpenedClassName="card-header cursor-pointer bg-light" contentOuterClassName="collapse show" contentInnerClassName="card-body my-2" diff --git a/ui/src/Components/Accordion/index.scss b/ui/src/Components/Accordion/index.scss new file mode 100644 index 000000000..5bd4b051e --- /dev/null +++ b/ui/src/Components/Accordion/index.scss @@ -0,0 +1,3 @@ +.accordion > .Collapsible.card { + overflow: unset; +} diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js index e6820a9e9..51fde4c2c 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js @@ -64,7 +64,6 @@ const AlertGroupCollapseConfiguration = observer( )} options={Object.values(settingsStore.alertGroupConfig.options)} onChange={this.onCollapseChange} - menuPosition="fixed" hideSelectedOptions />
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js index e16d6bbc5..ad8deeb65 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js @@ -75,7 +75,6 @@ const AlertGroupSortConfiguration = observer( )} options={Object.values(settingsStore.gridConfig.options)} onChange={this.onSortOrderChange} - menuPosition="fixed" hideSelectedOptions /> diff --git a/ui/src/Components/MainModal/Configuration/SortLabelName.js b/ui/src/Components/MainModal/Configuration/SortLabelName.js index 096b3f6aa..e6fafa75f 100644 --- a/ui/src/Components/MainModal/Configuration/SortLabelName.js +++ b/ui/src/Components/MainModal/Configuration/SortLabelName.js @@ -79,7 +79,6 @@ const SortLabelName = observer( )} options={this.suggestions.names} onChange={this.onChange} - menuPosition="fixed" /> ); } diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap index 0e0243e7f..86dced59d 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap @@ -75,7 +75,7 @@ exports[` matches snapshot 1`] = `
-
+
Filter bar configuration @@ -123,7 +123,7 @@ exports[` matches snapshot 1`] = `
-
+
Alert group titlebar configuration @@ -170,7 +170,7 @@ exports[` matches snapshot 1`] = `
-
+
Minimal alert group width @@ -241,7 +241,7 @@ exports[` matches snapshot 1`] = `
-
+
Default number of alerts to show per group @@ -312,7 +312,7 @@ exports[` matches snapshot 1`] = `
-
+
Default alert group display @@ -391,7 +391,7 @@ exports[` matches snapshot 1`] = `
-
+
Grid sort order diff --git a/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap b/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap index c7e4d8478..95733eb9e 100644 --- a/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap +++ b/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap @@ -163,7 +163,7 @@ exports[` matches snapshot 1`] = `
-
+
Filtering using alert labels @@ -339,7 +339,7 @@ exports[` matches snapshot 1`] = `
-
+
Filtering alerts using special filters diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap index 50139a1a0..3b206bac3 100644 --- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap +++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap @@ -94,7 +94,7 @@ exports[` matches snapshot 1`] = `
-
+
Filter bar configuration @@ -142,7 +142,7 @@ exports[` matches snapshot 1`] = `
-
+
Alert group titlebar configuration @@ -189,7 +189,7 @@ exports[` matches snapshot 1`] = `
-
+
Minimal alert group width @@ -260,7 +260,7 @@ exports[` matches snapshot 1`] = `
-
+
Default number of alerts to show per group @@ -331,7 +331,7 @@ exports[` matches snapshot 1`] = `
-
+
Default alert group display @@ -410,7 +410,7 @@ exports[` matches snapshot 1`] = `
-
+
Grid sort order diff --git a/ui/src/Components/MultiSelect/index.js b/ui/src/Components/MultiSelect/index.js index 1ff4cdc12..c34e37467 100644 --- a/ui/src/Components/MultiSelect/index.js +++ b/ui/src/Components/MultiSelect/index.js @@ -80,7 +80,7 @@ const ReactSelectStyles = { }), menu: (base, state) => ({ ...base, - zIndex: 100 + zIndex: 1500 }), option: (base, state) => ({ ...base,