[PR feedback] EuiAspectRatio changes

cee-chen · cee-chen · commit f0452142d49e · 2024-04-01T22:48:32.000-07:00
diff --git a/src/components/aspect_ratio/aspect_ratio.test.tsx b/src/components/aspect_ratio/aspect_ratio.test.tsx
@@ -31,21 +31,36 @@ describe('EuiAspectRatio', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('merges child styles', () => {
+  it('merges all styles', () => {
     const { getByTestSubject } = render(
-      <EuiAspectRatio height={4} width={9}>
+      <EuiAspectRatio height={4} width={9} style={{ color: 'bronze' }}>
         <div data-test-subj="child" style={{ backgroundColor: 'salmon' }} />
       </EuiAspectRatio>
     );
 
     expect(getByTestSubject('child')).toHaveStyle({
+      color: 'bronze',
       'background-color': 'salmon',
+      'inline-size': '100%', // jsdom doesn't know how to interpret `aspect-ratio` CSS, so we just check for something it does know how to render
     });
   });
 
+  it('merges all classNames', () => {
+    const { getByTestSubject } = render(
+      <EuiAspectRatio height={4} width={9} className="hello">
+        <div data-test-subj="child" className="world" />
+      </EuiAspectRatio>
+    );
+
+    const finalDiv = getByTestSubject('child');
+    expect(finalDiv).toHaveClass('euiAspectRatio');
+    expect(finalDiv).toHaveClass('hello');
+    expect(finalDiv).toHaveClass('world');
+  });
+
   test('maxWidth', () => {
     const { getByTestSubject } = render(
-      <EuiAspectRatio height={16} width={9} maxWidth={500} {...requiredProps}>
+      <EuiAspectRatio height={16} width={9} maxWidth={500}>
         <div data-test-subj="child" />
       </EuiAspectRatio>
     );
diff --git a/src/components/aspect_ratio/aspect_ratio.tsx b/src/components/aspect_ratio/aspect_ratio.tsx
@@ -8,37 +8,47 @@
 
 import React, {
   FunctionComponent,
+  HTMLAttributes,
   ReactElement,
   CSSProperties,
   useMemo,
 } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
 import { logicalStyles } from '../../global_styling';
 
-export type EuiAspectRatioProps = {
-  /**
-   * Aspect ratio height. For example 9 would be widescreen video.
-   */
-  height: number;
-  /**
-   * Aspect ratio width. For example 16 would be widescreen video.
-   */
-  width: number;
-  /**
-   * The maximum width you want the child to stretch to.
-   */
-  maxWidth?: CSSProperties['width'];
-  children: ReactElement<any>;
-};
+export type EuiAspectRatioProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    /**
+     * Aspect ratio height. For example 9 would be widescreen video.
+     */
+    height: number;
+    /**
+     * Aspect ratio width. For example 16 would be widescreen video.
+     */
+    width: number;
+    /**
+     * The maximum width you want the child to stretch to.
+     */
+    maxWidth?: CSSProperties['width'];
+    children: ReactElement<any>;
+  };
 
 export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
   children,
+  className,
+  style,
   height,
   width,
   maxWidth,
+  ...rest
 }) => {
-  const classes = classNames('euiAspectRatio', children.props.className);
+  const classes = classNames(
+    'euiAspectRatio',
+    className,
+    children.props.className
+  );
 
   const euiAspectRatioStyle = useMemo(
     () =>
@@ -52,7 +62,8 @@ export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
   );
 
   return React.cloneElement(children, {
+    ...rest,
     className: classes,
-    style: { ...children.props.style, ...euiAspectRatioStyle },
+    style: { ...children.props.style, ...euiAspectRatioStyle, ...style },
   });
 };
