Skip to content

Commit b26408e

Browse files
authored
[VideoThumbnail] Fix validateDOMNesting warning (#7911)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? There are two pretty loud `validateDOMNesting` warnings logged in development that seem to be originating from the `VideoThumbnail` component: <img width="712" alt="Screenshot 2022-12-13 at 5 14 02 PM" src="https://user-images.githubusercontent.com/9685204/207456198-d3b2a437-869a-4f9e-9441-44bbb851839e.png"> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? I'm hoping that this extremely naive fix might just do the trick, but I have not tested this beyond storybook. If there are any considerations that I missed, please let me know. Visually, there does not appear to be a difference after the `p` is changed to a `div` **Before**: <img width="737" alt="Screenshot 2022-12-13 at 5 15 53 PM" src="https://user-images.githubusercontent.com/9685204/207456176-e05c764b-ff91-4d1b-9ad6-e119f9712de4.png"> **After**: <img width="737" alt="Screenshot 2022-12-13 at 5 15 40 PM" src="https://user-images.githubusercontent.com/9685204/207456189-bcb7913b-befd-46b9-999f-c23ee023295b.png"> <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) I added the snapshot to a Notebooks [spin instance](https://admin.web.video-thumbnail-fix.ben-milton.us.spin.dev/store/shop1/apps/development-notebooks-key/), where we have a `VideoThumbnail` component on the main index page. 1. Ensure that the `validateDOMNesting` warnings are now gone from the dev console 2. Ensure that the `VideoThumbnail` and timestamp in particular still works and appears the same as before the change ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent bdc62eb commit b26408e

File tree

2 files changed

+7
-2
lines changed

2 files changed

+7
-2
lines changed

.changeset/rude-crabs-jog.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Fix validateDOMNesting warning in `VideoThumbnail`

polaris-react/src/components/VideoThumbnail/VideoThumbnail.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function VideoThumbnail({
7777
}
7878

7979
const timeStampMarkup = videoLength ? (
80-
<p className={styles.Timestamp}>
80+
<div className={styles.Timestamp}>
8181
<Stack alignment="center" spacing="extraTight">
8282
<span className={styles.PlayIcon}>
8383
<Icon source={PlayMinor} />
@@ -90,7 +90,7 @@ export function VideoThumbnail({
9090
{secondsToTimestamp(videoLength)}
9191
</Text>
9292
</Stack>
93-
</p>
93+
</div>
9494
) : null;
9595

9696
let progressMarkup = null;

0 commit comments

Comments
 (0)