From 1ed22be80636c1f5c6cc2eaaa4ec6306b7185bc0 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 25 Oct 2021 14:47:35 -0500 Subject: [PATCH 01/22] remove betaBadgeLabel, betaBadgeTooltipContent, betaBadgeTitle props from EuiCard --- src-docs/src/views/card/card_beta.js | 14 ++++++------ src-docs/src/views/card/card_display.js | 7 ++++-- src-docs/src/views/card/card_example.js | 16 ++++++++------ src-docs/src/views/card/playground.js | 5 ----- src/components/card/card.test.tsx | 2 +- src/components/card/card.tsx | 29 ++++--------------------- 6 files changed, 26 insertions(+), 47 deletions(-) diff --git a/src-docs/src/views/card/card_beta.js b/src-docs/src/views/card/card_beta.js index 610eb50d04b..2deda266cc4 100644 --- a/src-docs/src/views/card/card_beta.js +++ b/src-docs/src/views/card/card_beta.js @@ -17,12 +17,12 @@ const cardNodes = icons.map(function (item, index) { icon={} title={`Kibana ${item}`} description="Example of a card's description. Stick to one or two sentences." - betaBadgeLabel={badges[index]} - betaBadgeTooltipContent={ - badges[index] + betaBadgeProps={{ + label: badges[index], + tooltipContent: badges[index] ? 'This module is not GA. Please help us by reporting any bugs.' - : undefined - } + : undefined, + }} onClick={() => {}} /> @@ -41,9 +41,9 @@ export default () => ( betaBadgeProps={{ href: 'http://www.elastic.co/subscriptions', target: '_blank', + label: 'Basic', + tooltipContent: 'This feature requires a Basic License', }} - betaBadgeLabel="Basic" - betaBadgeTooltipContent="This feature requires a Basic License" onClick={() => {}} /> diff --git a/src-docs/src/views/card/card_display.js b/src-docs/src/views/card/card_display.js index ba04f40435a..5e6cbedf567 100644 --- a/src-docs/src/views/card/card_display.js +++ b/src-docs/src/views/card/card_display.js @@ -38,8 +38,11 @@ export default () => ( title="Transparent" display="transparent" description="This one doesn't have a background color anymore." - betaBadgeLabel="Beta" - betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs." + betaBadgeProps={{ + label: 'Beta', + tooltipContent: + 'This module is not GA. Please help us by reporting any bugs.', + }} onClick={() => {}} /> diff --git a/src-docs/src/views/card/card_example.js b/src-docs/src/views/card/card_example.js index 6cb0cbd2817..f99a8d7c973 100644 --- a/src-docs/src/views/card/card_example.js +++ b/src-docs/src/views/card/card_example.js @@ -242,11 +242,11 @@ export const CardExample = { text: (

If the card links to or references a module that is not GA (beta, lab, - etc), you can add a betaBadgeLabel and{' '} - betaBadgeTooltipContent to the card and it will - properly create and position an EuiBetaBadge. If you - want to change the title of the tooltip, supply a{' '} - betaBadgeTitle prop. + etc), you can add a betaBadgeProps.label and{' '} + betaBadgeProps.tooltipContent to the card and it + will properly create and position an EuiBetaBadge. If + you want to change the title of the tooltip, supply a{' '} + betaBadgeProps.title prop.

), props: { EuiCard }, @@ -259,8 +259,10 @@ export const CardExample = { title="title" description="description" onClick={handleClick} - betaBadgeLabel="betaBadgeLabel" - betaBadgeTooltipContent={betaBadgeTooltipContent} + betaBadgeProps={{ + label: 'betaBadgeLabel', + toolTipContent: 'betaBadgeTooltipContent', + }} />`, }, { diff --git a/src-docs/src/views/card/playground.js b/src-docs/src/views/card/playground.js index d31857d4d88..3e0340ae6d9 100644 --- a/src-docs/src/views/card/playground.js +++ b/src-docs/src/views/card/playground.js @@ -52,11 +52,6 @@ export const cardConfig = () => { type: PropTypes.String, }; - propsToUse.betaBadgeTooltipContent = { - ...propsToUse.betaBadgeTooltipContent, - type: PropTypes.String, - }; - propsToUse.onClick = simulateFunction(propsToUse.onClick); propsToUse.display = createOptionalEnum(propsToUse.display); diff --git a/src/components/card/card.test.tsx b/src/components/card/card.test.tsx index e92e74159f6..51f26fc9e84 100644 --- a/src/components/card/card.test.tsx +++ b/src/components/card/card.test.tsx @@ -292,8 +292,8 @@ describe('EuiCard', () => { description="Card description" betaBadgeProps={{ href: 'http://www.elastic.co/', + label: 'Link', }} - betaBadgeLabel="Link" /> ); diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index d09f94406bb..b4ff2d21861 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -121,24 +121,9 @@ export type EuiCardProps = Omit & href?: string; target?: string; rel?: string; - - /** - * Add a badge to the card to label it as "Beta" or other non-GA state - * **DEPRECATED: Use `betaBadgeProps.label` instead.** - */ - betaBadgeLabel?: string; - - /** - * Add a description to the beta badge (will appear in a tooltip) - * **DEPRECATED: Use `betaBadgeProps.tooltipContent` instead.** - */ - betaBadgeTooltipContent?: ReactNode; - /** - * Optional title will be supplied as tooltip title or title attribute otherwise the label will be used. - * **DEPRECATED: Use `betaBadgeProps.title` instead.** + * Props to be passed through to the EuiBetaBadge */ - betaBadgeTitle?: string; betaBadgeProps?: Partial; /** * Matches to the color property of EuiPanel. If defined, removes any border & shadow. @@ -186,9 +171,6 @@ export const EuiCard: FunctionComponent = ({ rel, target, textAlign = 'center', - betaBadgeLabel, - betaBadgeTooltipContent, - betaBadgeTitle, betaBadgeProps, layout = 'vertical', selectable, @@ -234,10 +216,10 @@ export const EuiCard: FunctionComponent = ({ layoutToClassNameMap[layout], { 'euiCard--isClickable': isClickable, - 'euiCard--hasBetaBadge': betaBadgeLabel, + 'euiCard--hasBetaBadge': betaBadgeProps?.label, 'euiCard--hasIcon': icon, 'euiCard--isSelectable': selectable, - 'euiCard-isSelected': selectable && selectable.isSelected, + 'euiCard-isSelected': selectable?.isSelected, 'euiCard-isDisabled': isDisabled, }, selectableColorClass, @@ -287,16 +269,13 @@ export const EuiCard: FunctionComponent = ({ let optionalBetaBadge; let optionalBetaBadgeID = ''; - if (betaBadgeLabel) { + if (betaBadgeProps?.label) { optionalBetaBadgeID = `${ariaId}BetaBadge`; optionalBetaBadge = ( Date: Mon, 25 Oct 2021 14:52:08 -0500 Subject: [PATCH 02/22] remove panelPaddingSize from EuiPageContent --- src/components/page/page_content/page_content.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/components/page/page_content/page_content.tsx b/src/components/page/page_content/page_content.tsx index 596513503f7..22effaccf2f 100644 --- a/src/components/page/page_content/page_content.tsx +++ b/src/components/page/page_content/page_content.tsx @@ -10,12 +10,7 @@ import React, { FunctionComponent } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../../common'; -import { - EuiPanel, - PanelPaddingSize, - _EuiPanelProps, - _EuiPanelDivlike, -} from '../../panel/panel'; +import { EuiPanel, _EuiPanelProps, _EuiPanelDivlike } from '../../panel/panel'; import { HTMLAttributes } from 'enzyme'; export type EuiPageContentVerticalPositions = 'center'; @@ -37,10 +32,6 @@ export type EuiPageContentProps = CommonProps & // Use only the div properties of EuiPanel (not button) _EuiPanelProps & Omit<_EuiPanelDivlike, 'onClick' | 'role'> & { - /** - * **DEPRECATED: use `paddingSize` instead.** - */ - panelPaddingSize?: PanelPaddingSize; verticalPosition?: EuiPageContentVerticalPositions; horizontalPosition?: EuiPageContentHorizontalPositions; /** @@ -53,7 +44,6 @@ export type EuiPageContentProps = CommonProps & export const EuiPageContent: FunctionComponent = ({ verticalPosition, horizontalPosition, - panelPaddingSize, paddingSize = 'l', borderRadius, children, @@ -79,7 +69,7 @@ export const EuiPageContent: FunctionComponent = ({ return ( Date: Mon, 25 Oct 2021 15:18:15 -0500 Subject: [PATCH 03/22] remove secondary color prop options --- .../src/views/guidelines/accessibility.js | 6 +- src-docs/src/views/health/playground.js | 1 - .../theme/_json/eui_theme_amsterdam_dark.json | 6 - .../_json/eui_theme_amsterdam_light.json | 6 - .../src/views/theme/_json/eui_theme_dark.json | 6 - .../views/theme/_json/eui_theme_light.json | 6 - .../badge/__snapshots__/badge.test.tsx.snap | 34 ---- src/components/badge/badge.tsx | 2 - .../button/__snapshots__/button.test.tsx.snap | 15 -- src/components/button/button.tsx | 3 - .../__snapshots__/button_group.test.tsx.snap | 177 ------------------ .../__snapshots__/expression.test.tsx.snap | 20 -- src/components/expression/_variables.scss | 1 - src/components/expression/expression.tsx | 2 - .../health/__snapshots__/health.test.tsx.snap | 22 --- src/components/health/health.tsx | 1 - .../icon/__snapshots__/icon.test.tsx.snap | 17 -- src/components/icon/_variables.scss | 1 - src/components/icon/icon.tsx | 2 - .../link/__snapshots__/link.test.tsx.snap | 7 - src/components/link/_variables.scss | 1 - src/components/link/link.tsx | 4 - .../markdown_editor/_markdown_format.scss | 1 - .../notification/notification_event_meta.tsx | 1 - .../__snapshots__/progress.test.tsx.snap | 6 - src/components/progress/_variables.scss | 1 - src/components/progress/progress.tsx | 4 - .../stat/__snapshots__/stat.test.tsx.snap | 31 +-- src/components/stat/_stat.scss | 1 - src/components/stat/stat.tsx | 2 - src/components/text/_text_color.scss | 1 - src/components/text/text.tsx | 1 - src/components/text/text_color.tsx | 2 - src/global_styling/variables/_buttons.scss | 1 - 34 files changed, 5 insertions(+), 387 deletions(-) diff --git a/src-docs/src/views/guidelines/accessibility.js b/src-docs/src/views/guidelines/accessibility.js index 68f05e08882..c02bc0defe2 100644 --- a/src-docs/src/views/guidelines/accessibility.js +++ b/src-docs/src/views/guidelines/accessibility.js @@ -348,7 +348,7 @@ export default { text={ <> Though unique, this does not provide enough context.
{' '} - + Use: Watchers - Management - Kibana @@ -367,7 +367,7 @@ export default { <> Although it provides all the context, putting the most important bit at the end is hard to find.
{' '} - + Use: Spaces - Management - Kibana @@ -386,7 +386,7 @@ export default { <> Although this provides all the context and in a good order, a title is not the place for any extra words.
{' '} - + Use: Reporting - Management - Kibana diff --git a/src-docs/src/views/health/playground.js b/src-docs/src/views/health/playground.js index cc39832201d..7108c401371 100644 --- a/src-docs/src/views/health/playground.js +++ b/src-docs/src/views/health/playground.js @@ -19,7 +19,6 @@ export default () => { options: { default: 'default', primary: 'primary', - secondary: 'secondary', success: 'success', accent: 'accent', warning: 'warning', diff --git a/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json b/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json index ef67125e0b9..eeab517abb1 100644 --- a/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json +++ b/src-docs/src/views/theme/_json/eui_theme_amsterdam_dark.json @@ -119,7 +119,6 @@ "subdued": "#7a7f89", "primary": "#36a2ef", "success": "#7dded8", - "secondary": "#7dded8", "warning": "#f3d371", "danger": "#f86b63", "accent": "#f68fbe" @@ -212,7 +211,6 @@ "danger": "#f86b63", "ghost": "#ffffff", "primary": "#36a2ef", - "secondary": "#7dded8", "success": "#7dded8", "subdued": "#7a7f89", "text": "#dfe5ef", @@ -231,7 +229,6 @@ "euiLinkColors": { "subdued": "#7a7f89", "primary": "#36a2ef", - "secondary": "#7dded8", "success": "#7dded8", "accent": "#f68fbe", "warning": "#f3d371", @@ -270,7 +267,6 @@ }, "euiProgressColors": { "primary": "#36a2ef", - "secondary": "#7dded8", "success": "#7dded8", "warning": "#f3d371", "danger": "#f86b63", @@ -362,7 +358,6 @@ "euiTextColors": { "default": "#dfe5ef", "subdued": "#7a7f89", - "secondary": "#7dded8", "success": "#7dded8", "accent": "#f68fbe", "warning": "#f3d371", @@ -453,7 +448,6 @@ "euiButtonTypes": { "primary": "#36a2ef", "accent": "#f68fbe", - "secondary": "#7dded8", "success": "#7dded8", "warning": "#f3d371", "danger": "#f86b63", diff --git a/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json b/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json index 45980408700..30954473c68 100644 --- a/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json +++ b/src-docs/src/views/theme/_json/eui_theme_amsterdam_light.json @@ -119,7 +119,6 @@ "subdued": "#69707d", "primary": "#0071c2", "success": "#007e77", - "secondary": "#007e77", "warning": "#8a6a0a", "danger": "#bd271e", "accent": "#c4407c" @@ -212,7 +211,6 @@ "danger": "#bd271e", "ghost": "#ffffff", "primary": "#0077cc", - "secondary": "#00a39a", "success": "#00a39a", "subdued": "#69707d", "text": "#343741", @@ -231,7 +229,6 @@ "euiLinkColors": { "subdued": "#69707d", "primary": "#0071c2", - "secondary": "#007e77", "success": "#007e77", "accent": "#c4407c", "warning": "#8a6a0a", @@ -270,7 +267,6 @@ }, "euiProgressColors": { "primary": "#0077cc", - "secondary": "#00bfb3", "success": "#00bfb3", "warning": "#fec514", "danger": "#bd271e", @@ -362,7 +358,6 @@ "euiTextColors": { "default": "#343741", "subdued": "#69707d", - "secondary": "#00bfb3", "success": "#00bfb3", "accent": "#f04e98", "warning": "#fec514", @@ -453,7 +448,6 @@ "euiButtonTypes": { "primary": "#0077cc", "accent": "#f04e98", - "secondary": "#00bfb3", "success": "#00bfb3", "warning": "#fec514", "danger": "#bd271e", diff --git a/src-docs/src/views/theme/_json/eui_theme_dark.json b/src-docs/src/views/theme/_json/eui_theme_dark.json index 8f50f0f0140..e70d0365ac3 100644 --- a/src-docs/src/views/theme/_json/eui_theme_dark.json +++ b/src-docs/src/views/theme/_json/eui_theme_dark.json @@ -119,7 +119,6 @@ "subdued": "#7a7f89", "primary": "#1ba9f5", "success": "#7de2d1", - "secondary": "#7de2d1", "warning": "#ffce7a", "danger": "#ff6666", "accent": "#f990c0" @@ -212,7 +211,6 @@ "danger": "#ff6666", "ghost": "#ffffff", "primary": "#1ba9f5", - "secondary": "#7de2d1", "success": "#7de2d1", "subdued": "#7a7f89", "text": "#dfe5ef", @@ -231,7 +229,6 @@ "euiLinkColors": { "subdued": "#7a7f89", "primary": "#1ba9f5", - "secondary": "#7de2d1", "success": "#7de2d1", "accent": "#f990c0", "warning": "#ffce7a", @@ -270,7 +267,6 @@ }, "euiProgressColors": { "primary": "#1ba9f5", - "secondary": "#7de2d1", "success": "#7de2d1", "warning": "#ffce7a", "danger": "#ff6666", @@ -362,7 +358,6 @@ "euiTextColors": { "default": "#dfe5ef", "subdued": "#7a7f89", - "secondary": "#7de2d1", "success": "#7de2d1", "accent": "#f990c0", "warning": "#ffce7a", @@ -454,7 +449,6 @@ "euiButtonTypes": { "primary": "#1ba9f5", "accent": "#f990c0", - "secondary": "#7de2d1", "success": "#7de2d1", "warning": "#ffce7a", "danger": "#ff6666", diff --git a/src-docs/src/views/theme/_json/eui_theme_light.json b/src-docs/src/views/theme/_json/eui_theme_light.json index 3cbe4493594..69b398431b2 100644 --- a/src-docs/src/views/theme/_json/eui_theme_light.json +++ b/src-docs/src/views/theme/_json/eui_theme_light.json @@ -119,7 +119,6 @@ "subdued": "#6a717d", "primary": "#006bb4", "success": "#017d73", - "secondary": "#017d73", "warning": "#9b6900", "danger": "#bd271e", "accent": "#dd0a73" @@ -212,7 +211,6 @@ "danger": "#bd271e", "ghost": "#ffffff", "primary": "#006bb4", - "secondary": "#017d73", "success": "#017d73", "subdued": "#6a717d", "text": "#343741", @@ -231,7 +229,6 @@ "euiLinkColors": { "subdued": "#6a717d", "primary": "#006bb4", - "secondary": "#017d73", "success": "#017d73", "accent": "#dd0a73", "warning": "#9b6900", @@ -270,7 +267,6 @@ }, "euiProgressColors": { "primary": "#006bb4", - "secondary": "#017d73", "success": "#017d73", "warning": "#f5a700", "danger": "#bd271e", @@ -362,7 +358,6 @@ "euiTextColors": { "default": "#343741", "subdued": "#6a717d", - "secondary": "#017d73", "success": "#017d73", "accent": "#dd0a73", "warning": "#f5a700", @@ -454,7 +449,6 @@ "euiButtonTypes": { "primary": "#006bb4", "accent": "#dd0a73", - "secondary": "#017d73", "success": "#017d73", "warning": "#f5a700", "danger": "#bd271e", diff --git a/src/components/badge/__snapshots__/badge.test.tsx.snap b/src/components/badge/__snapshots__/badge.test.tsx.snap index c20dbdd169a..33407947df7 100644 --- a/src/components/badge/__snapshots__/badge.test.tsx.snap +++ b/src/components/badge/__snapshots__/badge.test.tsx.snap @@ -260,23 +260,6 @@ exports[`EuiBadge props color primary is rendered 1`] = ` `; -exports[`EuiBadge props color secondary is rendered 1`] = ` - - - - Content - - - -`; - exports[`EuiBadge props color success is rendered 1`] = ` `; -exports[`EuiBadge props style is rendered with secondary 1`] = ` - - - - Content - - - -`; - exports[`EuiBadge props style is rendered with success 1`] = ` `; -exports[`EuiButton props color secondary is rendered 1`] = ` - -`; - exports[`EuiButton props color success is rendered 1`] = ` - - - - -`; - -exports[`EuiButtonGroup button props color secondary is rendered for single 1`] = ` -
- - test - -
- - - -
-
-`; - exports[`EuiButtonGroup button props color success is rendered for multi 1`] = `
`; -exports[`EuiExpression props color secondary is rendered 1`] = ` - - - the answer is - - - - 42 - - -`; - exports[`EuiExpression props color subdued is rendered 1`] = ` ; /** * Color of the `description` - * **`secondary` color is DEPRECATED, use `success` instead** */ color?: ExpressionColor; /** diff --git a/src/components/health/__snapshots__/health.test.tsx.snap b/src/components/health/__snapshots__/health.test.tsx.snap index 0c2581fea23..8d8d5943526 100644 --- a/src/components/health/__snapshots__/health.test.tsx.snap +++ b/src/components/health/__snapshots__/health.test.tsx.snap @@ -177,28 +177,6 @@ exports[`EuiHealth props color primary is rendered 1`] = ` `; -exports[`EuiHealth props color secondary is rendered 1`] = ` -
-
-
- -
-
-
-
-`; - exports[`EuiHealth props color subdued is rendered 1`] = `
`; -exports[`EuiIcon props color secondary is rendered 1`] = ` - -`; - exports[`EuiIcon props color subdued is rendered 1`] = ` `; -exports[`EuiLink secondary is rendered 1`] = ` - -`; - -exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = ` - -`; - -exports[`EuiCodeEditor behavior hint element should be tabable 1`] = ` - -`; - -exports[`EuiCodeEditor is rendered 1`] = ` -
- -
-