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

[Link with icon]: Icon placement not changing #7074

Closed
IgnacioBecerra opened this issue Sep 7, 2021 · 4 comments · Fixed by #8238
Closed

[Link with icon]: Icon placement not changing #7074

IgnacioBecerra opened this issue Sep 7, 2021 · 4 comments · Fixed by #8238
Assignees
@proeung
Labels
bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed

Comments

@IgnacioBecerra
Copy link
Contributor

IgnacioBecerra commented Sep 7, 2021 •
edited by proeung
Loading

Engineering info:

Describe the issue:

What did you expect to happen? What happened instead?

The Link With Icon's icon placement is not changing if chosen to be on the left, stays right.

Component(s) impacted? Please include screenshots, or code and relevant URLs.

Link with icon

What version of Carbon for IBM.com are you using?

Web Components Canary

Steps to reproduce the issue (if applicable):

  1. Change icon-placement knob to left
  2. Nothing changes
@IgnacioBecerra IgnacioBecerra added the bug Something isn't working label Sep 7, 2021
@RobertaJHahn RobertaJHahn added the dev Needs some dev work label Sep 7, 2021
@emyarod
Copy link
Member

emyarod commented Sep 7, 2021

just ran into this while working on #6265, I have a potential fix but just need design confirmation on what the behavior should be when icon placement is on the left and text is wrapping, since the icon wraps inline with text when it's placed on the right side (most of the time)

image

image

related #5705 #6812 cc @shixiedesign

@emyarod
Copy link
Member

emyarod commented Sep 8, 2021

this may also be a storybook only issue as it seems to function properly when the icon placement knob is changed and the storybook canvas is opened in a new tab

@RobertaJHahn RobertaJHahn added package: web components Work necessary for the IBM.com Library web components package design Applied to all issues assigned to the design team members. Filter used in planning meetings follow-up: DDS design and removed dev Needs some dev work labels Sep 8, 2021
@shixiedesign
Copy link
Contributor

Here's the link with icon text wrapping spec & example. @emyarod

image

@shixiedesign shixiedesign added dev Needs some dev work and removed follow-up: DDS design design Applied to all issues assigned to the design team members. Filter used in planning meetings labels Sep 13, 2021
@RobertaJHahn RobertaJHahn added the severity 4 Affects minor functionality, no workaround needed label Sep 14, 2021
@jeffchew jeffchew added this to the Sprint 21-24 milestone Sep 29, 2021
@emyarod
Copy link
Member

emyarod commented Nov 16, 2021

possibly related storybookjs/storybook#16682

@jeffchew jeffchew modified the milestones: Sprint 21-24, Sprint 21-25 Nov 16, 2021
@jeffchew jeffchew removed this from the Sprint 21-25 milestone Dec 2, 2021
@emyarod emyarod mentioned this issue Dec 13, 2021
Closed
2 tasks
@emyarod emyarod removed their assignment Jan 24, 2022
@proeung proeung added follow-up: innovation team owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants and removed follow-up: innovation team labels Feb 8, 2022
@proeung proeung self-assigned this Feb 8, 2022
@proeung proeung mentioned this issue Feb 8, 2022
Merged
@proeung proeung linked a pull request Feb 8, 2022 that will close this issue
fix(link-with-icon): adjust left icon placement style & clean up #8238
Merged
@kodiakhq kodiakhq bot closed this as completed in #8238 Feb 11, 2022
kodiakhq bot pushed a commit that referenced this issue Feb 11, 2022
@proeung
fix(link-with-icon): adjust left icon placement style & clean up (#8238)
0a0c5ea 
### Related Ticket(s)

#7074

### Description

- This PR fixes the issue where the `left` icon placement is not aligning to the left-hand side.

### Changelog

**Changed**

- Adjust styling in the shared `_link-with-icon.scss` style and clean up duplicate styling.

### Testing Instruction

- Visit the "Link with Icon" component
- Adjust the "Icon Position (icon-placement)" knob to `left`
- Ensure that the placement of the icon is in alignment with the design specs.

<!-- 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: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@proeung proeung

Labels
bug Something isn't working dev Needs some dev work owner: Innovation Team used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants package: web components Work necessary for the IBM.com Library web components package severity 4 Affects minor functionality, no workaround needed
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(link-with-icon): adjust left icon placement style & clean up proeung/carbon-for-ibm-dotcom
9 participants
@jeffchew @proeung @emyarod @shixiedesign @RichKummer @ariellalgilmore @ljcarot @IgnacioBecerra @RobertaJHahn