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

ion-item with icons spacing does not match Material Design guidelines (post shadow dom only) #14799

Closed
corysmc opened this issue Jul 18, 2018 · 1 comment · Fixed by #16182
Closed

ion-item with icons spacing does not match Material Design guidelines (post shadow dom only) #14799

corysmc opened this issue Jul 18, 2018 · 1 comment · Fixed by #16182
Assignees
@brandyscarney
Labels
package: core @ionic/core package

Comments

@corysmc
Copy link
Contributor

corysmc commented Jul 18, 2018

Bug Report

Ionic Info

[email protected]

Describe the Bug
Post shadow dom implementation the spacing between the ion-item icon and the text is off.

Steps to Reproduce
Steps to reproduce the behavior:
1.

<ion-item>
   <ion-icon slot="start" name="body"></ion-icon>
   <ion-label>Cory</ion-label>
</ion-item>
  1. Observe spacing compared to alpha.6

Related Code
https://codepen.io/corysmc/pen/ejdZJv?editors=1010

Expected Behavior
items with icons spacing matches material design spacing
@ionitron-bot ionitron-bot bot added triage and removed triage labels Jul 18, 2018
@brandyscarney brandyscarney added the package: core @ionic/core package label Jul 20, 2018
@brandyscarney brandyscarney mentioned this issue Aug 30, 2018
Closed
@brandyscarney brandyscarney self-assigned this Nov 1, 2018
brandyscarney added a commit that referenced this issue Nov 1, 2018
@brandyscarney
fix(item): update to match material design spec
9fda61f 
- splits the item min height by mode
- removes padding end from the slotted end components in favor of using 16px on the item
- updates the icon color to lighter gray (rgb)
- removes font size change from text wrapped labels

fixes #14799
@brandyscarney brandyscarney mentioned this issue Nov 1, 2018
Merged
brandyscarney added a commit that referenced this issue Nov 4, 2018
@brandyscarney
fix(item): update to match Material Design spec (#16182)
e416c23 
- splits the item min height by mode
- removes padding end from the slotted end components in favor of using 16px on the item
- updates the icon color to lighter gray (rgb)
- removes font size change from text wrapped labels
- add list spec test to include MD examples

fixes #14799
@ionitron-bot
Copy link

ionitron-bot bot commented Dec 4, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Dec 4, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@brandyscarney brandyscarney

Labels
package: core @ionic/core package
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(item): update to match Material Design spec ionic-team/ionic-framework
2 participants
@corysmc @brandyscarney