Add EuiAspectRatio playground story + fix unmerged styles

src/components/aspect_ratio/aspect_ratio.stories.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { disableStorybookControls } from '../../../.storybook/utils';
+
+import { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio';
+
+const meta: Meta<EuiAspectRatioProps> = {
+  title: 'EuiAspectRatio',
+  component: EuiAspectRatio,
+};
+
+export default meta;
+type Story = StoryObj<EuiAspectRatioProps>;
+
+export const Playground: Story = {
+  args: {
+    height: 9,
+    width: 16,
+    maxWidth: '100%',
+    children: (
+      <div
+        style={{
+          backgroundColor: 'gray',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        Resize the demo window
+      </div>
+    ),
+  },
+  argTypes: disableStorybookControls(['children']),
+};

src/components/aspect_ratio/aspect_ratio.test.tsx

@@ -53,6 +53,19 @@ describe('EuiAspectRatio', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('inherits child styles', () => {
+    const { getByTestSubject } = render(
+      <EuiAspectRatio height={4} width={9} style={{ color: 'gray' }}>
+        <div data-test-subj="child" style={{ backgroundColor: 'salmon' }} />
+      </EuiAspectRatio>
+    );
+
+    expect(getByTestSubject('child')).toHaveStyle({
+      'background-color': 'salmon',
+      color: 'gray',
+    });
+  });
+
   describe('props', () => {
     describe('maxWidth', () => {
       test('is rendered', () => {

src/components/aspect_ratio/aspect_ratio.tsx

@@ -44,6 +44,7 @@ export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
   const classes = classNames('euiAspectRatio', className);
 
   const euiAspectRatioStyle = {
+    ...children.props.style,
     aspectRatio: `${width} / ${height}`,
     height: 'auto',
     width: '100%',