Skip to content

Conversation

AriannaChau
Copy link
Contributor

@AriannaChau AriannaChau commented Sep 8, 2021

Overview

This PR adds a new responsive fallback image in the instance that an image fails to load.

Screenshots

Screen Shot 2021-09-09 at 9 40 06 AM

Testing

  1. Deploy link

@changeset-bot
Copy link

changeset-bot bot commented Sep 8, 2021

🦋 Changeset detected

Latest commit: 1580ae3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudfour/patterns Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Sep 8, 2021

✔️ Deploy Preview for cloudfour-patterns ready!

🔨 Explore the source changes: 1580ae3

🔍 Inspect the deploy log: https://app.netlify.com/sites/cloudfour-patterns/deploys/613a7ba976842700074d4769

😎 Browse the preview: https://deploy-preview-1529--cloudfour-patterns.netlify.app

@AriannaChau AriannaChau marked this pull request as ready for review September 9, 2021 17:00
@tylersticka tylersticka requested a review from a team September 9, 2021 17:15
Copy link
Member

@tylersticka tylersticka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very cool!

Deferring approval to @cloudfour/dev in case there's anything that needs to change in order to use this with our service worker. (FYI @calebeby)

Paul-Hebert
Paul-Hebert previously approved these changes Sep 9, 2021
Copy link
Contributor

@Paul-Hebert Paul-Hebert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great Arianna! 🎉

I made a couple super nitpicky suggestions but this all looks good to me.

I don't see anything that I think would need to change for us to use this with our service worker. 🤔 We're including the assets directory in the output of our npm package so it seems like we should be able to grab that from Wordpress:

"files": [
"/dist",
"/src/compiled/tokens",
"/src/**/*.scss",
"/src/**/*.twig",
"!/src/**/demo/**/*.twig",
"/src/assets",
"!.gitignore",
"!src/index.scss"
],

Co-authored-by: Paul Hebert <paul@cloudfour.com>
Co-authored-by: Paul Hebert <paul@cloudfour.com>
<Story name="Responsive fallback image" height="200px">
{() =>
responsiveImageDeck({
ratios: ['1 / 1', '16 / 9', '9 / 16'],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick question, @AriannaChau! 🙂

In Safari, the aspect ratios all look the same in the documentation page. Does that matter? Is this expected? 🤔

Screen Shot 2021-09-09 at 2 33 25 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AGH! No, thank you for bringing that to my attention!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, is it because aspect-ratio isn't supported in Safari?

https://caniuse.com/mdn-css_properties_aspect-ratio

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like Safari doesn't support aspect-ratio (though it does in the Technology Preview so it should be rolling out soon)

I think that's fine for our pattern documentation site (though I'd be hesitant to use it on our actual site). I'm curious what others think though

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, I'm fine leaving it as-is for the documentation site. 😉

Copy link
Contributor

@Paul-Hebert Paul-Hebert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@AriannaChau AriannaChau merged commit d32385d into v-next Sep 9, 2021
@AriannaChau AriannaChau deleted the responsive-fallback branch September 9, 2021 22:35
@github-actions github-actions bot mentioned this pull request Sep 9, 2021
gerardo-rodriguez added a commit that referenced this pull request Sep 13, 2021
…into feature/button-swap

* 'v-next' of github.com:cloudfour/cloudfour.com-patterns:
  Update storybook monorepo to v6.3.8
  Update babel monorepo
  Incease whitespace for the ground nav component (#1533)
  Responsive fallback (#1529)
  Use aria-labelledby to add accessible names to articles (#1530)

# Conflicts:
#	package-lock.json
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add general purpose fallback image
4 participants