Merge branch 'main' into eslint-bump

CHANGELOG.md

@@ -9,18 +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
 
@@ -31,7 +39,9 @@
 
 ### 📝 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))
 
 ### 🛠 Maintenance
 

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

@@ -9,42 +9,65 @@
  * GitHub history for details.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { OuiCallOut, OuiLink, OuiSpacer } from '../../../../src/components';
 
-export default () => (
-  <div>
-    <OuiCallOut
-      title="Check it out, here's a really long title that will wrap within a narrower browser"
-      iconType="search">
-      <p>
-        Here&rsquo;s some stuff that you need to know. We can make this text
-        really long so that, when viewed within a browser that&rsquo;s fairly
-        narrow, it will wrap, too.
-      </p>
-      <p>
-        When possible, its recommended to include links to product{' '}
-        <OuiLink href="https://opensearch.org/docs/latest/">
-          documentation
-        </OuiLink>
-        .
-      </p>
-    </OuiCallOut>
-
-    <OuiSpacer size="m" />
-
-    <OuiCallOut
-      title="Callouts can exist as just a title. Simply omit the child content."
-      iconType="visVisualBuilder"
-    />
-
-    <OuiSpacer size="m" />
-
-    <OuiCallOut
-      size="s"
-      title="This is a small callout for more unintrusive but constant messages."
-      iconType="pin"
-    />
-  </div>
-);
+export default () => {
+  const [isCallOutVisible, setIsCallOutVisible] = useState(true);
+
+  const closeCallOut = () => setIsCallOutVisible(false);
+
+  let callOut;
+
+  if (isCallOutVisible) {
+    callOut = (
+      <OuiCallOut
+        title="Callouts can be dismissed when dismissible is set to true unless the color is danger or warning. "
+        iconType="wrench"
+        dismissible
+        onDismiss={closeCallOut}
+      />
+    );
+  }
+
+  return (
+    <div>
+      <OuiCallOut
+        title="Check it out, here's a really long title that will wrap within a narrower browser"
+        iconType="search">
+        <p>
+          Here&rsquo;s some stuff that you need to know. We can make this text
+          really long so that, when viewed within a browser that&rsquo;s fairly
+          narrow, it will wrap, too.
+        </p>
+        <p>
+          When possible, its recommended to include links to product{' '}
+          <OuiLink href="https://opensearch.org/docs/latest/">
+            documentation
+          </OuiLink>
+          .
+        </p>
+      </OuiCallOut>
+
+      <OuiSpacer size="m" />
+
+      <OuiCallOut
+        title="Callouts can exist as just a title. Simply omit the child content."
+        iconType="visVisualBuilder"
+      />
+
+      <OuiSpacer size="m" />
+
+      {callOut}
+
+      <OuiSpacer size="m" />
+
+      <OuiCallOut
+        size="s"
+        title="This is a small callout for more unintrusive but constant messages."
+        iconType="pin"
+      />
+    </div>
+  );
+};

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/form_validation/form_validation_example.js

@@ -37,9 +37,7 @@ export const FormValidationExample = {
           Validation is achieved by applying <OuiCode>isInvalid</OuiCode> and
           optionally error props onto the <strong>OuiForm</strong> or{' '}
           <strong>OuiFormRow</strong> components. Errors are optional and are
-          passed as an array in case you need to list more than one. You can
-          also hide the callout by passing
-          <OuiCode>invalidCallout=&ldquo;none&ldquo;</OuiCode>.
+          passed as an array in case you need to list more than one.
         </p>
       ),
       source: [

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

@@ -42,6 +42,92 @@ exports[`OuiCallOut props color warning is rendered 1`] = `
 />
 `;
 
+exports[`OuiCallOut props dismissible close callout after click 1`] = `
+<OuiCallOut
+  dismissible={true}
+  onDismiss={[MockFunction]}
+  title="This is a callout"
+>
+  <div
+    className="ouiCallOut ouiCallOut--primary"
+  >
+    <div
+      className="ouiCallOutHeader"
+    >
+      <span
+        className="ouiCallOutHeader__title"
+      >
+        This is a callout
+      </span>
+    </div>
+    <OuiButtonIcon
+      aria-label="dismissible_icon"
+      className="ouiCallOut__closeIcon"
+      data-test-subj="closeCallOutButton"
+      iconType="cross"
+      onClick={[MockFunction]}
+    >
+      <button
+        aria-label="dismissible_icon"
+        className="ouiButtonIcon ouiButtonIcon--primary ouiButtonIcon--empty ouiButtonIcon--xSmall ouiCallOut__closeIcon"
+        data-test-subj="closeCallOutButton"
+        disabled={false}
+        onClick={[MockFunction]}
+        type="button"
+      >
+        <OuiIcon
+          aria-hidden="true"
+          className="ouiButtonIcon__icon"
+          color="inherit"
+          size="m"
+          type="cross"
+        >
+          <span
+            aria-hidden="true"
+            className="ouiButtonIcon__icon"
+            color="inherit"
+            data-ouiicon-type="cross"
+            size="m"
+          />
+        </OuiIcon>
+      </button>
+    </OuiButtonIcon>
+  </div>
+</OuiCallOut>
+`;
+
+exports[`OuiCallOut props dismissible is not rendered when in danger color 1`] = `
+<div
+  class="ouiCallOut ouiCallOut--danger"
+/>
+`;
+
+exports[`OuiCallOut props dismissible is not rendered when in warning color 1`] = `
+<div
+  class="ouiCallOut ouiCallOut--warning"
+/>
+`;
+
+exports[`OuiCallOut props dismissible is rendered when set to true 1`] = `
+<div
+  class="ouiCallOut ouiCallOut--primary"
+>
+  <button
+    aria-label="dismissible_icon"
+    class="ouiButtonIcon ouiButtonIcon--primary ouiButtonIcon--empty ouiButtonIcon--xSmall ouiCallOut__closeIcon"
+    data-test-subj="closeCallOutButton"
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="ouiButtonIcon__icon"
+      color="inherit"
+      data-ouiicon-type="cross"
+    />
+  </button>
+</div>
+`;
+
 exports[`OuiCallOut props heading h1 is rendered 1`] = `
 <div
   class="ouiCallOut ouiCallOut--primary"

src/components/call_out/_call_out.scss

@@ -12,6 +12,7 @@
 .ouiCallOut {
   padding: $ouiSize;
   border-left: $ouiSizeXS / 2 solid transparent;
+  position: relative;
 
   &.ouiCallOut--small {
     padding: $ouiSizeS;
@@ -27,6 +28,12 @@
     @include ouiCallOutTitle;
     margin-bottom: 0; // In case it's nested inside OuiText
   }
+
+  .ouiCallOut__closeIcon {
+    position: absolute;
+    right: $ouiSizeS / 2;
+    top: 0;
+  }
 }
 
 // smaller font size for headers in small callout
@@ -47,6 +54,10 @@
     .ouiCallOutHeader__title {
       color: ouiCallOutColor($name, 'foreground');
     }
+
+    .ouiCallOut__closeIcon {
+      fill: ouiCallOutColor($name, 'foreground');
+    }
   }
 }