From 24e4d92aeff3d8ef7227f779407b9851958b6de2 Mon Sep 17 00:00:00 2001 From: keskami <kkak808@gmail.com> Date: Tue, 31 Oct 2023 11:08:46 -0400 Subject: [PATCH 1/8] Treeview #1118 Signed-off-by: keskami <kkak808@gmail.com> --- src/components/tree_view/tree_view.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index 2d505a4259..98df359866 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -24,7 +24,7 @@ } .ouiTreeView__node--expanded { - max-height: 100vh; + max-height: none; } .ouiTreeView__nodeInner { From ae8fea4b12d4d108e4117d013da729bfe9eb4252 Mon Sep 17 00:00:00 2001 From: keskami <kkak808@gmail.com> Date: Tue, 31 Oct 2023 16:26:00 -0400 Subject: [PATCH 2/8] revert Signed-off-by: keskami <kkak808@gmail.com> --- src/components/tree_view/tree_view.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index 98df359866..2d505a4259 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -24,7 +24,7 @@ } .ouiTreeView__node--expanded { - max-height: none; + max-height: 100vh; } .ouiTreeView__nodeInner { From 3dd85f52bc3bd5f50a30e9f27e9d81a22077b0ff Mon Sep 17 00:00:00 2001 From: keskami <kkak808@gmail.com> Date: Tue, 31 Oct 2023 16:27:21 -0400 Subject: [PATCH 3/8] [BUG] Tree view expanded view #1118 Signed-off-by: keskami <kkak808@gmail.com> --- src/components/tree_view/tree_view.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index 2d505a4259..98df359866 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -24,7 +24,7 @@ } .ouiTreeView__node--expanded { - max-height: 100vh; + max-height: none; } .ouiTreeView__nodeInner { From baead4a1c0e5dcf6e9eb228f33fee302a410b145 Mon Sep 17 00:00:00 2001 From: keskami <kkak808@gmail.com> Date: Tue, 31 Oct 2023 16:29:01 -0400 Subject: [PATCH 4/8] CHANGELOG updated Signed-off-by: keskami <kkak808@gmail.com> --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a3646ba851..7cddc5ab7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -66,6 +66,7 @@ - Add support for null types when deriving JSON from Sass variables ([#1019](https://github.com/opensearch-project/oui/pull/1019)) - Fix alignment of left icon for OuiListGroupItem with multiline text ([#1027](https://github.com/opensearch-project/oui/pull/1027)) - Update new polygon icon svg ([#1068](https://github.com/opensearch-project/oui/pull/1083)) +- Remove max-height for TreeView node ([[#1118](https://github.com/opensearch-project/oui/issues/1118)]) ### 🚞 Infrastructure From f6f6576bf57c16df7a6ab2ac1fa4f382d1402f6a Mon Sep 17 00:00:00 2001 From: keskami <kkak808@gmail.com> Date: Thu, 2 Nov 2023 14:09:32 -0400 Subject: [PATCH 5/8] Add count prop to OuiTreeView #934 Signed-off-by: keskami <kkak808@gmail.com> --- .../__snapshots__/tree_view.test.tsx.snap | 99 +++++++++++++++++-- src/components/tree_view/tree_view.scss | 5 + src/components/tree_view/tree_view.tsx | 27 +++-- 3 files changed, 115 insertions(+), 16 deletions(-) diff --git a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap index 498eff8e2b..63c1ffabb9 100644 --- a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap +++ b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap @@ -34,10 +34,28 @@ exports[`OuiTreeView is rendered 1`] = ` data-ouiicon-type="folderOpen" /> </span> + </button> + <button + class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton" + type="button" + > <span - class="ouiTreeView__nodeLabel" + class="ouiFacetButton__content" > - Item One + <span + class="ouiFacetButton__text" + > + <span + class="ouiTreeView__nodeLabel" + > + Item One + </span> + </span> + <span + class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity" + > + 3 + </span> </span> </button> <div @@ -67,10 +85,23 @@ exports[`OuiTreeView is rendered 1`] = ` data-ouiicon-type="document" /> </span> + </button> + <button + class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton" + type="button" + > <span - class="ouiTreeView__nodeLabel" + class="ouiFacetButton__content" > - Item A + <span + class="ouiFacetButton__text" + > + <span + class="ouiTreeView__nodeLabel" + > + Item A + </span> + </span> </span> </button> <div @@ -94,10 +125,28 @@ exports[`OuiTreeView is rendered 1`] = ` data-ouiicon-type="arrowRight" /> </span> + </button> + <button + class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton" + type="button" + > <span - class="ouiTreeView__nodeLabel" + class="ouiFacetButton__content" > - Item B + <span + class="ouiFacetButton__text" + > + <span + class="ouiTreeView__nodeLabel" + > + Item B + </span> + </span> + <span + class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity" + > + 2 + </span> </span> </button> <div @@ -121,10 +170,28 @@ exports[`OuiTreeView is rendered 1`] = ` data-ouiicon-type="arrowRight" /> </span> + </button> + <button + class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton" + type="button" + > <span - class="ouiTreeView__nodeLabel" + class="ouiFacetButton__content" > - Item C + <span + class="ouiFacetButton__text" + > + <span + class="ouiTreeView__nodeLabel" + > + Item C + </span> + </span> + <span + class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity" + > + 2 + </span> </span> </button> <div @@ -144,11 +211,23 @@ exports[`OuiTreeView is rendered 1`] = ` class="ouiTreeView__nodeInner" data-test-subj="ouiTreeViewButton-ouiTreeView_generated-id" id="item_two" + /> + <button + class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton" + type="button" > <span - class="ouiTreeView__nodeLabel" + class="ouiFacetButton__content" > - Item Two + <span + class="ouiFacetButton__text" + > + <span + class="ouiTreeView__nodeLabel" + > + Item Two + </span> + </span> </span> </button> <div diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index 98df359866..7ff78a8ef6 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -55,6 +55,11 @@ } +.ouiTreeView_ouiFacetButton { + text-align-last: center; + padding: none; +} + .ouiTreeView__nodeLabel { @include ouiTextTruncate; } diff --git a/src/components/tree_view/tree_view.tsx b/src/components/tree_view/tree_view.tsx index e640333b56..31fdf523ac 100644 --- a/src/components/tree_view/tree_view.tsx +++ b/src/components/tree_view/tree_view.tsx @@ -37,6 +37,7 @@ import { OuiScreenReaderOnly } from '../accessibility'; import { OuiText } from '../text'; import { keys, htmlIdGenerator } from '../../services'; import { OuiInnerText } from '../inner_text'; +import { OuiFacetButton } from '../facet'; const OuiTreeViewContext = createContext<string>(''); @@ -118,6 +119,8 @@ export type CommonTreeProps = CommonProps & * that contain children */ showExpansionArrows?: boolean; + /** Number of child components within tree view node + */ }; export type OuiTreeViewProps = Omit< @@ -307,7 +310,7 @@ export class OuiTreeView extends Component<OuiTreeViewProps, OuiTreeViewState> { {items.map((node, index) => { const buttonId = node.id; const wrappingId = this.treeIdGenerator(buttonId); - + const count = node.children?.length; return ( <OuiInnerText key={node.id + index} @@ -389,11 +392,23 @@ export class OuiTreeView extends Component<OuiTreeViewProps, OuiTreeViewState> { {node.useEmptyIcon && !node.icon ? ( <span className="ouiTreeView__iconPlaceholder" /> ) : null} - <span - ref={ref} - className="ouiTreeView__nodeLabel"> - {node.label} - </span> + {count === 0 ? ( + <span + ref={ref} + className="ouiTreeView__nodeLabel"> + {node.label} + </span> + ) : ( + <OuiFacetButton + quantity={count} + className="ouiTreeView_ouiFacetButton"> + <span + ref={ref} + className="ouiTreeView__nodeLabel"> + {node.label} + </span> + </OuiFacetButton> + )} </button> <div id={wrappingId} From 734f6a2f2e0aeaa0f58ba444f6aadc547b3db9f9 Mon Sep 17 00:00:00 2001 From: keskami <kkak808@gmail.com> Date: Thu, 2 Nov 2023 14:13:28 -0400 Subject: [PATCH 6/8] CHANGELOG updated Signed-off-by: keskami <kkak808@gmail.com> --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7cddc5ab7c..ae9ffe00ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -58,6 +58,7 @@ - Adjust background color of OuiToolTip in `next` theme ([#1004](https://github.com/opensearch-project/oui/pull/1004)) - Add new `middle-out` order prop option to `OuiPaletteColorBlind` ([#856](https://github.com/opensearch-project/oui/pull/856)) - Add new icons for OpenSearch Dashboards v2.10.0 ([#1014](https://github.com/opensearch-project/oui/pull/1014)) +- Add count prop to OuiTreeView with OuiFacetButton ([[#934](https://github.com/opensearch-project/oui/issues/934)]) ### 🐛 Bug Fixes From b0db485e662459bf1816967e025347c795c7175d Mon Sep 17 00:00:00 2001 From: keskami <kkak808@gmail.com> Date: Fri, 3 Nov 2023 00:26:18 -0400 Subject: [PATCH 7/8] revert max-height in TreeView Signed-off-by: keskami <kkak808@gmail.com> --- src/components/tree_view/tree_view.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss index 7ff78a8ef6..03ac557fc1 100644 --- a/src/components/tree_view/tree_view.scss +++ b/src/components/tree_view/tree_view.scss @@ -24,7 +24,7 @@ } .ouiTreeView__node--expanded { - max-height: none; + max-height: 100vh; } .ouiTreeView__nodeInner { From 1899723b5ba0b1eedc50790f1dda3152be92ba40 Mon Sep 17 00:00:00 2001 From: keskami <kkak808@gmail.com> Date: Fri, 3 Nov 2023 00:27:28 -0400 Subject: [PATCH 8/8] remove issue #1118 CHANGELOG Signed-off-by: keskami <kkak808@gmail.com> --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae9ffe00ac..98fc27d5db 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -67,7 +67,6 @@ - Add support for null types when deriving JSON from Sass variables ([#1019](https://github.com/opensearch-project/oui/pull/1019)) - Fix alignment of left icon for OuiListGroupItem with multiline text ([#1027](https://github.com/opensearch-project/oui/pull/1027)) - Update new polygon icon svg ([#1068](https://github.com/opensearch-project/oui/pull/1083)) -- Remove max-height for TreeView node ([[#1118](https://github.com/opensearch-project/oui/issues/1118)]) ### 🚞 Infrastructure