From 7239acb114552a668fd6816ec43cd9dcc04963ef Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 6 Sep 2022 12:07:34 -0700 Subject: [PATCH 1/3] [Types] Fix various nested *Props types not accepting the `css` prop - to do so, they need to explicitly extend CommonProps --- src/components/button/button_display/_button_display.tsx | 2 +- src/components/button/button_empty/button_empty.tsx | 2 +- .../super_date_picker/date_popover/date_popover_button.tsx | 3 ++- src/components/expression/expression.tsx | 4 ++-- src/components/image/image_types.ts | 2 +- src/components/page/page_section/page_section.tsx | 2 +- src/components/progress/progress.tsx | 2 +- src/components/resizable_container/resizable_panel.tsx | 2 +- src/components/side_nav/side_nav.tsx | 2 +- 9 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx index ef25eef0b86..30502e588ea 100644 --- a/src/components/button/button_display/_button_display.tsx +++ b/src/components/button/button_display/_button_display.tsx @@ -66,7 +66,7 @@ export interface EuiButtonDisplayCommonProps /** * Object of props passed to the wrapping the button's content */ - contentProps?: EuiButtonDisplayContentType; + contentProps?: CommonProps & EuiButtonDisplayContentType; style?: CSSProperties; } diff --git a/src/components/button/button_empty/button_empty.tsx b/src/components/button/button_empty/button_empty.tsx index 68a82fc6bce..98d02064411 100644 --- a/src/components/button/button_empty/button_empty.tsx +++ b/src/components/button/button_empty/button_empty.tsx @@ -86,7 +86,7 @@ export interface CommonEuiButtonEmptyProps /** * Object of props passed to the wrapping the button's content */ - contentProps?: EuiButtonContentType; + contentProps?: CommonProps & EuiButtonContentType; } type EuiButtonEmptyPropsForAnchor = PropsForAnchor; diff --git a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx b/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx index a12b78b630a..27fc5dcdee5 100644 --- a/src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx +++ b/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; + buttonProps?: CommonProps & ButtonHTMLAttributes; dateFormat: string; isDisabled?: boolean; isInvalid?: boolean; diff --git a/src/components/expression/expression.tsx b/src/components/expression/expression.tsx index 1df112dc78a..2c7d9c1a0cf 100644 --- a/src/components/expression/expression.tsx +++ b/src/components/expression/expression.tsx @@ -41,12 +41,12 @@ export type EuiExpressionProps = CommonProps & { * First part of the expression */ description: ReactNode; - descriptionProps?: HTMLAttributes; + descriptionProps?: CommonProps & HTMLAttributes; /** * Second part of the expression */ value?: ReactNode; - valueProps?: HTMLAttributes; + valueProps?: CommonProps & HTMLAttributes; /** * Color of the `description` */ diff --git a/src/components/image/image_types.ts b/src/components/image/image_types.ts index 14c41374dde..bca10db6303 100644 --- a/src/components/image/image_types.ts +++ b/src/components/image/image_types.ts @@ -78,7 +78,7 @@ export type EuiImageProps = CommonProps & /** * Props to add to the wrapping figure element */ - wrapperProps?: HTMLAttributes; + wrapperProps?: CommonProps & HTMLAttributes; }; export type EuiImageWrapperProps = Pick< diff --git a/src/components/page/page_section/page_section.tsx b/src/components/page/page_section/page_section.tsx index 25cf363d648..a3dfffadcbe 100644 --- a/src/components/page/page_section/page_section.tsx +++ b/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; + contentProps?: CommonProps & HTMLAttributes; /** * Sets which HTML element to render. */ diff --git a/src/components/progress/progress.tsx b/src/components/progress/progress.tsx index 209adb2967e..b3186c29034 100644 --- a/src/components/progress/progress.tsx +++ b/src/components/progress/progress.tsx @@ -76,7 +76,7 @@ type Determinate = EuiProgressProps & /** * Object of props passed to the wrapping the determinate progress's label */ - labelProps?: HTMLAttributes; + labelProps?: CommonProps & HTMLAttributes; }; export const EuiProgress: FunctionComponent; + wrapperProps?: CommonProps & HTMLAttributes; /** * Padding to add directly to the wrapping `.euiResizablePanel` div * Gives space around the actual panel. diff --git a/src/components/side_nav/side_nav.tsx b/src/components/side_nav/side_nav.tsx index 5a2fdf51bb7..996057856b2 100644 --- a/src/components/side_nav/side_nav.tsx +++ b/src/components/side_nav/side_nav.tsx @@ -48,7 +48,7 @@ export type EuiSideNavProps = 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. */ From 599b85ce9dd651ee036c32a30583533be4d8d20f Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 6 Sep 2022 12:19:41 -0700 Subject: [PATCH 2/3] [Docs][Tech debt] Convert EuiSelectableTemplateSitewide custom CSS to Emotion --- src-docs/src/views/_index.scss | 1 - .../selectable/selectable_templates/_sitewide.scss | 4 ---- .../selectable_templates/sitewide_search.tsx | 10 ++++++++++ 3 files changed, 10 insertions(+), 5 deletions(-) delete mode 100644 src-docs/src/views/selectable/selectable_templates/_sitewide.scss diff --git a/src-docs/src/views/_index.scss b/src-docs/src/views/_index.scss index 57f36def832..d2d7e586ba0 100644 --- a/src-docs/src/views/_index.scss +++ b/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'; diff --git a/src-docs/src/views/selectable/selectable_templates/_sitewide.scss b/src-docs/src/views/selectable/selectable_templates/_sitewide.scss deleted file mode 100644 index 97f7c59c4f3..00000000000 --- a/src-docs/src/views/selectable/selectable_templates/_sitewide.scss +++ /dev/null @@ -1,4 +0,0 @@ -.euiSelectableTemplateSitewide__optionMeta--PINK { - font-weight: $euiFontWeightMedium; - color: $euiColorAccentText; -} diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx index bd853142c55..c7205a5470f 100644 --- a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx +++ b/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 ( { }} listProps={{ className: 'customListClass', + css: css` + .euiSelectableTemplateSitewide__optionMeta--PINK { + font-weight: ${euiTheme.font.weight.medium}; + color: ${euiTheme.colors.accentText}; + } + `, }} popoverProps={{ className: 'customPopoverClass', From e5e185a091e847b406cfdf0e3a1c903b366e2097 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 6 Sep 2022 12:26:24 -0700 Subject: [PATCH 3/3] changelog --- upcoming_changelogs/6211.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 upcoming_changelogs/6211.md diff --git a/upcoming_changelogs/6211.md b/upcoming_changelogs/6211.md new file mode 100644 index 00000000000..2b2c4d43f81 --- /dev/null +++ b/upcoming_changelogs/6211.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed various nested `componentProps` throwing type errors on the `css` prop