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(website): aspect-ratio docs page #104

Merged
merged 17 commits into from Sep 27, 2019

Conversation

@richbachman
Copy link
Collaborator

richbachman commented Sep 23, 2019

  • Added Aspect Ratio doc page content
  • Fix changelog margin on anchor and button doc pages
  • Remove storybook link in API section of anchor and button doc pages
  • Add iframe, embed, object, and video child styles to Aspect Ratio

Gatsby-Image doesn't play well with our LivePreview component, so I opted to not use the LivePreview for the image/component example.

Contributing to Twilio

All third-party contributors acknowledge that any contributions they provide will be made under the same open-source license that the open-source project is provided under.

  • I acknowledge that all my contributions will be made under the project's license.
@now

This comment has been minimized.

Copy link

now bot commented Sep 23, 2019

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://paste-git-aspect-ratio-doc-page.twilio-dsys.now.sh

Aspect Ratio can also be used to embed components, or other HTML elements that
needs to be set to a specific height-to-width ratio. A component or other HTML
element use case is the need to align an HTML element with an image in two columns.
See examples.

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Sep 24, 2019

Collaborator

Yeah, lets just insert an example directly after these 2 paras. This example could be a component example.

### Examples
<LivePreview scope={{Absolute, AspectRatio, Box}} language="jsx">

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Sep 24, 2019

Collaborator

You can then drop this, dangling example

This comment has been minimized.

Copy link
@richbachman

richbachman Sep 25, 2019

Author Collaborator

I moved the color swatch example under the paragraph that discusses it.

@@ -20,6 +20,14 @@ const globalStyles = css`
margin: 0;
font-size: 14px;
}
iframe {

This comment has been minimized.

Copy link
@richbachman

richbachman Sep 25, 2019

Author Collaborator

I added this here for now as global style. It makes iframe embeds actually work with Aspect Ratio. We should probably just move this to the default styles for Aspect Ratio. Thoughts? @TheSisb @SiTaggart

This comment has been minimized.

Copy link
@TheSisb

TheSisb Sep 25, 2019

Collaborator

I don't like this as a global style, it doesn't scale to non-AspectRatio iframes.

I think you just have to make a new component and put the styles there.

This comment has been minimized.

Copy link
@SiTaggart

SiTaggart Sep 25, 2019

Collaborator

hmmm I feel like the expectation from reading the docs is that it should "just work", so maybe it belongs to the Aspect Ratio. Do you need to do the same thing for an image? What's the least amount of work for a consumer to do for all cases?

This comment has been minimized.

Copy link
@TheSisb

TheSisb Sep 25, 2019

Collaborator

It's probably safe to do something like > :first-child here.

This comment has been minimized.

Copy link
@richbachman

richbachman Sep 25, 2019

Author Collaborator

@SiTaggart you're right. It should "just work". I'm going to move that style over to the Aspect Ratio where it should be. I think if that component was kicked off properly, we would have caught that. Image is much simpler:

<AspectRatio ratio="4:3">
    <img src="" />
</AspectRatio>

This comment has been minimized.

Copy link
@richbachman

richbachman Sep 25, 2019

Author Collaborator

Added embed, iframe, object, video styles to Aspect Ration in the latest commit.

Copy link
Collaborator

SiTaggart left a comment

LGTM 👍

@now now bot had a problem deploying to staging Sep 27, 2019 Failure
@now now bot temporarily deployed to staging Sep 27, 2019 Inactive
@SiTaggart SiTaggart dismissed TheSisb’s stale review Sep 27, 2019

Feedback has been complete, but Shadi is sick

@richbachman richbachman merged commit 7a78689 into master Sep 27, 2019
5 checks passed
5 checks passed
Semantic Pull Request ready to be squashed
Details
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: prettier Your tests passed on CircleCI!
Details
ci/circleci: test Your tests passed on CircleCI!
Details
now Deployment has completed
Details
@richbachman richbachman deleted the aspect-ratio-doc-page branch Sep 27, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.