diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index b4b0c78314b..c307eb88bdc 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiCard betaBadgeProps renders href 1`] = `
`; +exports[`EuiCard props an avatar icon 1`] = ` +
+
+ +
+
+

+ + Card title + +

+
+

+ Card description +

+
+
+
+`; + exports[`EuiCard props children 1`] = `
`; -exports[`EuiCard props textAlign 1`] = ` +exports[`EuiCard props textAlign center 1`] = ` +
+
+

+ + Card title + +

+
+

+ Card description +

+
+
+
+`; + +exports[`EuiCard props textAlign left 1`] = ` +
+
+

+ + Card title + +

+
+

+ Card description +

+
+
+
+`; + +exports[`EuiCard props textAlign right 1`] = `
{ @@ -48,6 +47,18 @@ describe('EuiCard', () => { expect(component).toMatchSnapshot(); }); + test('an avatar icon', () => { + const component = render( + } + /> + ); + + expect(component).toMatchSnapshot(); + }); + test('a null icon', () => { const component = render( { expect(component).toMatchSnapshot(); }); - test('textAlign', () => { - const component = render( - - ); + describe('textAlign', () => { + ALIGNMENTS.forEach((textAlign) => { + test(textAlign, () => { + const component = render( + + ); - expect(component).toMatchSnapshot(); + expect(component).toMatchSnapshot(); + }); + }); }); test('isDisabled', () => { diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx index cc7bdad4f6a..d48bdad6a5e 100644 --- a/src/components/card/card.tsx +++ b/src/components/card/card.tsx @@ -15,17 +15,14 @@ import React, { } from 'react'; import classNames from 'classnames'; -import { CommonProps, ExclusiveUnion, keysOf } from '../common'; +import { CommonProps, ExclusiveUnion } from '../common'; import { getSecureRelForTarget, useEuiTheme } from '../../services'; +import { cloneElementWithCss } from '../../services/theme/clone_element'; import { EuiText } from '../text'; import { EuiTitle } from '../title'; import { EuiBetaBadge, EuiBetaBadgeProps } from '../badge/beta_badge'; import { EuiIconProps } from '../icon'; -import { - EuiCardSelect, - EuiCardSelectProps, - euiCardSelectableColor, -} from './card_select'; +import { EuiCardSelect, EuiCardSelectProps } from './card_select'; import { useGeneratedHtmlId } from '../../services/accessibility'; import { validateHref } from '../../services/security/href_validator'; import { EuiPanel, EuiPanelProps } from '../panel'; @@ -36,24 +33,8 @@ import { euiCardTextStyles, } from './card.styles'; -type CardAlignment = 'left' | 'center' | 'right'; - -const textAlignToClassNameMap: { [alignment in CardAlignment]: string } = { - left: 'euiCard--leftAligned', - center: 'euiCard--centerAligned', - right: 'euiCard--rightAligned', -}; - -export const ALIGNMENTS = keysOf(textAlignToClassNameMap); - -type CardLayout = 'vertical' | 'horizontal'; - -const layoutToClassNameMap: { [layout in CardLayout]: string } = { - vertical: '', - horizontal: 'euiCard--horizontal', -}; - -export const LAYOUT_ALIGNMENTS = keysOf(layoutToClassNameMap); +export const ALIGNMENTS = ['left', 'center', 'right'] as const; +type CardAlignment = typeof ALIGNMENTS[number]; /** * Certain props are only allowed when the layout is vertical @@ -224,28 +205,7 @@ export const EuiCard: FunctionComponent = ({ } } - const selectableColorClass = selectable - ? `euiCard--isSelectable--${euiCardSelectableColor( - selectable.color, - selectable.isSelected - )}` - : undefined; - - const classes = classNames( - 'euiCard', - textAlignToClassNameMap[textAlign], - layoutToClassNameMap[layout], - { - 'euiCard--isClickable': isClickable, - 'euiCard--hasBetaBadge': betaBadgeProps?.label, - 'euiCard--hasIcon': icon, - 'euiCard--isSelectable': selectable, - 'euiCard-isSelected': selectable?.isSelected, - 'euiCard-isDisabled': isDisabled, - }, - selectableColorClass, - className - ); + const classes = classNames('euiCard', className); const ariaId = useGeneratedHtmlId(); const ariaDesc = description ? `${ariaId}Description` : ''; @@ -278,7 +238,7 @@ export const EuiCard: FunctionComponent = ({ styles.icon.layout[layout], imageNode && styles.icon.withImage, ]; - iconNode = React.cloneElement(icon, { + iconNode = cloneElementWithCss(icon, { className: classNames(icon.props.className, 'euiCard__icon'), css: iconStyles, }); diff --git a/src/components/card/checkable_card/checkable_card.test.tsx b/src/components/card/checkable_card/checkable_card.test.tsx index 601f12eb970..e5cd8d51815 100644 --- a/src/components/card/checkable_card/checkable_card.test.tsx +++ b/src/components/card/checkable_card/checkable_card.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../../test/required_props'; -// import { shouldRenderCustomStyles } from '../../../test/internal'; +import { shouldRenderCustomStyles } from '../../../test/internal'; import { EuiCheckableCard } from './checkable_card'; @@ -28,10 +28,10 @@ describe('EuiCheckableCard', () => { expect(component).toMatchSnapshot(); }); - // TODO - // shouldRenderCustomStyles( - // - // ); + shouldRenderCustomStyles( + , + { skipStyles: true } // `style` goes with ...rest onto the child check/radio input + ); test('renders panel props', () => { const component = render( diff --git a/src/components/card/checkable_card/checkable_card.tsx b/src/components/card/checkable_card/checkable_card.tsx index f956a4a9dc2..764b18746ce 100644 --- a/src/components/card/checkable_card/checkable_card.tsx +++ b/src/components/card/checkable_card/checkable_card.tsx @@ -50,6 +50,7 @@ export type EuiCheckableCardProps = Omit< export const EuiCheckableCard: FunctionComponent = ({ children, className, + css, checkableType = 'radio', label, checked, @@ -63,6 +64,7 @@ export const EuiCheckableCard: FunctionComponent = ({ const baseStyles = [ styles.euiCheckableCard, checked && !disabled && styles.isChecked, + css, ]; const labelStyles = [ styles.label.euiCheckableCard__label, diff --git a/upcoming_changelogs/6341.md b/upcoming_changelogs/6341.md new file mode 100644 index 00000000000..f61234bae62 --- /dev/null +++ b/upcoming_changelogs/6341.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed `EuiCard` not correctly merging `css` on its child `icon`s +- Fixed `EuiCheckableCard` not setting `css` on the correct DOM node