Merge branch 'main' into stylelint

Signed-off-by: Danila Gulderov <[email protected]>

CHANGELOG.md

@@ -9,20 +9,26 @@
 ### 🛡 Security
 
 ### 📈 Features/Enhancements
+
 - Rename the aliased theme files ([#863](https://github.com/opensearch-project/oui/pull/863))
 - Fix `autofill` text color in dark themes ([#871](https://github.com/opensearch-project/oui/pull/871))
 - [Header] Update background color in next theme ([#936](https://github.com/opensearch-project/oui/pull/936))
 - Set link to use semi bold font weight ([#961](https://github.com/opensearch-project/oui/pull/961))
 - Update ouiTextSubduedColor in `next` dark theme ([#973](https://github.com/opensearch-project/oui/pull/973))
 - Adds `SchemaItem` as an experimental component ([#974](https://github.com/opensearch-project/oui/pull/974))
-- Make `CollapsibleNavGroup` background colors theme-able ([#968](https://github.com/opensearch-project/oui/pull/968))
+- Make `CollapsibleNav` and `CollapsibleNavGroup` background colors theme-able ([#968](https://github.com/opensearch-project/oui/pull/968), [#1016](https://github.com/opensearch-project/oui/pull/1016))
 - Update next light theme primary color to #07827E ([#981](https://github.com/opensearch-project/oui/pull/981))
 - Add dismissible prop to OuiCallOut ([#985](https://github.com/opensearch-project/oui/pull/985))
+- Adjust $ouiFormInputGroupLabelBackground color in dark `next` theme ([#1005](https://github.com/opensearch-project/oui/pull/1005))
+- 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))
 
 ### 🐛 Bug Fixes
 
 - Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959))
 - Remove `calc` usage from SchemaItem styles ([#990](https://github.com/opensearch-project/oui/pull/990))
+- Add support for null types when deriving JSON from Sass variables ([#1019](https://github.com/opensearch-project/oui/pull/1019))
 
 ### 🚞 Infrastructure
 
@@ -33,6 +39,7 @@
 
 ### 📝 Documentation
 
+- Replace Avatar in favor of Icon in OuiFacetButtons example ([#987](https://github.com/opensearch-project/oui/pull/987))
 - Add dark prop toggles ([#910](https://github.com/opensearch-project/oui/pull/910))
 - Remove language from the form validation documentation that doesn't align with the updated guidelines ([#986](https://github.com/opensearch-project/oui/pull/986))
 

scripts/derive-sass-variable-types.js

@@ -61,6 +61,10 @@ async function deriveSassVariableTypes(
 function deriveValueType(extractedValue) {
   switch (typeof extractedValue) {
     case 'object':
+      if (extractedValue === null) {
+        return ts.createKeywordTypeNode(ts.SyntaxKind.NullKeyword);
+      }
+
       return ts.createTypeLiteralNode(
         Object.keys(extractedValue).map(key =>
           ts.createPropertySignature(

src-docs/src/views/call_out/info.js

@@ -26,7 +26,7 @@ export default () => {
         title="Callouts can be dismissed when dismissible is set to true unless the color is danger or warning. "
         iconType="wrench"
         dismissible
-        onDismissible={closeCallOut}
+        onDismiss={closeCallOut}
       />
     );
   }

src-docs/src/views/color_palette/color_palette.js

@@ -37,6 +37,16 @@ const customPalettes = [
     palette: ouiPaletteColorBlind({ rotations: 2 }),
     code: 'ouiPaletteColorBlind({rotations: 2})',
   },
+  {
+    title: 'Lots of colors, with the extremes last',
+    palette: ouiPaletteColorBlind({
+      rotations: 9,
+      direction: 'both',
+      order: 'middle-out',
+    }),
+    code:
+      "ouiPaletteColorBlind({ rotations: 9, direction: 'both', order: 'middle-out' })",
+  },
   {
     title:
       'Series may have multiple metrics and so the colors must coordinate but be distinguishable',

src-docs/src/views/color_palette/props_info.js

@@ -21,9 +21,9 @@ export const qualitativePropsInfo = {
         },
         order: {
           description:
-            'Order similar colors as `group`s or just `append` each variation',
+            'Order similar colors as `group`s, just `append` each variation (from dark to light), or append from the `middle-out`',
           required: false,
-          type: { name: "'append' | 'group'" },
+          type: { name: "'append' | 'group' | 'middle-out'" },
           defaultValue: { value: "'append'" },
         },
         direction: {

src-docs/src/views/facet/facet.js

@@ -11,7 +11,7 @@
 
 import React from 'react';
 
-import { OuiFacetButton, OuiIcon, OuiAvatar } from '../../../../src/components';
+import { OuiFacetButton, OuiIcon } from '../../../../src/components';
 
 export default () => (
   <div>
@@ -29,10 +29,8 @@ export default () => (
       Disabled
     </OuiFacetButton>
     <br />
-    <OuiFacetButton
-      quantity={6}
-      icon={<OuiAvatar size="s" name="Avatar Jones" />}>
-      Avatar as icon
+    <OuiFacetButton quantity={6} icon={<OuiIcon type="tokenObject" />}>
+      Facet with Icon example
     </OuiFacetButton>
     <br />
     <OuiFacetButton quantity={6} isLoading>

src-docs/src/views/icon/icons.js

@@ -47,7 +47,10 @@ export const iconTypes = [
   'bug',
   'bullseye',
   'calendar',
+  'chatLeft',
+  'chatRight',
   'check',
+  'checkInCircleEmpty',
   'checkInCircleFilled',
   'cheer',
   'clock',
@@ -124,6 +127,10 @@ export const iconTypes = [
   'indexSettings',
   'inputOutput',
   'inspect',
+  'integrationGeneral',
+  'integrationObservability',
+  'integrationSearch',
+  'integrationSecurity',
   'invert',
   'ip',
   'keyboardShortcut',
@@ -186,6 +193,7 @@ export const iconTypes = [
   'questionInCircle',
   'quote',
   'radius',
+  'redeploy',
   'refresh',
   'reporter',
   'returnKey',
@@ -226,10 +234,13 @@ export const iconTypes = [
   'tag',
   'tear',
   'temperature',
+  'thumbsDown',
+  'thumbsUp',
   'timeline',
   'timeslider',
   'training',
   'trash',
+  'undeploy',
   'unfold',
   'unlink',
   'user',

src/components/call_out/__snapshots__/call_out.test.tsx.snap

@@ -45,7 +45,7 @@ exports[`OuiCallOut props color warning is rendered 1`] = `
 exports[`OuiCallOut props dismissible close callout after click 1`] = `
 <OuiCallOut
   dismissible={true}
-  onDismissible={[MockFunction]}
+  onDismiss={[MockFunction]}
   title="This is a callout"
 >
   <div

src/components/call_out/call_out.test.tsx

@@ -107,17 +107,17 @@ describe('OuiCallOut', () => {
       });
 
       it('close callout after click', () => {
-        const onDismissible = jest.fn();
+        const onDismiss = jest.fn();
         const component = mount(
           <OuiCallOut
             dismissible={true}
-            onDismissible={onDismissible}
+            onDismiss={onDismiss}
             title="This is a callout"
           />
         );
         expect(component).toMatchSnapshot();
         findTestSubject(component, 'closeCallOutButton').simulate('click');
-        expect(onDismissible).toBeCalled();
+        expect(onDismiss).toBeCalled();
       });
     });
   });

src/components/call_out/call_out.tsx

@@ -50,7 +50,7 @@ export type OuiCallOutProps = CommonProps &
     size?: Size;
     heading?: Heading;
     dismissible?: boolean;
-    onDismissible?: (
+    onDismiss?: (
       event?:
         | React.KeyboardEvent<HTMLDivElement>
         | React.MouseEvent<HTMLButtonElement>
@@ -83,7 +83,7 @@ export const OuiCallOut = forwardRef<HTMLDivElement, OuiCallOutProps>(
       className,
       heading,
       dismissible = false,
-      onDismissible = () => {},
+      onDismiss = () => {},
       ...rest
     },
     ref: Ref<HTMLDivElement>
@@ -114,7 +114,7 @@ export const OuiCallOut = forwardRef<HTMLDivElement, OuiCallOutProps>(
       dismissibleIcon = (
         <OuiButtonIcon
           iconType="cross"
-          onClick={onDismissible}
+          onClick={onDismiss}
           className="ouiCallOut__closeIcon"
           aria-label="dismissible_icon"
           data-test-subj="closeCallOutButton"

src/components/collapsible_nav/_collapsible_nav.scss

@@ -14,3 +14,7 @@
 .ouiCollapsibleNav:not([class*='push']) {
   z-index: $ouiZNavigation !important;
 }
+
+.ouiCollapsibleNav.ouiFlyout {
+  background-color: $ouiCollapsibleNavBackgroundColor;
+}