media-object-refinement

src/components/mediaObject/CdrMediaObject.vue

@@ -58,13 +58,22 @@ const rootProps = computed(() => {
     }
   }
 
-  // Enter overlay mode, which does not use these props, because they are not relevant:
-  // mediaPosition, mediaWidth, mediaHeight, mediaCover, align
+  // Enter overlay mode, which uses media heights and widths as dimensions for
+  // the entire container
   if (overlay) {
     classes.push(modifyClassName(baseClass, 'overlay'));
     Object.assign(additionalProps, { rows: 'auto', columns: 'auto' });
     inlineStyles['--cdr-media-object-row-align'] = overlayRowAlign;
     inlineStyles['--cdr-media-object-column-align'] = overlayColumnAlign;
+
+    // Use mediaHeight to generate row height
+    if (mediaHeight === 'string') {
+      additionalProps.rows = mediaHeight;
+    } else if (mediaHeight) {
+      additionalProps.rows = mediaHeight;
+    } else {
+      additionalProps.rows = 'auto';
+    }
   } else {
     // Get layout related props and inline styles based on media measurements and
     // content position, both of which can be dynamic

src/components/mediaObject/examples/MediaObject.vue

@@ -131,9 +131,22 @@ const examples: MediaObjectExample[] = [
       overlay: true,
       overlayColumnAlign: 'end',
       overlayRowAlign: 'center',
-      withBorder: true,
-      borderWidth: 'one-x',
-      radius: 'softer',
+    },
+    flags: ['color-inverse', 'image-1/1', 'content-narrow'],
+  },
+  {
+    label: 'overlay, media height static',
+    props: {
+      overlay: true,
+      mediaHeight: '200px',
+    },
+    flags: ['color-inverse', 'image-1/1', 'content-narrow'],
+  },
+  {
+    label: 'overlay, media height responsive',
+    props: {
+      overlay: true,
+      mediaHeight: { xs: '200px', sm: '200px', md: '400px', lg: '400px' },
     },
     flags: ['color-inverse', 'image-1/1', 'content-narrow'],
   },

src/components/mediaObject/styles/vars/CdrMediaObject.vars.scss

@@ -69,6 +69,7 @@ $media-object-component: 'media-object';
 // Allow for content to overlay media
 @mixin cdr-media-object-overlay-mixin($component) {
   &--overlay {
+    grid-template-areas: 'media';
     position: relative;
 
     @include content {

src/types/interfaces.ts

@@ -16,6 +16,7 @@ import type {
   QueryType,
   Position,
   Alignment,
+  AlignmentValue,
   MediaMeasurement,
 } from './other';
 
@@ -364,12 +365,12 @@ export interface MediaObject extends Layout {
    * The alignment of the content along the x axis.
    * @values start, center, end
    */
-  overlayRowAlign?: Alignment;
+  overlayRowAlign?: AlignmentValue;
   /**
    * The alignment of the content along the y axis.
    * @values start, center, end
    */
-  overlayColumnAlign?: Alignment;
+  overlayColumnAlign?: AlignmentValue;
   /**
    * The spacing token to use for padding around the content. This can be an object with values for each Cedar breakpoint (xs, sm, md, lg).
    * @demoSelectMultiple false

src/utils/mediaObject.ts

@@ -88,7 +88,7 @@ export const getLayoutStyling = (
   const inlineStyles: NameValuePair = {};
 
   if (typeof mediaPosition === 'string') {
-    const fillAlgorithm = fillAlgorithmsByPosition[mediaPosition];    
+    const fillAlgorithm = fillAlgorithmsByPosition[mediaPosition];
     props.rows = getStructure(mediaHeight, fillAlgorithm.rows);
     props.columns = getStructure(mediaWidth, fillAlgorithm.columns);
     inlineStyles['--cdr-media-object-media-position'] = gridForMediaPosition[mediaPosition];