Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

prevent modalBody render if no children provided #1500

Merged
merged 5 commits into from
Jan 31, 2019
+143 −24
Merged

prevent modalBody render if no children provided #1500

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1266a35
prevent modalBody render if no children provided
thompsongl Jan 30, 2019
e51bf48
add test for empty euiModalBody
thompsongl Jan 30, 2019
5835b76
add title-only modal example to docs; clean up
thompsongl Jan 31, 2019
51db114
#1500 changelog entry
thompsongl Jan 31, 2019
dd6b933
Merge branch 'master' into 1382-confirm-modal-body
thompsongl Jan 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 79 additions & 0 deletions src/components/modal/__snapshots__/confirm_modal.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,82 @@ exports[`renders EuiConfirmModal 1`] = `
</div>
</div>
`;

exports[`renders EuiConfirmModal without EuiModalBody, if empty 1`] = `
<div>
<div
aria-label="aria-label"
class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
data-test-subj="test subject string"
tabindex="0"
>
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
type="button"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiButtonIcon__icon"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
/>
</svg>
</button>
<div
class="euiModal__flex"
>
<div
class="euiModalHeader"
>
<div
class="euiModalHeader__title"
data-test-subj="confirmModalTitleText"
>
A confirmation modal
</div>
</div>
<div
class="euiModalFooter"
>
<button
class="euiButtonEmpty euiButtonEmpty--primary"
data-test-subj="confirmModalCancelButton"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<span
class="euiButtonEmpty__text"
>
Cancel Button Text
</span>
</span>
</button>
<button
class="euiButton euiButton--primary euiButton--fill"
data-test-subj="confirmModalConfirmButton"
type="button"
>
<span
class="euiButton__content"
>
<span
class="euiButton__text"
>
Confirm Button Text
</span>
</span>
</button>
</div>
</div>
</div>
</div>
`;
14 changes: 8 additions & 6 deletions src/components/modal/confirm_modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export class EuiConfirmModal extends Component {

let message;

if (typeof children === 'string') {
if (typeof children === 'string' && !!children.length) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Prefer testing explicitly for children.length > 0. Less mental hoops to jump through when reading through the code.

Copy link
Contributor

@cjcenizal cjcenizal Jan 31, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the thinking behind this change, but what if the user provides a string of whitespace like ' '? Then we could make this children.trim().length > 0. Though it's a bit of a slippery slope -- at which point do we stop sanitizing input and just trust the consumer to provide us with what they want?

For questions like this, my reasoning tends to take a draconian approach: "This component can't know what the consumer intends, but it can provide predictable behavior. I can't think of a reason for why the consumer would want to provide an empty string, but there is a limit to my imagination and no limit to the number of consumers' use cases for this component now and in the future. Therefore, providing predictable behavior and making no assumptions about the consumer's intention, even if it seems silly, is the optimal choice."

Not saying we shouldn't do this, just thought I'd share how I would approach things. 😄

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this change reflects the spirit of the component. An empty string is empty contents, but a non-empty string (including whitespace) is contentful. This provides the predictability of the component ('' is empty) while allowing flexibility of passing ' '.

message = <p>{children}</p>;
} else {
message = children;
Expand All @@ -89,11 +89,13 @@ export class EuiConfirmModal extends Component {
>
{modalTitle}

<EuiModalBody>
<EuiText data-test-subj="confirmModalBodyText">
{message}
</EuiText>
</EuiModalBody>
{message && (
<EuiModalBody>
<EuiText data-test-subj="confirmModalBodyText">
thompsongl marked this conversation as resolved.
Show resolved Hide resolved
{message}
</EuiText>
</EuiModalBody>
)}

<EuiModalFooter>
<EuiButtonEmpty
Expand Down
14 changes: 14 additions & 0 deletions src/components/modal/confirm_modal.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,20 @@ test('renders EuiConfirmModal', () => {
expect(component).toMatchSnapshot();
});

test('renders EuiConfirmModal without EuiModalBody, if empty', () => {
const component = render(
<EuiConfirmModal
title="A confirmation modal"
onCancel={() => {}}
onConfirm={onConfirm}
cancelButtonText="Cancel Button Text"
confirmButtonText="Confirm Button Text"
{...requiredProps}
/>
);
expect(component).toMatchSnapshot();
});

test('onConfirm', () => {
const component = mount(
<EuiConfirmModal
Expand Down