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

Unstyled Accordion doc's transitions doesn't work #6955

Closed
samy-mssi opened this issue Jul 31, 2024 · 0 comments · Fixed by #6954
Closed

Unstyled Accordion doc's transitions doesn't work #6955

samy-mssi opened this issue Jul 31, 2024 · 0 comments · Fixed by #6954
Assignees
Labels
Component: Documentation Issue or pull request is related to Documentation
Milestone

Comments

@samy-mssi
Copy link
Contributor

samy-mssi commented Jul 31, 2024

Describe the bug

When using unstyled, and follow the docs, transitions doesn't work :

const TRANSITIONS = {
    toggleable: {
        enterFromClass: 'max-h-0',
        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
        enterToClass: 'max-h-40	',
        leaveFromClass: 'max-h-40',
        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
        leaveToClass: 'max-h-0'
    }
};

here is the render :
Screencast from 30-07-2024 17:43:32.webm

Found out that in component/lib/passthrough/tailwind/index.js, transitions are :

const TRANSITIONS = {
    toggleable: {
        timeout: 500,
        classNames: {
            enter: 'max-h-0',
            enterActive: '!max-h-[1000px] overflow-hidden transition-[max-height] duration-500 ease-in',
            exit: 'max-h-[1000px]',
            exitActive: '!max-h-0 overflow-hidden transition-[max-height] duration-500 ease-out'
        }
    }
};

And that one works as you can see :
Screencast from 31-07-2024 09:21:30.webm

I am creating a PR. Creating this issue as recommended in PR. (#6954)

Reproducer

No response

System Information

System:
OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
CPU: (24) x64 12th Gen Intel(R) Core(TM) i7-12850HX
Memory: 15.07 GB / 31.01 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 14.21.3 - ~/.nvm/versions/node/v14.21.3/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v14.21.3/bin/yarn
npm: 6.14.18 - ~/.nvm/versions/node/v14.21.3/bin/npm
Browsers:
Chrome: 127.0.6533.88
npmPackages:
primereact: ^10.7.0 => 10.7.0
react: 18.3.1 => 18.3.1

Steps to reproduce the behavior

  1. Add <PrimeReactProvider /> with unstyled to true
  2. Add pt by following docs : https://primereact.org/accordion/#unstyled

Expected behavior

Transitions works

@samy-mssi samy-mssi added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 31, 2024
@melloware melloware added Component: Unstyled Issue related to unstyled/passthrough attributes 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 Jul 31, 2024
@melloware melloware added this to the 10.8.1 milestone Jul 31, 2024
@melloware melloware added Component: Documentation Issue or pull request is related to Documentation and removed Component: Tailwind Tailwind specific issue Component: Unstyled Issue related to unstyled/passthrough attributes labels Jul 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Documentation Issue or pull request is related to Documentation
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants