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.

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(kbutton): add appearance="none" to button #2469

Merged
merged 6 commits into from
Oct 23, 2024

Conversation

Justineo
Copy link
Contributor

@Justineo Justineo commented Oct 18, 2024

Summary

This PR adds a none value to the <KButton> appearance prop, enabling buttons to render with minimal styling similar to a <div>. This allows for fully custom styles while retaining <KButton> features like link rendering to links, cursor styles, and disabled states.

Changes

  • New Appearance: none

    • Renders <KButton> with minimal styles (border-box, cursor) for custom styling.
  • Style Refactoring

    • .k-button no longer applies primary styles unless the primary class is present to make overriding easier.
    • Output primary outline classes to maintain backward compatibility when appearance="outline" (or any other invalid values).
  • Disabled Link Behavior

    • Disabled links are now unfocusable and cannot be activated with the enter key.
    • Removed pointer-events: none to ensure cursor: not-allowed displays correctly for consistency.
    • Used JavaScript to prevent navigation and click events on disabled links, emulating native button behavior.

@Justineo Justineo requested review from adamdehaven, jillztom and a team as code owners October 18, 2024 06:18
Copy link

netlify bot commented Oct 18, 2024

Deploy Preview for kongponents-sandbox ready!

Name Link
🔨 Latest commit 76f88b7
🔍 Latest deploy log https://app.netlify.com/sites/kongponents-sandbox/deploys/671887414e2066000868df89
😎 Deploy Preview https://deploy-preview-2469--kongponents-sandbox.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Oct 18, 2024

Deploy Preview for kongponents ready!

Name Link
🔨 Latest commit 76f88b7
🔍 Latest deploy log https://app.netlify.com/sites/kongponents/deploys/67188741ef6f280008e4a510
😎 Deploy Preview https://deploy-preview-2469--kongponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

docs/components/button.md Show resolved Hide resolved
src/components/KButton/KButton.vue Show resolved Hide resolved
src/components/KButton/KButton.vue Show resolved Hide resolved
src/components/KButton/KButton.vue Show resolved Hide resolved
@adamdehaven
Copy link
Member

When we utilize an icon button, or button with icon, and with appearance="none" I think we should still persist some of the styling

image
image

As examples here, ideally, the button would still align with the other buttons in the row, just without the background color, etc.

We'd still want the gap between the icon + text, and the padding around the icon (probably?)

portikM
portikM previously approved these changes Oct 22, 2024
Copy link
Member

@portikM portikM left a comment

Choose a reason for hiding this comment

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

LGTM 🚀

@Justineo Justineo merged commit 30fb03a into main Oct 23, 2024
11 checks passed
@Justineo Justineo deleted the feat/button-appearance-none branch October 23, 2024 12:55
kongponents-bot pushed a commit that referenced this pull request Oct 23, 2024
# [9.13.0](v9.12.1...v9.13.0) (2024-10-23)

### Features

* **kbutton:** add appearance="none" to button ([#2469](#2469)) ([30fb03a](30fb03a))
@kongponents-bot
Copy link
Collaborator

🎉 This PR is included in version 9.13.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants