From 7cc2c89f92f618f85701367e7bb0fb6ea66bde92 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 26 Aug 2022 10:43:12 -0400
Subject: [PATCH] remove responsive media

---
 docs/_sidebar.md                              |  1 -
 docs/components/responsive-media.md           | 91 -------------------
 docs/resources/changelog.md                   |  3 +
 .../responsive-media.styles.ts                | 36 --------
 .../responsive-media/responsive-media.ts      | 52 -----------
 src/shoelace.ts                               |  1 -
 6 files changed, 3 insertions(+), 181 deletions(-)
 delete mode 100644 docs/components/responsive-media.md
 delete mode 100644 src/components/responsive-media/responsive-media.styles.ts
 delete mode 100644 src/components/responsive-media/responsive-media.ts

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index ba738bc1..84e9158e 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -80,7 +80,6 @@
   - [Popup](/components/popup)
   - [Relative Time](/components/relative-time)
   - [Resize Observer](/components/resize-observer)
-  - [Responsive Media](/components/responsive-media)
   - [Visually Hidden](/components/visually-hidden)
 
 - Design Tokens
diff --git a/docs/components/responsive-media.md b/docs/components/responsive-media.md
deleted file mode 100644
index bdb96bad..00000000
--- a/docs/components/responsive-media.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# Responsive Media
-
-[component-header:sl-responsive-media]
-
-Displays media in the desired aspect ratio.
-
-You can slot in any [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), including `<iframe>`, `<img>`, and `<video>`. As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container. The default aspect ratio is `16:9`.
-
-```html preview
-<sl-responsive-media>
-  <img
-    src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
-    alt="A train riding through autumn foliage with mountains in the distance."
-  />
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia>
-    <img
-      src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
-      alt="A train riding through autumn foliage with mountains in the distance."
-    />
-  </SlResponsiveMedia>
-);
-```
-
-## Examples
-
-### Responsive Images
-
-The following image maintains a `4:3` aspect ratio as its container is resized.
-
-```html preview
-<sl-responsive-media aspect-ratio="4:3">
-  <img
-    src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
-    alt="Two blue chairs on a sandy beach."
-  />
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia aspect-ratio="4:3">
-    <img
-      src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
-      alt="Two blue chairs on a sandy beach."
-    />
-  </SlResponsiveMedia>
-);
-```
-
-### Responsive Videos
-
-The following video is embedded using an `iframe` and maintains a `16:9` aspect ratio as its container is resized.
-
-```html preview
-<sl-responsive-media aspect-ratio="16:9">
-  <iframe
-    title="Video of the kittens"
-    src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
-    frameborder="0"
-    allow="autoplay; fullscreen"
-    allowfullscreen
-  ></iframe>
-</sl-responsive-media>
-```
-
-```jsx react
-import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
-
-const App = () => (
-  <SlResponsiveMedia aspect-ratio="16:9">
-    <iframe
-      title="Video of the kittens"
-      src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
-      frameborder="0"
-      allow="autoplay; fullscreen"
-      allowfullscreen
-    />
-  </SlResponsiveMedia>
-);
-```
-
-[component-metadata:sl-responsive-media]
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 595c8dde..3708ee8c 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -10,6 +10,9 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+This release removes the `<sl-responsive-media>` component. When this component was introduced, support for [`aspect-radio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)) wasn't great. These days, [the property is supported](https://caniuse.com/mdn-css_properties_aspect-ratio) by all of Shoelace's target browsers, making a dedicated component redundant.
+
+- 🚨 BREAKING: Removed `<sl-responsive-media>` (use the well-supported `aspect-ratio` CSS property instead)
 - Added an expand/collapse animation to `<sl-tree-item>`
 - Added `sl-lazy-change` event to `<sl-tree-item>`
 - Fixed a bug in `<sl-popup>` that didn't account for the arrow's diagonal size
diff --git a/src/components/responsive-media/responsive-media.styles.ts b/src/components/responsive-media/responsive-media.styles.ts
deleted file mode 100644
index f9e7ed9b..00000000
--- a/src/components/responsive-media/responsive-media.styles.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { css } from 'lit';
-import componentStyles from '../../styles/component.styles';
-
-export default css`
-  ${componentStyles}
-
-  :host {
-    display: block;
-  }
-
-  .responsive-media {
-    position: relative;
-  }
-
-  .responsive-media ::slotted(*) {
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-  }
-
-  .responsive-media--cover ::slotted(embed),
-  .responsive-media--cover ::slotted(iframe),
-  .responsive-media--cover ::slotted(img),
-  .responsive-media--cover ::slotted(video) {
-    object-fit: cover !important;
-  }
-
-  .responsive-media--contain ::slotted(embed),
-  .responsive-media--contain ::slotted(iframe),
-  .responsive-media--contain ::slotted(img),
-  .responsive-media--contain ::slotted(video) {
-    object-fit: contain !important;
-  }
-`;
diff --git a/src/components/responsive-media/responsive-media.ts b/src/components/responsive-media/responsive-media.ts
deleted file mode 100644
index 7727b9a3..00000000
--- a/src/components/responsive-media/responsive-media.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import ShoelaceElement from '../../internal/shoelace-element';
-import styles from './responsive-media.styles';
-import type { CSSResultGroup } from 'lit';
-
-/**
- * @since 2.0
- * @status stable
- *
- * @slot - The element to receive the aspect ratio. Should be a replaced element, such as `<img>`, `<iframe>`, or `<video>`.
- */
-@customElement('sl-responsive-media')
-export default class SlResponsiveMedia extends ShoelaceElement {
-  static styles: CSSResultGroup = styles;
-
-  /**
-   * The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in
-   * this format will be ignored.
-   */
-  @property({ attribute: 'aspect-ratio' }) aspectRatio = '16:9';
-
-  /** Determines how content will be resized to fit its container. */
-  @property() fit: 'cover' | 'contain' = 'cover';
-
-  render() {
-    const split = this.aspectRatio.split(':');
-    const x = parseFloat(split[0]);
-    const y = parseFloat(split[1]);
-    const paddingBottom = !isNaN(x) && !isNaN(y) && x > 0 && y > 0 ? `${(y / x) * 100}%` : '0';
-
-    return html`
-      <div
-        class=${classMap({
-          'responsive-media': true,
-          'responsive-media--cover': this.fit === 'cover',
-          'responsive-media--contain': this.fit === 'contain'
-        })}
-        style="padding-bottom: ${paddingBottom}"
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'sl-responsive-media': SlResponsiveMedia;
-  }
-}
diff --git a/src/shoelace.ts b/src/shoelace.ts
index b54c81d2..a84bd482 100644
--- a/src/shoelace.ts
+++ b/src/shoelace.ts
@@ -39,7 +39,6 @@ export { default as SlRange } from './components/range/range';
 export { default as SlRating } from './components/rating/rating';
 export { default as SlRelativeTime } from './components/relative-time/relative-time';
 export { default as SlResizeObserver } from './components/resize-observer/resize-observer';
-export { default as SlResponsiveMedia } from './components/responsive-media/responsive-media';
 export { default as SlSelect } from './components/select/select';
 export { default as SlSkeleton } from './components/skeleton/skeleton';
 export { default as SlSpinner } from './components/spinner/spinner';