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

Float Label: Styles in unstyled mode #5644

Closed
ivanpajon opened this issue Dec 24, 2023 · 3 comments · Fixed by #7123
Closed

Float Label: Styles in unstyled mode #5644

ivanpajon opened this issue Dec 24, 2023 · 3 comments · Fixed by #7123
Assignees
Labels
Component: Tailwind Tailwind specific issue Component: Unstyled Issue related to unstyled/passthrough attributes
Milestone

Comments

@ivanpajon
Copy link
Contributor

ivanpajon commented Dec 24, 2023

Describe the bug

When apply unstyled mode with Tailwind default float labels of most components doesn't work properly.

Reproducer

https://stackblitz.com/edit/unstyled-float-label?file=src%2FApp.js

PrimeReact version

10.2.1

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

All

Steps to reproduce the behavior

  1. Open Stackblitz
  2. See rendered components and its float label

Expected behavior

Float label with default styles.
Or a precise guide in how to style properly float labels in unstyled mode.

@ivanpajon ivanpajon added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 24, 2023
@melloware melloware added Component: Tailwind Tailwind specific issue and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 25, 2023
@melloware
Copy link
Member

Thanks for the reproducer definitely looks like the p-float-label does not have its proper affect with Tailwind.

@melloware melloware added the Component: Unstyled Issue related to unstyled/passthrough attributes label Jan 2, 2024
@melloware
Copy link
Member

@Dalorzo any interest in helping with this one? We need to figure out Tailwind CSS to make FloatLabel work.

gcko added a commit to gcko/primereact that referenced this issue Sep 6, 2024
- Add tailwinddoc for floatlabel
- Fix typing for floatlabel
@gcko
Copy link
Contributor

gcko commented Sep 6, 2024

@melloware I addressed this by adding tailwind styles and updating the docs in PR #7123

This makes use of Tailwind's Arbitrary Variants to style form elements

FYI, this requires Tailwind >= 3.1

@melloware melloware added this to the 10.8.3 milestone Sep 6, 2024
gcko added a commit to gcko/primereact that referenced this issue Sep 9, 2024
melloware added a commit that referenced this issue Sep 9, 2024
* feat: #5644 Add missing tailwind styles

- Add tailwinddoc for floatlabel
- Fix typing for floatlabel

* chore: #5644 Fix typing

* Update floatlabeldoc.js

* Update floatlabeldoc.js

* Update floatlabeldoc.js

* Update basicdoc.js

* Update floatlabeldoc.js

* Update floatlabeldoc.js

* Update floatlabeldoc.js

* Update floatlabeldoc.js

* Update floatlabeldoc.js

* Update primereact.all.js

* Update floatlabeldoc.js

* Update floatlabeldoc.js

---------

Co-authored-by: Melloware <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Tailwind Tailwind specific issue Component: Unstyled Issue related to unstyled/passthrough attributes
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants