Merge branch 'main' into fix-filter-popover-width

Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Jul 12, 2024 · 5c34efb · 5c34efb
2 parents d2a70ec + 24779f4
commit 5c34efb
Show file tree

Hide file tree

Showing 29 changed files with 483 additions and 128 deletions.
diff --git 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
@@ -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
@@ -29,6 +29,15 @@ const splitButtonBasicSnippet = `<OuiSplitButton
 >Basic Split Button</OuiSplitButton>
 `;
 
+import SplitButtonSimple from './split_button_simple';
+const splitButtonSimpleSource = require('!!raw-loader!./split_button_simple');
+const splitButtonSimpleHtml = renderToHtml(SplitButtonSimple);
+const splitButtonSimpleSnippet = `<OuiSplitButton
+  options={[]} initiallyOpen
+  onClick={() => console.log("Primary clicked")}
+>Simple Split Button</OuiSplitButton>
+`;
+
 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: <SplitButtonBasic />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: splitButtonSimpleSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: splitButtonSimpleHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            When no options are provided, SplitButton displays a simple Button
+            in it&apos;s place, even if other dropdown options are present (like
+            <OuiCode>intiallyOpen</OuiCode>)
+          </p>
+        </div>
+      ),
+      props: { OuiSplitButton },
+      snippet: splitButtonSimpleSnippet,
+      demo: <SplitButtonSimple />,
+    },
     {
       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
@@ -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 (
+    <OuiSplitButton options={[]} initiallyOpen onClick={primaryClick}>
+      Basic Split Button
+    </OuiSplitButton>
+  );
+};
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -8,7 +8,6 @@ exports[`OuiSuperUpdateButton is rendered 1`] = `
   <OuiButton
     className="ouiSuperUpdateButton"
     color="primary"
-    fill={true}
     iconType="refresh"
     isDisabled={false}
     isLoading={false}
@@ -41,7 +40,6 @@ exports[`OuiSuperUpdateButton isDisabled 1`] = `
   <OuiButton
     className="ouiSuperUpdateButton"
     color="primary"
-    fill={true}
     iconType="refresh"
     isDisabled={true}
     isLoading={false}
@@ -68,7 +66,6 @@ exports[`OuiSuperUpdateButton isLoading 1`] = `
   <OuiButton
     className="ouiSuperUpdateButton"
     color="success"
-    fill={true}
     iconType="kqlFunction"
     isDisabled={false}
     isLoading={true}
@@ -101,7 +98,6 @@ exports[`OuiSuperUpdateButton needsUpdate 1`] = `
   <OuiButton
     className="ouiSuperUpdateButton"
     color="success"
-    fill={true}
     iconType="kqlFunction"
     isDisabled={false}
     isLoading={false}
@@ -128,7 +124,6 @@ exports[`OuiSuperUpdateButton showTooltip 1`] = `
   <OuiButton
     className="ouiSuperUpdateButton"
     color="primary"
-    fill={true}
     iconType="refresh"
     isDisabled={false}
     isLoading={false}

diff --git a/src/components/date_picker/super_date_picker/super_update_button.tsx b/src/components/date_picker/super_date_picker/super_update_button.tsx
@@ -169,7 +169,6 @@ export class OuiSuperUpdateButton extends Component<OuiSuperUpdateButtonProps> {
         <OuiButton
           className={classes}
           color={needsUpdate || isLoading ? 'success' : 'primary'}
-          fill
           iconType={needsUpdate || isLoading ? 'kqlFunction' : 'refresh'}
           textProps={{
             ...restTextProps,

diff --git 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
@@ -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 {