Changed the code to avoid tech debt with hacky solutions after receiving comments on EUI issue reported about this problem. (#81183) (#81290)

* Changed the code to avoid tech debt with hacky solutions after receiving comments on EUI issue reported about this problem.

* Updated snapshots.
This commit is contained in:
Bohdan Tsymbala 2020-10-21 16:32:20 +02:00 committed by GitHub
parent 9ca0b2baf8
commit 9a4e2af97f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 410 additions and 391 deletions

View file

@ -1,21 +1,15 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`item_details_card ItemDetailsAction should render correctly 1`] = `
<Fragment>
<div>
<EuiButton
className="eui-fullWidth "
color="primary"
contentProps={
Object {
"style": Object {
"height": "auto",
},
}
}
size="s"
>
primary
</EuiButton>
</Fragment>
</div>
`;
exports[`item_details_card ItemDetailsCard should render correctly with actions 1`] = `

View file

@ -80,18 +80,12 @@ export const ItemDetailsPropertySummary = memo<ItemDetailsPropertySummaryProps>(
ItemDetailsPropertySummary.displayName = 'ItemPropertySummary';
export const ItemDetailsAction: FC<PropsForButton<EuiButtonProps>> = memo(
({ children, ...rest }) => (
<>
<EuiButton
contentProps={{
// TODO: remove when https://github.com/elastic/eui/issues/4139 is fixed
style: { height: 'auto' },
}}
{...rest}
>
({ children, className = '', ...rest }) => (
<div>
<EuiButton className={`eui-fullWidth ${className}`} {...rest}>
{children}
</EuiButton>
</>
</div>
)
);

View file

@ -344,14 +344,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -368,6 +368,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -595,14 +596,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -619,6 +620,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -846,14 +848,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -870,6 +872,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -1097,14 +1100,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -1121,6 +1124,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -1348,14 +1352,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -1372,6 +1376,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -1599,14 +1604,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -1623,6 +1628,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -1850,14 +1856,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -1874,6 +1880,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -2101,14 +2108,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -2125,6 +2132,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -2352,14 +2360,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -2376,6 +2384,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -2603,14 +2612,14 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -2629,6 +2638,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -3144,14 +3154,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -3168,6 +3178,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -3395,14 +3406,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -3419,6 +3430,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -3646,14 +3658,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -3670,6 +3682,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -3897,14 +3910,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -3921,6 +3934,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -4148,14 +4162,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -4172,6 +4186,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -4399,14 +4414,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -4423,6 +4438,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -4650,14 +4666,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -4674,6 +4690,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -4901,14 +4918,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -4925,6 +4942,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -5152,14 +5170,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -5176,6 +5194,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -5403,14 +5422,14 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -5429,6 +5448,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -5902,14 +5922,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -5926,6 +5946,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -6153,14 +6174,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -6177,6 +6198,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -6404,14 +6426,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -6428,6 +6450,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -6655,14 +6678,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -6679,6 +6702,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -6906,14 +6930,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -6930,6 +6954,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -7157,14 +7182,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -7181,6 +7206,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -7408,14 +7434,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -7432,6 +7458,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -7659,14 +7686,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -7683,6 +7710,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -7910,14 +7938,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -7934,6 +7962,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
@ -8161,14 +8190,14 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -8187,6 +8216,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>

View file

@ -996,14 +996,14 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div>
<button
class="euiButton euiButton--danger euiButton--small"
class="euiButton euiButton--danger euiButton--small eui-fullWidth "
data-test-subj="trustedAppDeleteButton"
type="button"
>
<span
class="euiButtonContent euiButton__content"
style="height: auto;"
>
<span
class="euiButton__text"
@ -1020,6 +1020,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
</div>
</div>
</div>
</div>
</td>
</tr>
<tr