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

Card: focus indicator doesn't wrap full Card when onClick and height props are specifed #6741

Closed
1 task done
damienrobson-sage opened this issue May 22, 2024 · 2 comments · Fixed by #6748
Closed
1 task done

Card: focus indicator doesn't wrap full Card when onClick and height props are specifed #6741

damienrobson-sage opened this issue May 22, 2024 · 2 comments · Fixed by #6748
Labels
Bug On Backlog released

Comments

@damienrobson-sage
Copy link
Contributor

damienrobson-sage commented May 22, 2024 •
edited by edleeks87

Description

Spoke to @edleeks87 who informed me that the height prop is not passed to the underlying button when there’s an onClick also set. As shown, this leads to some interesting focus indicator outlines.

Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-8fzovy?file=src%2FApp.tsx

Steps to reproduce

Tab onto a Card with onClick and height props defined

JIRA ticket numbers (Sage only)

No response

Suggested solution

No response

Carbon version

125.0.0

Design tokens version

No response

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

No response

Confidentiality

  • I confirm there is no confidential or commercially sensitive information included.
@damienrobson-sage damienrobson-sage added Bug triage Triage Required labels May 22, 2024
@edleeks87
Copy link
Contributor

FE-6584

@edleeks87 edleeks87 added On Backlog and removed triage Triage Required labels May 23, 2024
edleeks87 added a commit that referenced this issue May 23, 2024
@edleeks87
fix(card): ensure that focus outline wraps all card content when `hei…
a01767b 
…ght` prop is set

Ensures that the card content has a responsive height so the focuss styles wrap all of the
interactive area of the content when the `Card` has a `height` prop passed

fix #6741
edleeks87 added a commit that referenced this issue May 23, 2024
@edleeks87
fix(card): ensure that focus outline wraps all card content when `hei…
9e208d8 
…ght` prop is set

Ensures that the card content has a responsive height so the focus styles wrap all of the
interactive area of the content when the `Card` has a `height` prop passed

fix #6741
@edleeks87 edleeks87 mentioned this issue May 23, 2024
Merged
9 tasks
edleeks87 added a commit that referenced this issue May 24, 2024
@edleeks87
fix(card): ensure that focus outline wraps all card content when `hei…
5b73495 
…ght` prop is set

Ensures that the card content has a responsive height so the focus styles wrap all of the
interactive area of the content when the `Card` has a `height` prop passed

fix #6741
carbonci pushed a commit that referenced this issue May 29, 2024
@semantic-release-bot @carbonci
chore(release): 136.0.1
3fd5420 
### [136.0.1](v136.0.0...v136.0.1) (2024-05-29)

### Bug Fixes

* **card:** ensure that focus outline wraps all card content when `height` prop is set ([5b73495](5b73495)), closes [#6741](#6741)
@carbonci
Copy link
Collaborator

🎉 This issue has been resolved in version 136.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug On Backlog released
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(card): ensure that focus outline wraps all card content when height prop is set Sage/carbon
3 participants
@edleeks87 @damienrobson-sage @carbonci