Make sidenav coloring more consistant for open nodes

CHANGELOG.md

@@ -1,8 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Adjusted coloring of `EuiSideNav` to be more consistent across open states ([#3926](https://github.com/elastic/eui/pull/3926))
+
 **Bug fixes**
 
 - Fixed bug in `EuiBasicTable` not fully expanding tall rows (height > 1000px) ([#3855](https://github.com/elastic/eui/pull/3855))
+- Added `regressionJob`, `outlierDetectionJob` and `classificationJob` icons to Machine Learning icon set, updated others. ([#3931](https://github.com/elastic/eui/pull/3931))
 
 ## [`28.2.0`](https://github.com/elastic/eui/tree/v28.2.0)
 

scripts/babel/react-docgen-typescript.js

@@ -103,7 +103,7 @@ module.exports = function({ types }) {
           if (docgenResults.length !== 0) {
             docgenResults.forEach(function(docgenResult) {
               const exportName = docgenResult.displayName;
-              docgenResult.extends = componentExtends;
+              docgenResult.extendedInterfaces = componentExtends;
               path.node.body.push(
                 template.default.ast(`          
               try{  
@@ -247,11 +247,8 @@ function filterProp(
   if (prop.parent) {
     //Check if props are extended from other node module
     if (whiteListedParent.includes(prop.parent.name)) return true;
-    if (
-      prop.parent.name === 'DOMAttributes' &&
-      !componentExtends.includes('DOMAttributes')
-    ) {
-      componentExtends.push('DOMAttributes');
+    if (!componentExtends.includes(prop.parent.name)) {
+      componentExtends.push(prop.parent.name);
     }
     if (prop.name.includes(whiteListedProps)) {
       return true;

src-docs/src/components/guide_section/_guide_section.scss

@@ -7,3 +7,8 @@
 .guideSection__space {
   height: $euiSizeL;
 }
+
+.guideSection__tableCodeBlock {
+  padding-left: $euiSizeXS;
+  padding-right: $euiSizeXS;
+}

src-docs/src/components/guide_section/guide_section.js

@@ -19,12 +19,16 @@ import {
   EuiTitle,
   EuiLink,
   EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '../../../../src/components';
 
 import { CodeSandboxLink } from '../codesandbox';
 
 import { cleanEuiImports } from '../../services';
 
+import { extendedTypesInfo } from './guide_section_extends';
+
 export const markup = text => {
   const regex = /(#[a-zA-Z]+)|(`[^`]+`)/g;
   return text.split('\n').map(token => {
@@ -54,7 +58,7 @@ export const markup = text => {
       }
       return token;
     });
-    return [...values, <br />];
+    return [...values, <br key="lineBreak" />];
   });
 };
 
@@ -289,7 +293,7 @@ export class GuideSection extends Component {
     const docgenInfo = Array.isArray(component.__docgenInfo)
       ? component.__docgenInfo[0]
       : component.__docgenInfo;
-    const { description, props } = docgenInfo;
+    const { description, props, extendedInterfaces } = docgenInfo;
 
     if (!props && !description) {
       return;
@@ -305,6 +309,12 @@ export class GuideSection extends Component {
         type,
       } = props[propName];
 
+      const codeBlockProps = {
+        className: 'guideSection__tableCodeBlock',
+        paddingSize: 'none',
+        language: 'ts',
+      };
+
       let humanizedName = (
         <strong className="eui-textBreakNormal">{propName}</strong>
       );
@@ -320,28 +330,70 @@ export class GuideSection extends Component {
 
       const humanizedType = humanizeType(type);
 
+      const functionMatches = [
+        ...humanizedType.matchAll(/\([^=]*\) =>\s\w*\)*/g),
+      ];
+      const types = humanizedType.split(/\([^=]*\) =>\s\w*\)*/);
+
       const typeMarkup = (
         <span className="eui-textBreakNormal">{markup(humanizedType)}</span>
       );
       const descriptionMarkup = markup(propDescription);
       let defaultValueMarkup = '';
       if (defaultValue) {
         defaultValueMarkup = [
-          <EuiCode key={`defaultValue-${propName}`}>
-            <span className="eui-textBreakNormal">{defaultValue.value}</span>
-          </EuiCode>,
+          <EuiCodeBlock {...codeBlockProps} key={`defaultValue-${propName}`}>
+            {defaultValue.value}
+          </EuiCodeBlock>,
         ];
         if (defaultValue.comment) {
           defaultValueMarkup.push(`(${defaultValue.comment})`);
         }
       }
+
+      let defaultTypeCell = (
+        <EuiTableRowCell key="type" header="Type" textOnly={false}>
+          <EuiCodeBlock {...codeBlockProps}>{typeMarkup}</EuiCodeBlock>
+        </EuiTableRowCell>
+      );
+      if (functionMatches.length > 0) {
+        const elements = [];
+        let j = 0;
+        for (let i = 0; i < types.length; i++) {
+          if (functionMatches[j]) {
+            elements.push(
+              <Fragment key={`type-${i}`}>
+                {types[i]} <br />
+              </Fragment>
+            );
+            elements.push(
+              <Fragment key={`function-${i}`}>
+                {functionMatches[j][0]} <br />
+              </Fragment>
+            );
+            j++;
+          } else {
+            elements.push(
+              <Fragment key={`type-${i}`}>
+                {types[i]} <br />
+              </Fragment>
+            );
+          }
+        }
+        defaultTypeCell = (
+          <EuiTableRowCell key="type" header="Type" textOnly={false}>
+            <EuiCodeBlock whiteSpace="pre" {...codeBlockProps}>
+              {elements}
+            </EuiCodeBlock>
+          </EuiTableRowCell>
+        );
+      }
+
       const cells = [
         <EuiTableRowCell key="name" header="Prop">
           {humanizedName}
         </EuiTableRowCell>,
-        <EuiTableRowCell key="type" header="Type">
-          <EuiCode>{typeMarkup}</EuiCode>
-        </EuiTableRowCell>,
+        defaultTypeCell,
         <EuiTableRowCell
           key="defaultValue"
           header="Default"
@@ -360,7 +412,22 @@ export class GuideSection extends Component {
       return <EuiTableRow key={propName}>{cells}</EuiTableRow>;
     });
 
-    const title = <span id={componentName}>{componentName}</span>;
+    const extendedTypes = extendedInterfaces
+      ? extendedInterfaces.filter(type => !!extendedTypesInfo[type])
+      : [];
+    // if there is an HTMLAttributes type present among others, remove HTMLAttributes
+    if (extendedTypes.includes('HTMLAttributes') && extendedTypes.length > 1) {
+      const htmlAttributesIndex = extendedTypes.indexOf('HTMLAttributes');
+      extendedTypes.splice(htmlAttributesIndex, 1);
+    }
+    const extendedTypesElements = extendedTypes.map((type, index) => (
+      <Fragment key={`extendedTypeValue-${extendedTypesInfo[type].name}`}>
+        <EuiLink href={extendedTypesInfo[type].url}>
+          {extendedTypesInfo[type].name}
+        </EuiLink>
+        {index + 1 < extendedTypes.length && ', '}
+      </Fragment>
+    ));
 
     let descriptionElement;
 
@@ -405,9 +472,23 @@ export class GuideSection extends Component {
 
     return [
       <EuiSpacer size="m" key={`propsSpacer-${componentName}-1`} />,
-      <EuiTitle size="s" key={`propsName-${componentName}`}>
-        <h3>{title}</h3>
-      </EuiTitle>,
+      <EuiFlexGroup
+        key={`propsName-${componentName}`}
+        alignItems="baseline"
+        wrap>
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="s">
+            <h3>{componentName}</h3>
+          </EuiTitle>
+        </EuiFlexItem>
+        {extendedTypesElements.length > 0 && (
+          <EuiFlexItem>
+            <EuiText size="s">
+              <p>[ extends {extendedTypesElements} ]</p>
+            </EuiText>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>,
       <EuiSpacer size="s" key={`propsSpacer-${componentName}-2`} />,
       descriptionElement,
       table,

src-docs/src/components/guide_section/guide_section_extends.js

@@ -0,0 +1,27 @@
+export const extendedTypesInfo = {
+  // HTMLAttributes is removed from display if any of the following elements also exist
+  HTMLAttributes: {
+    name: 'HTMLElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement',
+  },
+  SelectHTMLAttributes: {
+    name: 'HTMLSelectElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement',
+  },
+  TextareaHTMLAttributes: {
+    name: 'HTMLTextAreaElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement',
+  },
+  InputHTMLAttributes: {
+    name: 'HTMLInputElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement',
+  },
+  AnchorHTMLAttributes: {
+    name: 'HTMLAnchorElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement',
+  },
+  ButtonHTMLAttributes: {
+    name: 'HTMLButtonElement',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement',
+  },
+};

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

@@ -23,8 +23,11 @@ import {
 const iconTypes = [
   'dataVisualizer',
   'createAdvancedJob',
+  'classificationJob',
   'createMultiMetricJob',
+  'outlierDetectionJob',
   'createPopulationJob',
+  'regressionJob',
   'createSingleMetricJob',
 ];
 

src/components/code/_code_block.scss

@@ -1,4 +1,5 @@
 .euiCodeBlock {
+  max-width: 100%;
   display: block;
   position: relative;
   background: $euiCodeBlockBackgroundColor;

src/components/form/select/select.tsx

@@ -37,7 +37,10 @@ export interface EuiSelectOption
   text: React.ReactNode;
 }
 
-export type EuiSelectProps = SelectHTMLAttributes<HTMLSelectElement> &
+export type EuiSelectProps = Omit<
+  SelectHTMLAttributes<HTMLSelectElement>,
+  'value'
+> &
   CommonProps & {
     options?: EuiSelectOption[];
     isInvalid?: boolean;
@@ -49,6 +52,7 @@ export type EuiSelectProps = SelectHTMLAttributes<HTMLSelectElement> &
      */
     hasNoInitialSelection?: boolean;
     inputRef?: Ref<HTMLSelectElement>;
+    value?: string | number;
 
     /**
      * when `true` creates a shorter height input