Paste

Design System

Aspect Ratio

Status
alpha
Version
1.0.38
Sources
Github
Storybook
Install
yarn add @twilio-paste/aspect-ratio — or — yarn add @twilio-paste/core

Guidelines#

About Aspect Ratio#

The Aspect Ratio layout component dynamically modifies the height of an element based on its current width to match a width-to-height ratio. For example, a 4:3 ratio would make an element with a width of 400px have a height of 300px. This updates in real time when you resize the screen.

Composition Notes#

Aspect Ratio must contain exactly one child element. The child element should be sized fully to the Aspect Ratio bounding box so that it resizes correctly. One way of achieving this is through the Absolute component.

Be considerate of smaller devices when using this component. If necessary, you can modify the aspect ratio property at certain media query breakpoints.

When to use Aspect Ratio#

Aspect Ratio can be used to embed images and videos.

Use Aspect Ratio to make sure images and videos are scaled correctly on displays of various sizes. For example, you can use Aspect Ratio when a customer needs to see a preview of an uploaded document.

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

Go to API documentation

Another use case is for color swatches on a documentation site. These color swatches could be a specific height/width div that need to resize on specific devices. Aspect Ratio will allow the color swatches to resize correctly based on a ratio.

Do

Use for an image or embedded video, and have it resize at a specific ratio.

Don't

Don’t use with fixed size (width & height) elements, as those will not adhere to the width-to-height ratio.

Do

Use to embed a component or other HTML element.

Don't

Don’t use without any child elements, because this is only a container element.

Usage Guide#

API#

Installation#

yarn add @twilio-paste/aspect-ratio - or - yarn add @twilio-paste/core

Usage#

import {AspectRatio} from '@twilio-paste/aspect-ratio';
const Component = () => (
  <AspectRatio ratio="4:3">
    <Absolute>Test</Absolute>
  </AspectRatio>
);

Props#

PropTypeDescriptionDefault
ratiostringDetermines the aspect ratio of the element. Use a colon separated number pattern (width:height). Required4:3

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.38 (2020-05-27)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.37 (2020-05-20)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.36 (2020-05-07)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.35 (2020-05-07)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.34 (2020-05-04)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.33 (2020-05-01)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.32 (2020-04-25)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.31 (2020-04-22)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.30 (2020-04-17)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.29 (2020-04-15)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.28 (2020-04-08)

Bug Fixes#

  • aspect-ratio: package dependencies updated to be correct (875f22b)

1.0.27 (2020-04-07)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.26 (2020-04-07)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.25 (2020-04-02)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.24 (2020-03-28)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.23 (2020-03-24)

Bug Fixes#

  • aspect-ratio: switch from theme-tokens to theme package dep (17876fd)

1.0.22 (2020-03-20)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.21 (2020-03-17)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.20 (2020-03-17)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.19 (2020-03-11)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.18 (2020-03-06)

Bug Fixes#

  • add missing transitive peerDep on '@styled-system/css' (fdbb813)

1.0.17 (2020-03-02)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.16 (2020-02-28)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.15 (2020-02-26)

Bug Fixes#

  • package dependencies and deprecation warnings (#334) (0e88338)

1.0.14 (2020-02-14)

Bug Fixes#

  • aspect-ratio: add missing peer deps (5e1000d)

1.0.13 (2020-02-13)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.12 (2020-02-11)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.11 (2020-02-11)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.10 (2020-02-11)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.9 (2020-02-03)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.8 (2020-01-24)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.7 (2020-01-17)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.6 (2019-12-20)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.5 (2019-12-19)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.4 (2019-12-05)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.3 (2019-11-20)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.2 (2019-11-18)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.1 (2019-11-12)

Note: Version bump only for package @twilio-paste/aspect-ratio

1.0.0 (2019-11-11)

Features#

  • icons: delete old icons, add new streamline icons (#129) (571791d)

BREAKING CHANGES#

  • icons: removed all the inherited icons since we're moving to a new system

  • chore(icons): update icon list for storybook

  • fix(spinner): use new icon

  • fix(storybook): use new icon for story

  • fix(story): button icons should be 24px

  • fix: adjust icon size tokens

  • feat: add iconSizes as separate key in theme-tokens

  • feat(icons): icons package to use tokens and update icons

  • fix(spinner): update to use tokens and new icons

  • fix(button): use correct spinner size

  • fix(icons): major icons package fixes

  • huge overhaul to build process
  • now uses rollup
  • builds into cjs and esm directories
  • made the package publishable to npm
  • moved svg folder out of src, now src only holds react stuff
  • updated scripts to use new paths and cleaned up the code
  • programmatically generates rollup config from the icon-list command

  • chore: add new icons dist folders to gitignore

  • fix: spinner and button icon usage

  • feat(icons): add rollup icon list cache file

  • fix(core-bundle): sort packages for consistent builds

  • chore: use esm instead of es in rollup for correctness

  • chore: yarn.lock

  • fix(spinner): lint error

  • chore(icons): move rollup icon list

  • chore(spinner): use types package in story

  • fix(spinner): swap out destructured props for explicit props

0.2.1 (2019-10-31)

Note: Version bump only for package @twilio-paste/aspect-ratio

0.2.0 (2019-10-29)

Features#

0.1.1 (2019-09-16)#

Bug Fixes#

  • website: composable do-dont, add anchor examples (#81) (a799f1b)

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.