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

Select and TextArea components duplicated border classes #692

Closed
alonsourena opened this issue Jun 24, 2023 · 2 comments · Fixed by #1089
Closed

Select and TextArea components duplicated border classes #692

alonsourena opened this issue Jun 24, 2023 · 2 comments · Fixed by #1089

Comments

@alonsourena
Copy link
Contributor

alonsourena commented Jun 24, 2023

Hi, I love the new update, it's awesome ❤️

I found that the border-neutral-200 and dark:border-neutral-800 classes on the select.tsx component are duplicated.

I'm using "cssVariables": false.

image image
@alonsourena alonsourena changed the title Select component duplicated class Select component duplicated border classes Jun 24, 2023
@alonsourena alonsourena changed the title Select component duplicated border classes Select and TextArea components duplicated border classes Jun 24, 2023
@dan5py
Copy link
Contributor

dan5py commented Jun 24, 2023

The duplicate class is caused by this:

https://github.com/shadcn/ui/blob/aea12e97623699e7c7b2d75fc671ea21b0cf8887/packages/cli/src/utils/transformers/transform-css-vars.ts#L143-L145

When a component has the border class it gets replaced with border border-border and, since the select has already border-input this brings two border color classes when the colors are resolved.

List of affected components:

  • select
  • textarea
  • radio-group
  • alert (destructive variant)
  • checkbox
  • input

@Cielquan
Copy link

Cielquan commented Jan 25, 2024

I encountered this issue with the radio-group and checkbox components today.

On the Checkbox component I get border-gray-200 border-gray-900 and dark:border-gray-50 dark:border-gray-800.

On the RadioGroupItem component I get border-gray-200 border-gray-900 and dark:border-gray-50 dark:border-gray-800.

I am using the latest tag for the cli command.

My components.json is

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/styles/globals.css",
    "baseColor": "gray",
    "cssVariables": false,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

EDIT: I am blind. There is another issue link right above.

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

Successfully merging a pull request may close this issue.

3 participants