diff --git a/CHANGELOG.md b/CHANGELOG.md index de04754075..6b332c5007 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,8 @@ ### 📝 Documentation +- Add instructions on how to test with OpenSearch Dashboards ([1279](https://github.com/opensearch-project/oui/pull/1279)) + ### 🛠 Maintenance ### 🪛 Refactoring @@ -68,11 +70,18 @@ - Eliminate screenreader content when copying and pasting data grid table ([#1198](https://github.com/opensearch-project/oui/pull/1198)) - [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)) +- 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 - 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/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/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/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_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/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/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/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`] = ` { - @@ -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 && ( + + )}
); }; diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss index ccb72ebc81..b88ccaf9d3 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; @@ -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/_button.scss b/src/global_styling/mixins/_button.scss index 26578d8b63..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; } } @@ -47,7 +35,7 @@ @mixin ouiButton { @include ouiButtonBase; @include ouiFont; - @include ouiFontSize; + @include ouiFontSizeS; text-decoration: none; border: solid 1px transparent; 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/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/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/_button.scss b/src/themes/oui-next/global_styling/mixins/_button.scss index d89222cee4..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; } } @@ -47,7 +35,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/_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; } 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') { 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; } 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!