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(Button): use LoadingIndicator for loading state #1552

Merged
merged 1 commit into from
Mar 20, 2023
Merged

feat(Button): use LoadingIndicator for loading state #1552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 3 additions & 20 deletions src/components/Button/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,25 +68,8 @@
}

/**
* Loading icon rotiation style
* Loading icon rotation style
*/
.eds-is-loading svg {
animation: rotateIcon 2s linear infinite;
overflow: visible;

@media screen and (prefers-reduced-motion) {
animation: none;
}
}

/**
* Loading icon rotation animation
*/
@keyframes rotateIcon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
.button.eds-is-loading svg path {
stroke: var(--eds-theme-color-text-disabled);
}
15 changes: 4 additions & 11 deletions src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import type { ReactNode } from 'react';
import React, { forwardRef } from 'react';
import ClickableStyle from '../ClickableStyle';
import type { ClickableStyleProps, VariantStatus } from '../ClickableStyle';
import Icon from '../Icon';
import LoadingIndicator from '../LoadingIndicator';

import styles from './Button.module.css';

type ButtonHTMLElementProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
Expand All @@ -25,6 +26,7 @@ export type ButtonProps = ButtonHTMLElementProps & {
disabled?: boolean;
/**
* Loading state passed down from higher level used to trigger loader and text change
* @deprecated - This will be removed in a future release
*/
loading?: boolean;
/**
Expand Down Expand Up @@ -93,16 +95,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
variant={variant}
{...other}
>
{loading && (
<Icon
className={styles['eds-is-loading']}
name="spinner"
purpose="informative"
size="1.5em"
title="loading"
/>
)}

{loading && <LoadingIndicator className="eds-is-loading" size="sm" />}
Copy link
Contributor

Choose a reason for hiding this comment

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

When do you think this variant will be removed? Just not a fan of this eds-is-loading classnaming haha should be more BEM

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let's chat about it this week. we could do whenever, but removing is technically breaking, so didn't want to commit to a v12 just yet :)

agreed on that class and this implementation 🪓

{children}
</ClickableStyle>
);
Expand Down
63 changes: 47 additions & 16 deletions src/components/Button/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,23 +332,54 @@ exports[`<Button /> Loading story renders snapshot 1`] = `
tabindex="-1"
type="button"
>
<svg
class="icon eds-is-loading"
fill="currentColor"
height="1.5em"
role="img"
style="--icon-size: 1.5em;"
viewBox="0 0 32 32"
width="1.5em"
xmlns="http://www.w3.org/2000/svg"
<div
aria-busy="true"
aria-label="loading"
class="loading-indicator eds-is-loading"
data-testid="oval-loading"
role="status"
>
<title>
loading
</title>
<path
d="M16 31.9995C11.726 31.9995 7.708 30.3355 4.686 27.3135C1.664 24.2915 0 20.2735 0 15.9995C0 12.9735 0.849 10.0265 2.456 7.47752C4.019 4.99952 6.227 2.99752 8.842 1.68652L10.186 4.36852C8.06 5.43352 6.264 7.06152 4.994 9.07652C3.689 11.1455 3 13.5385 3 15.9985C3 23.1665 8.832 28.9985 16 28.9985C23.168 28.9985 29 23.1665 29 15.9985C29 13.5395 28.31 11.1455 27.006 9.07652C25.735 7.06152 23.94 5.43352 21.814 4.36852L23.158 1.68652C25.773 2.99652 27.982 4.99952 29.544 7.47752C31.151 10.0265 32 12.9725 32 15.9995C32 20.2735 30.336 24.2915 27.314 27.3135C24.292 30.3355 20.274 31.9995 16 31.9995Z"
/>
</svg>
<svg
data-testid="oval-svg"
height="24"
stroke="transparent"
viewBox="-20 -20 42 42"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
>
<g
data-testid="oval-secondary-group"
stroke-width="2"
transform="translate(1 1)"
>
<circle
cx="0"
cy="0"
r="20"
stroke="transparent"
stroke-opacity=".5"
stroke-width="2"
/>
<path
d="M20 0c0-9.94-8.06-20-20-20"
>
<animatetransform
attributeName="transform"
dur="1s"
from="0 0 0"
repeatCount="indefinite"
to="360 0 0"
type="rotate"
/>
</path>
</g>
</g>
</svg>
</div>
Button
</button>
`;
Expand Down