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

React: LinkWithIcon - icon placement is wrong when disabled and inverse option is activated. #3964

Closed
Praveen-sr opened this issue Sep 16, 2020 · 0 comments
Closed

React: LinkWithIcon - icon placement is wrong when disabled and inverse option is activated. #3964

Praveen-sr opened this issue Sep 16, 2020 · 0 comments
Assignees
@IgnacioBecerra
Labels
bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 3 Affects minor functionality, has a workaround
Milestone
Sprint 20-20

Comments

@Praveen-sr
Copy link

Detailed description

Issue: LinkWithIcon - icon placement is on wrong side when 'disabled' and 'inverse' option is activated.

Steps to reproduce the issue

  1. Open LinkWithIcon on react staging link
  2. On knobs section, change icon placement to "left"
  3. Click on 'disabled' & 'inverse' checkbox
  4. Now, observe the link arrow icon is on right side, it must be on left.
    On hover, the arrow icon changes to left side.

Additional information

image.png
@Praveen-sr Praveen-sr added bug Something isn't working severity 3 Affects minor functionality, has a workaround labels Sep 16, 2020
@RobertaJHahn RobertaJHahn added package: react Work necessary for the Carbon for IBM.com react components package Airtable Done dev Needs some dev work labels Sep 16, 2020
@RobertaJHahn RobertaJHahn added this to the Sprint 20-20 milestone Sep 16, 2020
@IgnacioBecerra IgnacioBecerra self-assigned this Sep 29, 2020
@IgnacioBecerra IgnacioBecerra mentioned this issue Sep 30, 2020
Merged
kodiakhq bot pushed a commit that referenced this issue Oct 5, 2020
@IgnacioBecerra
fix(link-with-icon): fixed left icon placement w/options (#4095)
b965b86 
### Related Ticket(s)

#3964 

### Description

Icon repositioned to the right when both inverse and disable were active. It is a display issue where `display: flex` was only active during hover, while `display: inline` is active otherwise, causing the issue. Changed the `display` value to fit the hover behavior.

Before:

![](https://images.zenhubusercontent.com/5e21a7b470118a498429a20e/2f7c5e3d-8c77-4ede-a56b-e384c459122f)

After:

![](https://i.imgur.com/arQt1xs.png)

### Changelog

**Changed**

- Changed `display: inline` to `display: flex` to account for both disabled and inverse options are active,


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: vanilla": Vanilla -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive, React (Expressive) -->
<!-- *** "RTL": React (RTL) -->
<!-- *** "feature flag": React (experimental) -->
@jeffchew jeffchew mentioned this issue Oct 8, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@IgnacioBecerra IgnacioBecerra

Labels
bug Something isn't working dev Needs some dev work package: react Work necessary for the Carbon for IBM.com react components package severity 3 Affects minor functionality, has a workaround
Projects
None yet
Milestone
Sprint 20-20
Development

No branches or pull requests
5 participants
@jeffchew @ljcarot @IgnacioBecerra @RobertaJHahn @Praveen-sr