[EuiAspectRatio] Fix incorrectly inherited height and ignored style
prop
#6141
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
The video on https://elastic.github.io/eui/#/guidelines/accessibility was not working correctly due to the
height: 100%
set (which was attempting to inherit height from the parent div which had aflex-direction: column;
set).If we're using the
aspect-ratio
css (see #5818), we shouldn't be usingheight: 100%
- we should be usingheight: auto
due to settingwidth: 100%
, the same way an img tag gets treated essentially.I also noticed 2 more things while adding this fix:
style
s getting set by the consumer were not correctly being spread, anddiv
wrapper formax-width
is also unnecessary if we're using theaspect-ratio
CSS property: because it now behaves the same way as an img tag, the max-width can be set directly on the iframe.Before
After
QA
Checklist
- [ ] Checked in both light and dark modes- [ ] Props have proper autodocs and playground toggles- [ ] Added documentation- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Updated the Figma library counterpart