From ce848224f4e2dfd1f85725ce24fef72724038527 Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Wed, 10 Jul 2024 09:12:53 -0700 Subject: [PATCH 1/7] feat: adjust popover and context menu title styles and tooltip padding (#1283) * feat: adjust popover and context menu title styles and tooltip padding Signed-off-by: Viraj Sanghvi * Update changelog Signed-off-by: Viraj Sanghvi --------- Signed-off-by: Viraj Sanghvi --- CHANGELOG.md | 1 + src/components/context_menu/_context_menu_panel.scss | 2 +- src/components/tool_tip/_tool_tip.scss | 2 +- src/global_styling/mixins/_popover.scss | 2 +- src/themes/oui-next/global_styling/mixins/_popover.scss | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fccd1527cd..3e0c52117e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ - [Next Theme] Set base font size to 18px ([#1221](https://github.com/opensearch-project/oui/pull/1221)) - [Next Theme] Revert `font-weight` of OuiButton to normal from semi-bold ([#1222](https://github.com/opensearch-project/oui/pull/1222)) - Convert shorthand palette colors to full 6-char hex ([#1262](https://github.com/opensearch-project/oui/pull/1262)) +- Adjust popover and context menu title styles and tooltip padding ([#1283](https://github.com/opensearch-project/oui/pull/1283)) ### 🐛 Bug Fixes diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss index 27fd6514b7..019c71c238 100644 --- a/src/components/context_menu/_context_menu_panel.scss +++ b/src/components/context_menu/_context_menu_panel.scss @@ -62,7 +62,7 @@ } &--small { - @include ouiPopoverTitle('s'); + @include ouiPopoverTitle; padding: ($ouiSizeS * .75) $ouiSizeS; } } diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index ccb72ebc81..d1ff71455c 100644 --- a/src/components/tool_tip/_tool_tip.scss +++ b/src/components/tool_tip/_tool_tip.scss @@ -14,7 +14,7 @@ */ .ouiToolTip { - @include ouiToolTipStyle; + @include ouiToolTipStyle('s'); @include ouiToolTipAnimation('top'); position: absolute; opacity: 0; diff --git a/src/global_styling/mixins/_popover.scss b/src/global_styling/mixins/_popover.scss index affcaa8950..fa893823a3 100644 --- a/src/global_styling/mixins/_popover.scss +++ b/src/global_styling/mixins/_popover.scss @@ -19,7 +19,7 @@ } padding: $ouiSizeM; - text-transform: uppercase; + text-transform: none; border-bottom: $ouiBorderThin; } diff --git a/src/themes/oui-next/global_styling/mixins/_popover.scss b/src/themes/oui-next/global_styling/mixins/_popover.scss index affcaa8950..fa893823a3 100644 --- a/src/themes/oui-next/global_styling/mixins/_popover.scss +++ b/src/themes/oui-next/global_styling/mixins/_popover.scss @@ -19,7 +19,7 @@ } padding: $ouiSizeM; - text-transform: uppercase; + text-transform: none; border-bottom: $ouiBorderThin; } From e98bac240391c5f5426f8628e7057c17afbd315c Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Wed, 10 Jul 2024 11:26:42 -0700 Subject: [PATCH 2/7] feat: make SuperUpdateButton's button secondary (#1286) * feat: make SuperUpdateButton's button secondary Signed-off-by: Viraj Sanghvi * Update snapshot tests Signed-off-by: Viraj Sanghvi * Update CHANGELOG.md Signed-off-by: Viraj Sanghvi --------- Signed-off-by: Viraj Sanghvi Signed-off-by: Viraj Sanghvi --- CHANGELOG.md | 1 + .../__snapshots__/super_update_button.test.tsx.snap | 5 ----- .../date_picker/super_date_picker/super_update_button.tsx | 1 - 3 files changed, 1 insertion(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e0c52117e..00c1592867 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ - [Next Theme] Set base font size to 18px ([#1221](https://github.com/opensearch-project/oui/pull/1221)) - [Next Theme] Revert `font-weight` of OuiButton to normal from semi-bold ([#1222](https://github.com/opensearch-project/oui/pull/1222)) - Convert shorthand palette colors to full 6-char hex ([#1262](https://github.com/opensearch-project/oui/pull/1262)) +- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286)) - Adjust popover and context menu title styles and tooltip padding ([#1283](https://github.com/opensearch-project/oui/pull/1283)) ### 🐛 Bug Fixes diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap index 9f8d054102..50df6d8227 100644 --- a/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap +++ b/src/components/date_picker/super_date_picker/__snapshots__/super_update_button.test.tsx.snap @@ -8,7 +8,6 @@ exports[`OuiSuperUpdateButton is rendered 1`] = ` { Date: Wed, 10 Jul 2024 15:24:42 -0700 Subject: [PATCH 3/7] feat: use faster animations for modals, popovers, and tooltips (#1282) * feat: use faster animations for modals, popovers, and tooltips Signed-off-by: Viraj Sanghvi * Update changelog Signed-off-by: Viraj Sanghvi --------- Signed-off-by: Viraj Sanghvi Signed-off-by: Viraj Sanghvi --- CHANGELOG.md | 3 ++- src/components/modal/_modal.scss | 2 +- src/components/popover/_popover.scss | 10 +++++----- src/components/tool_tip/_tool_tip.scss | 8 -------- src/global_styling/mixins/_tool_tip.scss | 2 +- .../oui-next/global_styling/mixins/_tool_tip.scss | 2 +- 6 files changed, 10 insertions(+), 17 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 00c1592867..09f4b83988 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,8 +28,9 @@ - [Next Theme] Set base font size to 18px ([#1221](https://github.com/opensearch-project/oui/pull/1221)) - [Next Theme] Revert `font-weight` of OuiButton to normal from semi-bold ([#1222](https://github.com/opensearch-project/oui/pull/1222)) - Convert shorthand palette colors to full 6-char hex ([#1262](https://github.com/opensearch-project/oui/pull/1262)) -- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286)) +- Use faster animations for modals, popovers, and tooltips ([#1282](https://github.com/opensearch-project/oui/pull/1282)) - Adjust popover and context menu title styles and tooltip padding ([#1283](https://github.com/opensearch-project/oui/pull/1283)) +- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286)) ### 🐛 Bug Fixes diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss index 6c207d3a76..f4e6326475 100644 --- a/src/components/modal/_modal.scss +++ b/src/components/modal/_modal.scss @@ -27,7 +27,7 @@ border-radius: $ouiBorderRadius; z-index: $ouiZModal; min-width: $ouiFormMaxWidth; - animation: ouiModal $ouiAnimSpeedSlow $ouiAnimSlightBounce; + animation: ouiModal $ouiAnimSpeedExtraFast $ouiAnimSlightBounce; max-width: calc(100vw - #{$ouiSize}); // Remove the outline from the focusable container diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index b095a1dcff..b920a7438d 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -51,16 +51,16 @@ opacity: 0; /* 2 */ visibility: hidden; /* 2 */ transition: /* 2 */ - opacity $ouiAnimSlightBounce $ouiAnimSpeedSlow, - visibility $ouiAnimSlightBounce $ouiAnimSpeedSlow; + opacity $ouiAnimSlightBounce $ouiAnimSpeedExtraFast, + visibility $ouiAnimSlightBounce $ouiAnimSpeedExtraFast; // Don't animate when using the attached mode like for inputs &:not(.ouiPopover__panel-isAttached) { transform: translateY(0) translateX(0) translateZ(0); /* 2 */ transition: /* 2 */ - opacity $ouiAnimSlightBounce $ouiAnimSpeedSlow, - visibility $ouiAnimSlightBounce $ouiAnimSpeedSlow, - transform $ouiAnimSlightBounce ($ouiAnimSpeedSlow + 100ms); + opacity $ouiAnimSlightBounce $ouiAnimSpeedExtraFast, + visibility $ouiAnimSlightBounce $ouiAnimSpeedExtraFast, + transform $ouiAnimSlightBounce ($ouiAnimSpeedExtraFast + 100ms); } &.ouiPopover__panel-isOpen { diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index d1ff71455c..b88ccaf9d3 100644 --- a/src/components/tool_tip/_tool_tip.scss +++ b/src/components/tool_tip/_tool_tip.scss @@ -86,47 +86,39 @@ @keyframes ouiToolTipTop { 0% { opacity: 0; - transform: translateY(-$ouiSize); } 100% { opacity: 1; - transform: translateY(0); } } @keyframes ouiToolTipBottom { 0% { opacity: 0; - transform: translateY($ouiSize); } 100% { opacity: 1; - transform: translateY(0); } } @keyframes ouiToolTipLeft { 0% { opacity: 0; - transform: translateX(-$ouiSize); } 100% { opacity: 1; - transform: translateY(0); } } @keyframes ouiToolTipRight { 0% { opacity: 0; - transform: translateX($ouiSize); } 100% { opacity: 1; - transform: translateY(0); } } diff --git a/src/global_styling/mixins/_tool_tip.scss b/src/global_styling/mixins/_tool_tip.scss index ea10762cfb..d1310dc8c2 100644 --- a/src/global_styling/mixins/_tool_tip.scss +++ b/src/global_styling/mixins/_tool_tip.scss @@ -35,7 +35,7 @@ } @mixin ouiToolTipAnimation($side: 'top') { - animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedSlow ease-out 0s forwards; + animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedExtraFast ease-out 0s forwards; } diff --git a/src/themes/oui-next/global_styling/mixins/_tool_tip.scss b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss index ea10762cfb..d1310dc8c2 100644 --- a/src/themes/oui-next/global_styling/mixins/_tool_tip.scss +++ b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss @@ -35,7 +35,7 @@ } @mixin ouiToolTipAnimation($side: 'top') { - animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedSlow ease-out 0s forwards; + animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedExtraFast ease-out 0s forwards; } From ae87c7e9429502bdc9e133f6833ef2d4a59ab907 Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Wed, 10 Jul 2024 18:21:53 -0700 Subject: [PATCH 4/7] feat: use consistent font sizes in buttons (#1281) * feat: use consistent font sizes in buttons Signed-off-by: Viraj Sanghvi * Update button groups to use small font size and changelog Signed-off-by: Viraj Sanghvi * Update button font-size for v7 Signed-off-by: Viraj Sanghvi --------- Signed-off-by: Viraj Sanghvi Signed-off-by: Viraj Sanghvi Signed-off-by: Ashwin P Chandran Co-authored-by: Ashwin P Chandran --- CHANGELOG.md | 2 ++ src/components/button/button_group/_button_group_button.scss | 2 +- src/global_styling/mixins/_button.scss | 2 +- src/themes/oui-next/global_styling/mixins/_button.scss | 2 +- 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 09f4b83988..a487ec5c99 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,8 @@ - [Next Theme] Set base font size to 18px ([#1221](https://github.com/opensearch-project/oui/pull/1221)) - [Next Theme] Revert `font-weight` of OuiButton to normal from semi-bold ([#1222](https://github.com/opensearch-project/oui/pull/1222)) - Convert shorthand palette colors to full 6-char hex ([#1262](https://github.com/opensearch-project/oui/pull/1262)) +- Use small font size consistently in buttons and button groups ([#1281](https://github.com/opensearch-project/oui/pull/1281)) +- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286)) - Use faster animations for modals, popovers, and tooltips ([#1282](https://github.com/opensearch-project/oui/pull/1282)) - Adjust popover and context menu title styles and tooltip padding ([#1283](https://github.com/opensearch-project/oui/pull/1283)) - Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286)) diff --git a/src/components/button/button_group/_button_group_button.scss b/src/components/button/button_group/_button_group_button.scss index 39a900894b..e6ad2ca675 100644 --- a/src/components/button/button_group/_button_group_button.scss +++ b/src/components/button/button_group/_button_group_button.scss @@ -12,7 +12,7 @@ .ouiButtonGroupButton { @include ouiButtonBase; @include ouiFont; - @include ouiFontSize; + @include ouiFontSizeS; // sass-lint:disable-block indentation transition: background-color $ouiAnimSpeedNormal ease-in-out, diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss index 26578d8b63..a877641f64 100644 --- a/src/global_styling/mixins/_button.scss +++ b/src/global_styling/mixins/_button.scss @@ -47,7 +47,7 @@ @mixin ouiButton { @include ouiButtonBase; @include ouiFont; - @include ouiFontSize; + @include ouiFontSizeS; text-decoration: none; border: solid 1px transparent; diff --git a/src/themes/oui-next/global_styling/mixins/_button.scss b/src/themes/oui-next/global_styling/mixins/_button.scss index d89222cee4..9e598c09d8 100644 --- a/src/themes/oui-next/global_styling/mixins/_button.scss +++ b/src/themes/oui-next/global_styling/mixins/_button.scss @@ -47,7 +47,7 @@ @mixin ouiButton { @include ouiButtonBase; @include ouiFont; - @include ouiFontSize; + @include ouiFontSizeS; text-decoration: none; border: solid 1px transparent; From 78c7a214d563d0fb92d29ff715e568838b0dd7a6 Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Wed, 10 Jul 2024 22:01:00 -0700 Subject: [PATCH 5/7] feat: remove Button translations and add inset shadow on active (#1285) * feat: remove Button translations and add inset shadow on active Signed-off-by: Viraj Sanghvi * Update changelog Signed-off-by: Viraj Sanghvi --------- Signed-off-by: Viraj Sanghvi Signed-off-by: Viraj Sanghvi --- CHANGELOG.md | 2 +- src/components/button/_button.scss | 8 +++++++ .../button/button_icon/_button_icon.scss | 8 +++++++ .../split_button/_split_button_control.scss | 21 ------------------- src/global_styling/mixins/_button.scss | 14 +------------ src/global_styling/mixins/_shadow.scss | 4 ++-- .../global_styling/mixins/_button.scss | 14 +------------ .../global_styling/mixins/_shadow.scss | 4 ++-- 8 files changed, 23 insertions(+), 52 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a487ec5c99..ce9158d46d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,9 +29,9 @@ - [Next Theme] Revert `font-weight` of OuiButton to normal from semi-bold ([#1222](https://github.com/opensearch-project/oui/pull/1222)) - Convert shorthand palette colors to full 6-char hex ([#1262](https://github.com/opensearch-project/oui/pull/1262)) - Use small font size consistently in buttons and button groups ([#1281](https://github.com/opensearch-project/oui/pull/1281)) -- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286)) - Use faster animations for modals, popovers, and tooltips ([#1282](https://github.com/opensearch-project/oui/pull/1282)) - Adjust popover and context menu title styles and tooltip padding ([#1283](https://github.com/opensearch-project/oui/pull/1283)) +- Remove Button translations and add inset shadow on active ([#1285](https://github.com/opensearch-project/oui/pull/1285)) - Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286)) ### 🐛 Bug Fixes diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 80093ffb6e..0632440c5a 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -107,6 +107,10 @@ background-color: darken($color, 5%); border-color: darken($color, 5%); } + + &:active { + @include ouiSlightShadowActive(darken($color, 10%), .4); + } } } @@ -127,6 +131,10 @@ @include ouiSlightShadowHover($shadowColor); background-color: transparentize($color, .9); } + + &:active { + @include ouiSlightShadowActive($color); + } } } } diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss index 82586813e6..f09e15bd21 100644 --- a/src/components/button/button_icon/_button_icon.scss +++ b/src/components/button/button_icon/_button_icon.scss @@ -105,6 +105,10 @@ background-color: darken($color, 5%); border-color: darken($color, 5%); } + + &:active { + @include ouiSlightShadowActive(darken($color, 10%), .4); + } } } @@ -125,6 +129,10 @@ @include ouiSlightShadowHover($shadowColor); background-color: transparentize($color, .9); } + + &:active { + @include ouiSlightShadowActive($color); + } } } } diff --git a/src/components/split_button/_split_button_control.scss b/src/components/split_button/_split_button_control.scss index 97f447a698..22c26ac82a 100644 --- a/src/components/split_button/_split_button_control.scss +++ b/src/components/split_button/_split_button_control.scss @@ -47,27 +47,6 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%); .ouiSplitButtonControl { border: $ouiBorderWidthThick solid $ouiBorderColor; border-radius: $ouiBorderRadius; - - // Animate wrapper element only when primary button activated - &:has(.ouiSplitButtonControl--primary:hover:not([class*='isDisabled'])) { - -webkit-transform: translateY(-1px); - transform: translateY(-1px); - } - - &:has(.ouiSplitButtonControl--primary:active:not([class*='isDisabled'])) { - -webkit-transform: translateY(1px); - transform: translateY(1px); - } - - &:has(.ouiSplitButtonControl--primary:focus:not([class*='isDisabled'])) { - animation: ouiButtonActive $ouiAnimSpeedNormal $ouiAnimSlightBounce; - } - - //.ouiSplitButtonControl--primary { - // border-right: $ouiBorderWidthThin solid $splitButtonSeparatorColor; - // - //} - } // Create button modifiers based upon the map. diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss index a877641f64..9aa4c37ad2 100644 --- a/src/global_styling/mixins/_button.scss +++ b/src/global_styling/mixins/_button.scss @@ -26,19 +26,7 @@ // Adds the focus (and hover) animation for translating up 1px @mixin ouiButtonFocus { @include ouiCanAnimate { - transition: transform $ouiAnimSpeedNormal ease-in-out, background $ouiAnimSpeedNormal ease-in-out; - - &:hover:not([class*='isDisabled']) { - transform: translateY(-1px); - } - - &:focus { - animation: ouiButtonActive $ouiAnimSpeedNormal $ouiAnimSlightBounce; - } - - &:active:not([class*='isDisabled']) { - transform: translateY(1px); - } + transition: background $ouiAnimSpeedNormal ease-in-out; } } diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss index 61dbe0a78f..a781f30ce4 100644 --- a/src/global_styling/mixins/_shadow.scss +++ b/src/global_styling/mixins/_shadow.scss @@ -93,8 +93,8 @@ 0 2px 2px -1px rgba($color, $opacity); } -@mixin ouiSlightShadowActive($color: $ouiShadowColor, $opacity: .3) { - @include ouiSlightShadowHover($color, $opacity); +@mixin ouiSlightShadowActive($color: $ouiShadowColor, $opacity: .15) { + box-shadow: inset 1px 2px 8px rgba($color, $opacity); } @mixin ouiOverflowShadow($direction: 'y', $side: 'both') { diff --git a/src/themes/oui-next/global_styling/mixins/_button.scss b/src/themes/oui-next/global_styling/mixins/_button.scss index 9e598c09d8..0e3f7dfc19 100644 --- a/src/themes/oui-next/global_styling/mixins/_button.scss +++ b/src/themes/oui-next/global_styling/mixins/_button.scss @@ -26,19 +26,7 @@ // Adds the focus (and hover) animation for translating up 1px @mixin ouiButtonFocus { @include ouiCanAnimate { - transition: transform $ouiAnimSpeedNormal ease-in-out, background $ouiAnimSpeedNormal ease-in-out; - - &:hover:not([class*='isDisabled']) { - transform: translateY(-1px); - } - - &:focus { - animation: ouiButtonActive $ouiAnimSpeedNormal $ouiAnimSlightBounce; - } - - &:active:not([class*='isDisabled']) { - transform: translateY(1px); - } + transition: background $ouiAnimSpeedNormal ease-in-out; } } diff --git a/src/themes/oui-next/global_styling/mixins/_shadow.scss b/src/themes/oui-next/global_styling/mixins/_shadow.scss index b977b893e7..3fc60fa09a 100644 --- a/src/themes/oui-next/global_styling/mixins/_shadow.scss +++ b/src/themes/oui-next/global_styling/mixins/_shadow.scss @@ -93,8 +93,8 @@ 0 2px 2px -1px rgba($color, $opacity); } -@mixin ouiSlightShadowActive($color: $ouiShadowColor, $opacity: .3) { - @include ouiSlightShadowHover($color, $opacity); +@mixin ouiSlightShadowActive($color: $ouiShadowColor, $opacity: .15) { + box-shadow: inset 1px 2px 8px rgba($color, $opacity); } @mixin ouiOverflowShadow($direction: 'y', $side: 'both') { From bae0acb164d0b980f808622339abe0c6bbb6fd04 Mon Sep 17 00:00:00 2001 From: Peter Fitzgibbons Date: Fri, 12 Jul 2024 09:31:18 -0700 Subject: [PATCH 6/7] Bufix/split-button-single (#1209) * Make SplitButton display simple button when no options Signed-off-by: Peter Fitzgibbons * Changelog Fix Split Button Signed-off-by: Peter Fitzgibbons * Remove hairline if simple-button displayed Signed-off-by: Peter Fitzgibbons --------- Signed-off-by: Peter Fitzgibbons Signed-off-by: Miki Co-authored-by: Miki --- CHANGELOG.md | 1 + .../split_button/split_button_example.js | 33 ++ .../views/split_button/split_button_simple.js | 18 ++ .../__snapshots__/split_button.test.tsx.snap | 281 ++++++++++++++++-- .../split_button_control.test.tsx.snap | 22 ++ .../split_button/split_button.test.tsx | 24 ++ src/components/split_button/split_button.tsx | 4 +- .../split_button_control.test.tsx | 18 ++ .../split_button/split_button_control.tsx | 49 +-- 9 files changed, 402 insertions(+), 48 deletions(-) create mode 100644 src-docs/src/views/split_button/split_button_simple.js diff --git a/CHANGELOG.md b/CHANGELOG.md index ce9158d46d..93e92d13e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,6 +42,7 @@ - Fix "Guidelines" documentation links rendering blank pages ([#1111](https://github.com/opensearch-project/oui/pull/1111)) - Fix bug in OuiButtonContent for showing info tooltip in icon-only buttons when hovered([#1160](https://github.com/opensearch-project/oui/pull/1160)) - Fix playground support check ([#1162](https://github.com/opensearch-project/oui/pull/1162)) +- Make a OuiSplitButton with no options present as a button ([#1208](https://github.com/opensearch-project/oui/pull/1208)) - Prevent collapsable button of a resizable from adding to the height when hidden ([#1241](https://github.com/opensearch-project/oui/pull/1241)) - Prevent action buttons of OuiDataGridCell from moving the content ([#1224](https://github.com/opensearch-project/oui/pull/1224)) - Fix vertical alignment and font weight of breadcrumbs that are buttons or links ([#1232](https://github.com/opensearch-project/oui/pull/1232)) diff --git a/src-docs/src/views/split_button/split_button_example.js b/src-docs/src/views/split_button/split_button_example.js index 69f0d89cd6..66552a4942 100644 --- a/src-docs/src/views/split_button/split_button_example.js +++ b/src-docs/src/views/split_button/split_button_example.js @@ -29,6 +29,15 @@ const splitButtonBasicSnippet = `Basic Split Button `; +import SplitButtonSimple from './split_button_simple'; +const splitButtonSimpleSource = require('!!raw-loader!./split_button_simple'); +const splitButtonSimpleHtml = renderToHtml(SplitButtonSimple); +const splitButtonSimpleSnippet = ` console.log("Primary clicked")} +>Simple Split Button +`; + import SplitButtonComplex from './split_button_complex'; const splitButtonComplexSource = require('!!raw-loader!./split_button_complex'); const splitButtonComplexHtml = renderToHtml(SplitButtonComplex); @@ -180,6 +189,30 @@ export const SplitButtonExample = { snippet: splitButtonBasicSnippet, demo: , }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: splitButtonSimpleSource, + }, + { + type: GuideSectionTypes.HTML, + code: splitButtonSimpleHtml, + }, + ], + text: ( +
+

+ When no options are provided, SplitButton displays a simple Button + in it's place, even if other dropdown options are present (like + intiallyOpen) +

+
+ ), + props: { OuiSplitButton }, + snippet: splitButtonSimpleSnippet, + demo: , + }, { title: 'More complex', source: [ diff --git a/src-docs/src/views/split_button/split_button_simple.js b/src-docs/src/views/split_button/split_button_simple.js new file mode 100644 index 0000000000..1e0a4149d4 --- /dev/null +++ b/src-docs/src/views/split_button/split_button_simple.js @@ -0,0 +1,18 @@ +/* + * copyright opensearch contributors + * spdx-license-identifier: apache-2.0 + */ + +import React from 'react'; + +import { OuiSplitButton } from '../../../../src/components'; + +export default () => { + const primaryClick = () => console.log('Primary clicked'); + + return ( + + Basic Split Button + + ); +}; diff --git a/src/components/split_button/__snapshots__/split_button.test.tsx.snap b/src/components/split_button/__snapshots__/split_button.test.tsx.snap index 3ef4d1321e..b7fe6d03a8 100644 --- a/src/components/split_button/__snapshots__/split_button.test.tsx.snap +++ b/src/components/split_button/__snapshots__/split_button.test.tsx.snap @@ -11,7 +11,7 @@ exports[`OuiSplitButton is rendered 1`] = ` class="ouiSplitButtonControl ouiSplitButtonColor--primary" > - @@ -64,6 +51,7 @@ exports[`OuiSplitButton onClick events selection list is opened on drop-down but - `; + +exports[`OuiSplitButton simple button display display simple button when options are blank 1`] = ` + + + Test + + } + className="ouiSplitButton" + closePopover={[Function]} + display="inlineBlock" + hasArrow={false} + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + panelRef={[Function]} + > + +
+
+ +
+ + + + + +
+ +
+
+ + + +`; + +exports[`OuiSplitButton simple button display ignore initiallyOpen when options are blank 1`] = ` + + + Test + + } + className="ouiSplitButton" + closePopover={[Function]} + display="inlineBlock" + hasArrow={false} + isOpen={false} + ownFocus={false} + panelPaddingSize="none" + panelRef={[Function]} + > + +
+
+ +
+ + + + + +
+ +
+
+ + + +`; diff --git a/src/components/split_button/__snapshots__/split_button_control.test.tsx.snap b/src/components/split_button/__snapshots__/split_button_control.test.tsx.snap index 46cd8059a8..6c3ce1d5b7 100644 --- a/src/components/split_button/__snapshots__/split_button_control.test.tsx.snap +++ b/src/components/split_button/__snapshots__/split_button_control.test.tsx.snap @@ -35,6 +35,28 @@ exports[`OuiSplitButtonControl is rendered 1`] = ` `; +exports[`OuiSplitButtonControl is rendered without dropdown 1`] = ` +
+ +
+`; + exports[`OuiSplitButtonControl props fullWidth is rendered 1`] = `
{ }); }); + describe('simple button display', () => { + test('display simple button when options are blank', () => { + const component = mount( + Test + ); + + expect(component.find('.ouiSplitButtonControl--dropdown')).toHaveLength( + 0 + ); + expect(component).toMatchSnapshot(); + }); + + test('ignore initiallyOpen when options are blank', () => { + const component = mount( + + Test + + ); + + expect(component.find('.ouiSplitButton__listbox')).toHaveLength(0); + expect(component).toMatchSnapshot(); + }); + }); + describe('onClick events', () => { test('selection list is opened on drop-down button click', async () => { const component = mount( diff --git a/src/components/split_button/split_button.tsx b/src/components/split_button/split_button.tsx index 860c52dc1b..4dde8b2b4d 100644 --- a/src/components/split_button/split_button.tsx +++ b/src/components/split_button/split_button.tsx @@ -111,8 +111,9 @@ export const OuiSplitButton = ({ buttonProps, ...rest }: OuiSplitButtonProps) => { + const displayDropdown = options.length > 0; const itemNodes: Array = useMemo(() => [], []); - const [isOpen, setIsOpen] = useState(!!initiallyOpen); + const [isOpen, setIsOpen] = useState(!!initiallyOpen && displayDropdown); const [panelEl, setPanelEl] = useState(null); const panelRef = (node: HTMLElement | null) => setPanelEl(node); @@ -239,6 +240,7 @@ export const OuiSplitButton = ({ const button = ( setIsOpen(!isOpen)} onClick={onPrimaryClick} diff --git a/src/components/split_button/split_button_control.test.tsx b/src/components/split_button/split_button_control.test.tsx index 411cad513d..3797812d35 100644 --- a/src/components/split_button/split_button_control.test.tsx +++ b/src/components/split_button/split_button_control.test.tsx @@ -18,6 +18,24 @@ describe('OuiSplitButtonControl', () => { expect(component).toMatchSnapshot(); }); + test('is rendered without dropdown', () => { + const component = render( + + Test + + ); + + expect(component.find('.ouiSplitButtonControl--dropdown')).toHaveLength(0); + + expect( + component.find( + '.ouiSplitButtonControl--primary.ouiSplitButtonHairline--primary' + ) + ).toHaveLength(0); + + expect(component).toMatchSnapshot(); + }); + describe('props', () => { test('fullWidth is rendered', () => { const component = render( diff --git a/src/components/split_button/split_button_control.tsx b/src/components/split_button/split_button_control.tsx index b59b627978..c9b80a7771 100644 --- a/src/components/split_button/split_button_control.tsx +++ b/src/components/split_button/split_button_control.tsx @@ -43,6 +43,12 @@ export interface OuiSplitButtonControlProps fill?: boolean; + /** + * Display dropdown button + * False renders SplitButton as a simple Button. + */ + displayDropdown?: boolean; + /** * Color of buttons and options */ @@ -88,6 +94,7 @@ export interface OuiSplitButtonControlProps export const OuiSplitButtonControl: FunctionComponent< OuiSplitButtonControlProps & OuiSplitButtonActionProps > = ({ + displayDropdown = true, fill, size, color = 'primary', @@ -115,9 +122,11 @@ export const OuiSplitButtonControl: FunctionComponent< const primaryButtonClasses = classNames( 'ouiSplitButtonControl', 'ouiSplitButtonControl--primary', - color && `ouiSplitButtonHairline${colorToClassNameMap[color]}`, - disabled && 'ouiSplitButtonHairline--isDisabled', - fill && 'ouiSplitButtonHairline--filled' + color && + displayDropdown && + `ouiSplitButtonHairline${colorToClassNameMap[color]}`, + disabled && displayDropdown && 'ouiSplitButtonHairline--isDisabled', + fill && displayDropdown && 'ouiSplitButtonHairline--filled' ); const actionProps = { @@ -141,22 +150,24 @@ export const OuiSplitButtonControl: FunctionComponent< {...buttonProps}> {children} - + {displayDropdown && ( + + )}
); }; From 24779f457d25eeeafed324e715ae2178f122c905 Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Fri, 12 Jul 2024 09:52:23 -0700 Subject: [PATCH 7/7] Add docs for validating OUI changes in OpenSearch-Dashboards (#1279) * docs: add docs for validating OUI changes in OpenSearch-Dashboards Signed-off-by: Viraj Sanghvi * Update changelog testing with OSDi docs Signed-off-by: Viraj Sanghvi --------- Signed-off-by: Viraj Sanghvi Co-authored-by: Ubuntu --- CHANGELOG.md | 1 + DEVELOPER_GUIDE.md | 1 + wiki/validating-with-opensearch-dashboards.md | 35 +++++++++++++++++++ 3 files changed, 37 insertions(+) create mode 100644 wiki/validating-with-opensearch-dashboards.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 93e92d13e5..dda81c9a4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -59,6 +59,7 @@ - Fix next light color guidelines ([#1030](https://github.com/opensearch-project/oui/pull/1030)) - Update docsite version selector to use OUI components ([#1028](https://github.com/opensearch-project/oui/pull/1028)) - Remove "Widths" section from the OuiModal docs ([#1066](https://github.com/opensearch-project/oui/pull/1066)) +- Add instructions on how to test with OpenSearch Dashboards ([1279](https://github.com/opensearch-project/oui/pull/1279)) ### 🛠 Maintenance - Remove Internet Explorer specific code ([#890](https://github.com/opensearch-project/oui/pull/890)) diff --git a/DEVELOPER_GUIDE.md b/DEVELOPER_GUIDE.md index d71a5fd200..4a8620cba7 100644 --- a/DEVELOPER_GUIDE.md +++ b/DEVELOPER_GUIDE.md @@ -61,5 +61,6 @@ yarn start --port 9000 * [Theming](wiki/theming.md) * [Testing](wiki/testing.md) * [Accessibility Testing](wiki/automated-accessibility-testing.md) + * [Validating with OpenSearch Dashboards](wiki/validating-with-opensearch-dashboards.md) * [Documentation](wiki/documentation-guidelines.md) * [Releasing versions](wiki/releasing-versions.md) diff --git a/wiki/validating-with-opensearch-dashboards.md b/wiki/validating-with-opensearch-dashboards.md new file mode 100644 index 0000000000..f3f7a96293 --- /dev/null +++ b/wiki/validating-with-opensearch-dashboards.md @@ -0,0 +1,35 @@ +# Validating with OpenSearch Dashboards + +The following are instructions for locally validating OUI changes within the +[OpenSearch Dashboards](https://github.com/opensearch-project/OpenSearch-Dashboards) +project. + +## Instructions + +To consume local OUI artifacts in OpenSearch Dashboards, and because there are +some blockers to using `npm link` right now,`package.json` references to +`opensearch-project/oui` will need to be updated to point to your local repo +by running the following in `opensearch-project/OpenSearch-Dashboards`: + +```bash +# Replace `` below with a valid path to OUI +find . -type f -name package.json -exec sed -i 's/"@elastic\/eui": ".*"/"@elastic\/eui": "file:\/\/oui"/g' {} \; +``` + +To see changes in OUI be reflected in Dashboards, first build release +artifacts in `opensearch-project/oui`: + +```bash +yarn build +``` + +Then update OpenSearch Dashboards to consume them and restart your server by +running the following in `opensearch-project/OpenSearch-Dashboards`: + +```bash +yarn osd clean +yarn osd bootstrap +yarn start +``` + +Changes from OUI should now be available in your local OpenSearch Dashboards server!