Fix various nested componentProps to accept the css prop type (#6211

)

* [Types] Fix various nested *Props types not accepting the `css` prop

- to do so, they need to explicitly extend CommonProps

* [Docs][Tech debt] Convert EuiSelectableTemplateSitewide custom CSS to Emotion

* changelog

src-docs/src/views/_index.scss

@@ -11,7 +11,6 @@ $guideDemoHighlightColor: transparentize($euiColorPrimary, .9);
 @import './horizontal_rule/horizontal_rule';
 @import './page_template/page';
 @import './notification_event/notification_event';
-@import './selectable/selectable_templates/sitewide';
 @import './spacer/spacer';
 @import './suggest/index';
 @import './text/text_scaling';

src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { css } from '@emotion/react';
 
 import {
   EuiFlexGroup,
@@ -9,6 +10,7 @@ import {
   EuiButton,
   EuiSelectableTemplateSitewide,
   EuiSelectableTemplateSitewideOption,
+  useEuiTheme,
 } from '../../../../../src';
 
 export default () => {
@@ -85,6 +87,8 @@ export default () => {
     if (!clickedItem) return;
   };
 
+  const { euiTheme } = useEuiTheme();
+
   return (
     <EuiSelectableTemplateSitewide
       isLoading={isLoading}
@@ -98,6 +102,12 @@ export default () => {
       }}
       listProps={{
         className: 'customListClass',
+        css: css`
+          .euiSelectableTemplateSitewide__optionMeta--PINK {
+            font-weight: ${euiTheme.font.weight.medium};
+            color: ${euiTheme.colors.accentText};
+          }
+        `,
       }}
       popoverProps={{
         className: 'customPopoverClass',

src/components/button/button_display/_button_display.tsx

@@ -66,7 +66,7 @@ export interface EuiButtonDisplayCommonProps
   /**
    * Object of props passed to the <span/> wrapping the button's content
    */
-  contentProps?: EuiButtonDisplayContentType;
+  contentProps?: CommonProps & EuiButtonDisplayContentType;
   style?: CSSProperties;
 }
 

src/components/button/button_empty/button_empty.tsx

@@ -86,7 +86,7 @@ export interface CommonEuiButtonEmptyProps
   /**
    * Object of props passed to the <span/> wrapping the button's content
    */
-  contentProps?: EuiButtonContentType;
+  contentProps?: CommonProps & EuiButtonContentType;
 }
 
 type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>;

src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx

@@ -14,6 +14,7 @@ import React, {
 import classNames from 'classnames';
 import { LocaleSpecifier } from 'moment'; // eslint-disable-line import/named
 
+import { CommonProps } from '../../../common';
 import { useEuiI18n } from '../../../i18n';
 import { EuiPopover, EuiPopoverProps } from '../../../popover';
 
@@ -26,7 +27,7 @@ import {
 
 export interface EuiDatePopoverButtonProps {
   className?: string;
-  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  buttonProps?: CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
   dateFormat: string;
   isDisabled?: boolean;
   isInvalid?: boolean;

src/components/expression/expression.tsx

@@ -41,12 +41,12 @@ export type EuiExpressionProps = CommonProps & {
    * First part of the expression
    */
   description: ReactNode;
-  descriptionProps?: HTMLAttributes<HTMLSpanElement>;
+  descriptionProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
   /**
    * Second part of the expression
    */
   value?: ReactNode;
-  valueProps?: HTMLAttributes<HTMLSpanElement>;
+  valueProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
   /**
    * Color of the `description`
    */

src/components/image/image_types.ts

@@ -78,7 +78,7 @@ export type EuiImageProps = CommonProps &
     /**
      * Props to add to the wrapping figure element
      */
-    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    wrapperProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
   };
 
 export type EuiImageWrapperProps = Pick<

src/components/page/page_section/page_section.tsx

@@ -52,7 +52,7 @@ export type EuiPageSectionProps = CommonProps &
     /**
      * Passed down to the div wrapper of the section contents
      */
-    contentProps?: HTMLAttributes<HTMLDivElement>;
+    contentProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
     /**
      * Sets which HTML element to render.
      */

src/components/progress/progress.tsx

@@ -76,7 +76,7 @@ type Determinate = EuiProgressProps &
     /**
      * Object of props passed to the <span/> wrapping the determinate progress's label
      */
-    labelProps?: HTMLAttributes<HTMLSpanElement>;
+    labelProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
   };
 
 export const EuiProgress: FunctionComponent<ExclusiveUnion<

src/components/resizable_container/resizable_panel.tsx

@@ -140,7 +140,7 @@ export interface EuiResizablePanelProps
   /**
    * Props to add to the wrapping `.euiResizablePanel` div
    */
-  wrapperProps?: HTMLAttributes<HTMLDivElement>;
+  wrapperProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
   /**
    * Padding to add directly to the wrapping `.euiResizablePanel` div
    * Gives space around the actual panel.

src/components/side_nav/side_nav.tsx

@@ -48,7 +48,7 @@ export type EuiSideNavProps<T = {}> = T &
     /**
      * Adds a couple extra #EuiSideNavHeading props and extends the props of EuiTitle that wraps the `heading`
      */
-    headingProps?: EuiSideNavHeadingProps;
+    headingProps?: CommonProps & EuiSideNavHeadingProps;
     /**
      * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
      */

upcoming_changelogs/6211.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed various nested `componentProps` throwing type errors on the `css` prop