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.

Sign up for GitHub

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

Jump to bottom

Styling not applied to CardView wrapper when using an action bar #7684

Open
jluyau opened this issue Jan 30, 2025 · 0 comments · May be fixed by #7795
Open

Styling not applied to CardView wrapper when using an action bar #7684

jluyau opened this issue Jan 30, 2025 · 0 comments · May be fixed by #7795
Assignees
@yihuiliao

Comments

@jluyau
Copy link
Member

jluyau commented Jan 30, 2025

Provide a general summary of the issue here

If providing styling to <CardView> configured with renderActionBar, the props (e.g. UNSAFE_style, UNSAFE_className, styles) do not get applied to the wrapper (

react-spectrum/packages/@react-spectrum/s2/src/CardView.tsx

Lines 619 to 622 in 101d077

<div ref={domRef} className={style({position: 'relative', overflow: 'clip', size: 'fit'})}>
{cardView}
{actionBar}
</div>
)

🤔 Expected Behavior?

should be able to style the wrapper (when using an action bar) as one would style CardView

😯 Current Behavior

because the styles are not applied to the outer wrapper, the cardview does not behavior as we would like (e.g. placing it within a grid area). placing a div with these styling props around cardview configured with an action bar also doesn't work as expected

💁 Possible Solution

No response

🔦 Context

unable to place cardview within a specific grid area

🖥️ Steps to Reproduce

configure <CardView> with renderActionBar and a styling prop (e.g. styles)

Version

s2: 0.6.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS Sonoma 14.1.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response
@github-project-automation github-project-automation bot moved this to 🩺 To Triage in RSP Component Milestones Feb 5, 2025
@matthewdeutsch matthewdeutsch moved this from 🩺 To Triage to 📋 Waiting for Sprint in RSP Component Milestones Feb 11, 2025
@yihuiliao yihuiliao linked a pull request Feb 20, 2025 that will close this issue
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yihuiliao yihuiliao

Labels
None yet
Projects
RSP Component Milestones
Status: 📋 Waiting for Sprint
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(s2): apply styling to CardView when using an action bar adobe/react-spectrum
2 participants
@jluyau @yihuiliao