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(theme-default): children, outline and fixes for Badge #1451

Merged
merged 1 commit into from
Oct 9, 2024

Conversation

Huxpro
Copy link
Contributor

@Huxpro Huxpro commented Oct 8, 2024

Summary

Shout out to shadcn/ui and Vitepress for inspiration.

Improve built-in <Badge> components:

  • Custom children: this is particularly useful for adding icons.
  • outline support: more variations!
  • Style tweak:
    • use CSS variables from containers to look consistent.
    • fixes default badge being invisible in Dark mode.
    • better vertically aligned with different headings.
  • Changes to type props:
    • add info type to be consistent with containers.
    • tip is added as the new default.

Do note that even though this kept untyped <Badge> unchanged, it
does introduce a benign breaking change to <Badge type="info">.

Before vs. After

Light mode:

image

Dark mode:

image

Changes to Docs:

  • Badges docs are updated to reflect the new usages and new types.
  • This MR correct "Internal Components" to be "Built-in Components".
    (does not involve URL changes due to the use of fragments)

Related Issue

Dunno.

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@CLAassistant
Copy link

CLAassistant commented Oct 8, 2024

CLA assistant check
All committers have signed the CLA.

Copy link

netlify bot commented Oct 8, 2024

Deploy Preview for aquamarine-blini-95325f ready!

Name Link
🔨 Latest commit 9ef097c
🔍 Latest deploy log https://app.netlify.com/sites/aquamarine-blini-95325f/deploys/67061dacbceb7e0008cee5f7
😎 Deploy Preview https://deploy-preview-1451--aquamarine-blini-95325f.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 73 (🔴 down 20 from production)
Accessibility: 97 (no change from production)
Best Practices: 92 (no change from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

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

@Huxpro Huxpro changed the title feat(theme-default): custom children and fixes for Badge feat(theme-default): children, outline and fixes for Badge Oct 8, 2024
@Timeless0911
Copy link
Collaborator

Very detailed PR and documentation description, thank you 👍

Improve built-in `<Badge>` components:
- Custom children: this is particularly useful for adding icons.
- `outline` support: more variations!
- Style tweak:
  - use CSS variables from containers to look consistent.
  - fixes default badge being invisible in Dark mode.
  - better vertically aligned with different headings.
- Changes to `type` props:
  - add `info` type to be consistent with containers.
  - `tip` is added as the new default.

Do note that even though this kept untyped `<Badge>` unchanged, it
does introduce a **benign** breaking change to `<Badge type="info">`.

Changes to Docs:
- Badges docs are updated to reflect the new usages and new types.
- This MR correct "Internal Components" to be "Built-in Components".
  (does not involve URL changes due to the use of fragments)
@Timeless0911 Timeless0911 enabled auto-merge (squash) October 9, 2024 06:20
@Timeless0911 Timeless0911 merged commit e2ebf7a into web-infra-dev:main Oct 9, 2024
7 checks passed
@chenjiahan
Copy link
Member

Awesome 👍

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

Successfully merging this pull request may close these issues.

4 participants