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.

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

feat(skeleton-text): adds animated, support for border-radius and height #17612

Merged
merged 11 commits into from Feb 27, 2019

Conversation

Projects
None yet
2 participants
@brandyscarney
Copy link
Member

commented Feb 26, 2019

❗️ dev build including this PR: 4.1.0-dev.201902272232.d66b12b ❗️

  • moves most of the CSS to the host element so that it's easier to customize the skeleton text
  • adds auto inherit for border-radius
  • moves height to 100% so it will naturally fill an avatar and thumbnail
  • adds animated property defaulted to false
  • removes mode specific styles as they're the same
  • changes background to an rgba making it easier to customize
  • still works outside of a container element
  • adds usage examples for javascript and angular
  • moves the width to the parent element making it easier to style
  • adds the ability to style the width using CSS
  • uses the global theme text color as the background if a custom background is not supplied before defaulting

master feat-skeleton-text-animated
localhost_3333_src_components_skeleton-text_test_basic iphone 6_7_8 2 localhost_3333_src_components_skeleton-text_test_basic iphone 6_7_8 3
feat(skeleton-text): adds animated, support for border-radius and height
- moves most of the CSS to the host element so that it's easier to customize the skeleton text
- adds auto inherit for border-radius
- moves the width to the parent element making it easier to style
- moves height to 100% so it will naturally fill an avatar and thumbnail
- adds animated property defaulted to `false`
- removes mode specific styles as they're the same
- changes background to an rgba making it easier to customize

this needs to be reviewed to make sure there are no breaking changes, plus an API decision needs to be made

brandyscarney added a commit to ionic-team/ionic-docs that referenced this pull request Feb 26, 2019

fix(skeleton-text): add demo and images
- this has an ugly hack in it to make thumbnail take up the full height, it will need to be removed with this PR: ionic-team/ionic#17612

references #463

brandyscarney added some commits Feb 26, 2019

fix(skeleton-text): don't take full height outside of a container
- this allows skeleton text to just be normal sentences in a content
- only apply height 100% if inside of media (this is so that it will work with our shadow elements, otherwise it will automatically inherit)
- allows customization of height using line-height & margin

brandyscarney added some commits Feb 27, 2019

fix(skeleton-text): fix animate to work with custom CSS
- documents CSS props properly
fix(skeleton-text): allow width to be set by CSS property
- removes the 100% default from the width prop
- sets 100% via CSS so it still defaults to 100% width
- allows the element width to be styled using CSS classes or inline styles

@brandyscarney brandyscarney marked this pull request as ready for review Feb 27, 2019

brandyscarney added some commits Feb 27, 2019

@brandyscarney brandyscarney merged commit d66b12b into master Feb 27, 2019

2 checks passed

build Workflow: build
Details
screenshot Screenshot
Details

@brandyscarney brandyscarney deleted the feat-skeleton-text-animated branch Feb 27, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member Author

commented Feb 27, 2019

Published a dev build with this if anyone wants to try it out early: 4.1.0-dev.201902272232.d66b12b

KillerCodeMonkey added a commit to KillerCodeMonkey/ionic that referenced this pull request Mar 1, 2019

feat(skeleton-text): adds animated prop and support for CSS styling (i…
…onic-team#17612)

* moves most of the CSS to the host element so that it's easier to customize the skeleton text
* adds auto inherit for border-radius
* moves height to 100% so it will naturally fill an avatar and thumbnail
* adds animated property defaulted to `false`
* removes mode specific styles as they're the same
* changes background to an rgba making it easier to customize
* still works outside of a container element
* adds usage examples for javascript and angular
* moves the width to the parent element making it easier to style
* adds the ability to style the width using CSS
* uses the global theme text color as the background if a custom background is not supplied before defaulting

closes ionic-team/ionic-docs#407
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.