From f6e958bef93b113aac217e74a53a66b835a26bfa Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 16 Nov 2022 13:50:05 -0800 Subject: [PATCH 1/6] EuiButton `minWidth` - allow disabling/removing minWidth without having to set an overriding inline style --- .../button_display/_button_display.styles.ts | 5 ++-- .../button_display/_button_display.test.tsx | 23 +++++++++++++++---- .../button/button_display/_button_display.tsx | 3 ++- 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/components/button/button_display/_button_display.styles.ts b/src/components/button/button_display/_button_display.styles.ts index 3ce66f464b2..a3848c68d20 100644 --- a/src/components/button/button_display/_button_display.styles.ts +++ b/src/components/button/button_display/_button_display.styles.ts @@ -42,7 +42,6 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => { // Base euiButtonDisplay: css` ${euiButtonBaseCSS()}; - ${logicalCSS('min-width', `${euiTheme.base * 7}px`)} font-weight: ${euiTheme.font.weight.medium}; padding: 0 ${euiTheme.size.m}; @@ -51,7 +50,6 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => { text-decoration: underline; } `, - // States isDisabled: css` cursor: not-allowed; @@ -60,6 +58,9 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => { display: block; ${logicalCSS('width', '100%')} `, + defaultMinWidth: css` + ${logicalCSS('min-width', `${euiTheme.base * 7}px`)} + `, // Sizes xs: css(_buttonSize(euiTheme.size.l), euiFontSize(euiThemeContext, 'xs')), s: css(_buttonSize(euiTheme.size.xl), euiFontSize(euiThemeContext, 's')), diff --git a/src/components/button/button_display/_button_display.test.tsx b/src/components/button/button_display/_button_display.test.tsx index d590c9d0018..75d9b94daec 100644 --- a/src/components/button/button_display/_button_display.test.tsx +++ b/src/components/button/button_display/_button_display.test.tsx @@ -26,13 +26,26 @@ describe('EuiButtonDisplay', () => { expect(container.firstChild).toMatchSnapshot(); }); - describe('props', () => { - test('minWidth', () => { + describe('minWidth', () => { + it('applies a `defaultMinWidth` class and no inline styles by default', () => { + const { container } = render(); + + expect(container.innerHTML).toContain('defaultMinWidth'); + expect(container.innerHTML).not.toContain('style'); + }); + + it('applies an inline style & not the `defaultMinWidth` class if a custom minWidth is passed', () => { + const { container } = render(); + + expect(container.innerHTML).not.toContain('defaultMinWidth'); + expect(container.innerHTML).toContain('style="min-inline-size: 200px;"'); + }); + + it('does not apply an inline style or `defaultMinWidth` if set to 0', () => { const { container } = render(); - expect(container.innerHTML).toEqual( - expect.stringContaining('style="min-inline-size: 0;"') - ); + expect(container.innerHTML).not.toContain('defaultMinWidth'); + expect(container.innerHTML).not.toContain('style'); }); }); diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx index d128aef860f..2131ae4961c 100644 --- a/src/components/button/button_display/_button_display.tsx +++ b/src/components/button/button_display/_button_display.tsx @@ -145,6 +145,7 @@ export const EuiButtonDisplay = forwardRef( styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, + minWidth == null && styles.defaultMinWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle, ]; @@ -193,7 +194,7 @@ export const EuiButtonDisplay = forwardRef( element, { css: cssStyles, - style: minWidth != null ? { ...style, minInlineSize: minWidth } : style, + style: minWidth ? { ...style, minInlineSize: minWidth } : style, ref, ...elementProps, ...relObj, From dd7fa59f7b85abad3aad44781a6e6d1eb6eef485 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Wed, 16 Nov 2022 13:53:46 -0800 Subject: [PATCH 2/6] Update snapshots --- .../__snapshots__/skip_link.test.tsx.snap | 10 ++-- .../button/__snapshots__/button.test.tsx.snap | 53 +++++++++---------- .../_button_display.test.tsx.snap | 2 +- .../card/__snapshots__/card.test.tsx.snap | 4 +- .../__snapshots__/card_select.test.tsx.snap | 10 ++-- .../__snapshots__/control_bar.test.tsx.snap | 16 +++--- .../__snapshots__/facet_button.test.tsx.snap | 12 ++--- .../__snapshots__/confirm_modal.test.tsx.snap | 4 +- 8 files changed, 55 insertions(+), 56 deletions(-) diff --git a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap index 9f81dada84c..53af988e3e1 100644 --- a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap +++ b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiSkipLink is rendered 1`] = ` @@ -34,7 +34,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = ` exports[`EuiSkipLink props position fixed is rendered 1`] = ` @@ -59,7 +59,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = ` exports[`EuiSkipLink props tabIndex is rendered 1`] = ` @@ -21,7 +21,7 @@ exports[`EuiButton is rendered 1`] = ` exports[`EuiButton props color accent is rendered 1`] = `