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

[ShadCN] feat: create table component set with ShadCN #13708

Merged
merged 9 commits into from
Sep 16, 2024

Conversation

TylerAPfledderer
Copy link
Contributor

Description

Creates the Table components using ShadCN.

Creates a separate story file until deemed ready to merge and be a part of the Chromatic snapshots.

Also introduces tailwind-variants which allows you to create slot variants: variant sets to pass to a multi-component (i.e. Table, Tag, etc. that has many parts)

tailwind-variants to be used in place of class-variance-authority

@github-actions github-actions bot added the dependencies 📦 Changes related to project dependencies label Aug 23, 2024
@TylerAPfledderer TylerAPfledderer changed the title feat: create table component set with ShadCN [ShadCN] feat: create table component set with ShadCN Aug 23, 2024
Copy link

netlify bot commented Aug 23, 2024

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 027f1aa
🔍 Latest deploy log https://app.netlify.com/sites/ethereumorg/deploys/66e63e95bc787c00081f946e
😎 Deploy Preview https://deploy-preview-13708--ethereumorg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 37 (🔴 down 11 from production)
Accessibility: 92 (🔴 down 1 from production)
Best Practices: 83 (🔴 down 9 from production)
SEO: 92 (🔴 down 1 from production)
PWA: -
View the detailed breakdown and full score reports

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

Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

@TylerAPfledderer this looks great, clean & simple.

I would prefer to replace the old table with this new one if possible. Do you think you can do it in this PR or we could also do it separately.

Copy link
Member

Choose a reason for hiding this comment

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

This file should be outside the __stories__ folder

const tableVariants = tv({
slots: {
table: "w-full",
th: "text-start border-b-[1px] border-body text-body normal-case align-bottom p-4",
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
th: "text-start border-b-[1px] border-body text-body normal-case align-bottom p-4",
th: "text-start border-b border-body text-body normal-case align-bottom p-4",

@@ -0,0 +1,234 @@
import * as React from "react"

import InlineLink from "../../../../../tailwind/ui/Link"
Copy link
Member

Choose a reason for hiding this comment

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

should be import InlineLink from "@/components/Link"

@TylerAPfledderer
Copy link
Contributor Author

@pettinarip did a full replacement of the table component. So this new version is available to be checked for prod.

Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

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

LGTM @TylerAPfledderer great job!

@pettinarip pettinarip merged commit 0c4f501 into ethereum:dev Sep 16, 2024
8 of 9 checks passed
@TylerAPfledderer TylerAPfledderer deleted the feat/shadcn-tables branch September 16, 2024 17:27
This was referenced Sep 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies 📦 Changes related to project dependencies
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants