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

feat(EuiSuperUpdateButton): support custom button labels via children prop #7576

Merged
merged 8 commits into from
Mar 18, 2024
Merged

feat(EuiSuperUpdateButton): support custom button labels via children prop #7576

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
06793c5
feat(EuiSuperUpdateButton): add `children` prop support for overridin…
tkajtoch Mar 13, 2024
d524832
test(EuiSuperUpdateButton): convert tests to rtl and add `children` p…
tkajtoch Mar 13, 2024
d3b89ad
chore: add changelog
tkajtoch Mar 13, 2024
ce4deb4
docs(EuiSuperUpdateButton): configure playground to support basic `ch…
tkajtoch Mar 13, 2024
fd7ec8b
refactor(EuiSuperUpdateButton): cleanup button content and tooltip co…
tkajtoch Mar 13, 2024
b68c8a1
Update changelogs/upcoming/7576.md
tkajtoch Mar 13, 2024
ae0fbe4
test(EuiSuperUpdateButton): replace `it` with `test` for singular pro…
tkajtoch Mar 13, 2024
5ccf144
test(EuiSuperUpdateButton): compare default component output against …
tkajtoch Mar 18, 2024
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
59 changes: 40 additions & 19 deletions src/components/date_picker/super_date_picker/super_update_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,12 @@
* Side Public License, v 1.
*/

import React, { Component, MouseEventHandler, ElementRef } from 'react';
import React, {
Component,
MouseEventHandler,
ElementRef,
ReactNode,
} from 'react';
import classNames from 'classnames';

import { EuiButton, EuiButtonProps } from '../../button';
Expand All @@ -25,6 +30,15 @@ type EuiSuperUpdateButtonInternalProps = {
};

export type EuiSuperUpdateButtonProps = {
/**
* Overrides the default button label with a custom React node.
*
* When defined, you're responsible for updating the custom label
* when the data needs updating (the `needsUpdate` prop)
* or is loading (the `isLoading` prop).
*/
children?: ReactNode;
Copy link
Contributor

Choose a reason for hiding this comment

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

Really like this detail of adding props docs for children, thanks for going the extra mile!


/**
* Show the "Click to apply" tooltip
*/
Expand All @@ -45,7 +59,9 @@ export type EuiSuperUpdateButtonProps = {
* Remove completely with `false` or provide your own list of breakpoints.
*/
responsive?: false | EuiBreakpointSize[];
} & Partial<Omit<EuiButtonProps, 'isDisabled' | 'isLoading' | 'onClick'>>;
} & Partial<
Omit<EuiButtonProps, 'isDisabled' | 'isLoading' | 'onClick' | 'children'>
>;

export class EuiSuperUpdateButton extends Component<
EuiSuperUpdateButtonInternalProps & EuiSuperUpdateButtonProps
Expand Down Expand Up @@ -104,6 +120,7 @@ export class EuiSuperUpdateButton extends Component<

render() {
const {
children,
className,
needsUpdate,
isLoading,
Expand All @@ -122,24 +139,28 @@ export class EuiSuperUpdateButton extends Component<

const classes = classNames('euiSuperUpdateButton', className);

let buttonText = (
<EuiI18n
token="euiSuperUpdateButton.refreshButtonLabel"
default="Refresh"
/>
);
if (needsUpdate || isLoading) {
buttonText = isLoading ? (
<EuiI18n
token="euiSuperUpdateButton.updatingButtonLabel"
default="Updating"
/>
) : (
let buttonContent = children;

if (buttonContent === undefined) {
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
buttonContent = (
<EuiI18n
token="euiSuperUpdateButton.updateButtonLabel"
default="Update"
token="euiSuperUpdateButton.refreshButtonLabel"
default="Refresh"
/>
);
if (needsUpdate || isLoading) {
buttonContent = isLoading ? (
<EuiI18n
token="euiSuperUpdateButton.updatingButtonLabel"
default="Updating"
/>
) : (
<EuiI18n
token="euiSuperUpdateButton.updateButtonLabel"
default="Update"
/>
);
}
}

let tooltipContent;
Expand Down Expand Up @@ -190,7 +211,7 @@ export class EuiSuperUpdateButton extends Component<
}}
{...rest}
>
{buttonText}
{buttonContent}
</EuiButton>
</EuiShowFor>
<EuiHideFor sizes={responsive || 'none'}>
Expand All @@ -202,7 +223,7 @@ export class EuiSuperUpdateButton extends Component<
textProps={restTextProps}
{...rest}
>
{buttonText}
{buttonContent}
</EuiButton>
</EuiHideFor>
</>
Expand Down