From 931b165cbf137ffbd71540f0c0b5a0da289540f0 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 4 Mar 2019 13:34:53 -0500 Subject: [PATCH 1/3] Added `fullWidth` prop to `EuiButton` --- src-docs/src/views/form_layouts/inline_popover.js | 1 + .../button/__snapshots__/button.test.js.snap | 15 +++++++++++++++ src/components/button/_button.scss | 5 +++++ src/components/button/button.js | 7 +++++++ src/components/button/button.test.js | 11 +++++++++++ src/components/button/index.d.ts | 1 + 6 files changed, 40 insertions(+) diff --git a/src-docs/src/views/form_layouts/inline_popover.js b/src-docs/src/views/form_layouts/inline_popover.js index dfbcd74e5b8..d05800c57e7 100644 --- a/src-docs/src/views/form_layouts/inline_popover.js +++ b/src-docs/src/views/form_layouts/inline_popover.js @@ -138,6 +138,7 @@ export default class extends Component { name="poprange" /> + Save ); diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap index 910820d5e76..df5bc9f2382 100644 --- a/src/components/button/__snapshots__/button.test.js.snap +++ b/src/components/button/__snapshots__/button.test.js.snap @@ -124,6 +124,21 @@ exports[`EuiButton props fill is rendered 1`] = ` `; +exports[`EuiButton props fullWidth is rendered 1`] = ` + +`; + exports[`EuiButton props href secures the rel attribute when the target is _blank 1`] = ` { @@ -69,6 +70,7 @@ export const EuiButton = ({ className, { 'euiButton--fill': fill, + 'euiButton--fullWidth': fullWidth, }, ); @@ -162,6 +164,11 @@ EuiButton.propTypes = { */ color: PropTypes.oneOf(COLORS), size: PropTypes.oneOf(SIZES), + + /** + * Expands button to fill the width of the parent + */ + fullWidth: PropTypes.bool, isDisabled: PropTypes.bool, href: PropTypes.string, target: PropTypes.string, diff --git a/src/components/button/button.test.js b/src/components/button/button.test.js index 5fafda284ad..a13a9476275 100644 --- a/src/components/button/button.test.js +++ b/src/components/button/button.test.js @@ -64,6 +64,17 @@ describe('EuiButton', () => { }); }); + describe('fullWidth', () => { + it('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + }); + describe('iconType', () => { it('is rendered', () => { const component = render( diff --git a/src/components/button/index.d.ts b/src/components/button/index.d.ts index 363271ecdac..fd363d5a65d 100644 --- a/src/components/button/index.d.ts +++ b/src/components/button/index.d.ts @@ -34,6 +34,7 @@ declare module '@elastic/eui' { size?: ButtonSize; isLoading?: boolean; isDisabled?: boolean; + fullWidth?: boolean; contentProps?: HTMLAttributes; textProps?: HTMLAttributes; } From 558c401a347573b3a44032293a2ae53d667d4b81 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 4 Mar 2019 17:03:25 -0500 Subject: [PATCH 2/3] cl --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 74ace75f5b0..10cabf630ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added support to `findTestSubject` for an optional `matcher` argument, which defaults to `~=`, enabling it to identify an element based on one of multiple space-separated values within its `data-test-subj` attribute ([#1587](https://github.com/elastic/eui/pull/1587)) +- Added `fullWidth` prop to `EuiButton` ([#1665](https://github.com/elastic/eui/pull/1665)) ## [`9.0.1`](https://github.com/elastic/eui/tree/v9.0.1) From 313173a54c58df1b8136d95d6fdc591c013a7a99 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 4 Mar 2019 17:15:19 -0500 Subject: [PATCH 3/3] Added `.eui-fullWidth` utility class --- CHANGELOG.md | 1 + src-docs/src/views/utility_classes/utility_classes.js | 4 ++++ src/global_styling/utility/_utility.scss | 5 +++++ 3 files changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a14078477e4..b6e5c3942e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - Converted `EuiAvatar` to Typescript ([#1654](https://github.com/elastic/eui/pull/1654)) - Added missing `anchorClassName` prop to `EuiToolTip` definition ([#1657](https://github.com/elastic/eui/pull/1657)) - Added `fullWidth` prop to `EuiButton` ([#1665](https://github.com/elastic/eui/pull/1665)) +- Added `.eui-fullWidth` utility class ([#1665](https://github.com/elastic/eui/pull/1665)) ## [`9.0.1`](https://github.com/elastic/eui/tree/v9.0.1) diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js index 97906f2c283..ddbceb6ab01 100644 --- a/src-docs/src/views/utility_classes/utility_classes.js +++ b/src-docs/src/views/utility_classes/utility_classes.js @@ -147,6 +147,10 @@ export default () => ( .eui-displayInlineBlock + + + .eui-fullWidth (similar to eui-displayBlock but adds 100% width) +

Responsive

.eui-hideFor--xs diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss index 23b0c6f38b8..2638d6b8142 100644 --- a/src/global_styling/utility/_utility.scss +++ b/src/global_styling/utility/_utility.scss @@ -12,6 +12,11 @@ .eui-displayInline {display: inline !important;} .eui-displayInlineBlock {display: inline-block !important;} +.eui-fullWidth { + display: block !important; + width: 100% !important; +} + // Text .eui-textCenter {text-align: center !important;} .eui-textLeft {text-align: left !important;}