Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Add button loading states #741

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.

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

Draft
elizabetdev wants to merge 14 commits into main
base: main
Choose a base branch
Loading
from add-button-loading-states
Draft

Conversation

@elizabetdev
Copy link
Member

@elizabetdev elizabetdev commented Dec 29, 2025
edited
Loading

Copy link

vercel bot commented Dec 29, 2025
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
click-ui Ready Ready Preview, Comment Dec 30, 2025 5:59pm

...er effect direction in styles. Ensure proper formatting in dark theme variables file.
Enhance Button component tests by adding multiple scenarios for the loading state, including aria-disabled attribute, preventing onClick execution, and ensuring the label is rendered correctly. Cover loading states for various button types: primary, secondary, danger, and empty.
@@ -1,5 +1,5 @@
import { Icon, IconName } from "@/components";
import { styled } from "styled-components";
import { styled,keyframes,css } from "styled-components";
Copy link
Member

@hoorayimhelping hoorayimhelping Dec 29, 2025

Choose a reason for hiding this comment

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

@vineethasok can you chime in here? Aren't you in the process of removing styled-components? Is this something we should implement with a different piece of technology?

vineethasok reacted with eyes emoji
Copy link
Member Author

@elizabetdev elizabetdev Dec 30, 2025

Choose a reason for hiding this comment

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

@hoorayimhelping @vineethasok I’m happy to leave this PR as a draft as a POC, or I can just create a PR with the new gradient tokens. Let me know what works best.

}
${({ $loading, $fillWidth, $styleType, theme }) => {
if (!$loading) return "";
Copy link
Member

@hoorayimhelping hoorayimhelping Dec 30, 2025

Choose a reason for hiding this comment

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

Please wrap this with brackets and put the return on a newline. We have a lint rule for this but it doesn't run inside of styled-component strings.

if (!$loading) {
 return "";
}

font: ${({ theme }) => theme.click.button.basic.typography.label.disabled};
}
${({ $loading, $styleType, theme }) => {
if ($loading) return "";
Copy link
Member

@hoorayimhelping hoorayimhelping Dec 30, 2025

Choose a reason for hiding this comment

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

Same comment about curly braces and a newline here

/* Loading state styling */
${({ $loading }) => {
if (!$loading) return "";
Copy link
Member

@hoorayimhelping hoorayimhelping Dec 30, 2025

Choose a reason for hiding this comment

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

Same comment about wrapping this in curly braces and putting the return on a newline

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hoorayimhelping hoorayimhelping hoorayimhelping left review comments

@DreaminDani DreaminDani DreaminDani left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

AltStyle によって変換されたページ (->オリジナル) /