[EuiDescriptionList] Update display to grid for vertical column option with new props

src/components/description_list/description_list.styles.ts

@@ -7,15 +7,21 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalTextAlignCSS, euiMinBreakpoint } from '../../global_styling';
+import {
+  logicalTextAlignCSS,
+  euiMaxBreakpoint,
+  euiMinBreakpoint,
+} from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => {
-  // Flex display for column and responsive column
+  const TITLE_MAX_WIDTH = '380px';
+
+  // Grid display for column and responsive column
   const columnDisplay = `
-    display: flex;
+    display: grid;
+    grid-template-columns: fit-content(${TITLE_MAX_WIDTH}) 1fr;
     align-items: baseline;
-    flex-wrap: wrap;  
   `;
 
   return {
@@ -29,11 +35,30 @@ export const euiDescriptionListStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     // Responsive columns behave as a row on breakpoints xs-s
     responsiveColumn: css`
+      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
+        grid-template-columns: 1fr;
+      }
       ${euiMinBreakpoint(euiThemeContext, 'm')} {
         ${columnDisplay}
       }
     `,
-
+    // Handles row-gap according to row gutter size
+    rowGap: {
+      s: css`
+        row-gap: ${euiThemeContext.euiTheme.size.s};
+      `,
+      m: css`
+        row-gap: ${euiThemeContext.euiTheme.size.m};
+      `,
+    },
+    columnGap: {
+      s: css`
+        column-gap: ${euiThemeContext.euiTheme.size.s};
+      `,
+      m: css`
+        column-gap: ${euiThemeContext.euiTheme.size.xl};
+      `,
+    },
     // Alignment
     center: css`
       ${logicalTextAlignCSS('center')}

src/components/description_list/description_list.tsx

@@ -33,13 +33,20 @@ export const EuiDescriptionList: FunctionComponent<
   textStyle = 'normal',
   titleProps,
   type = 'row',
-  gutterSize = 'm',
+  gutterSize = 's',
+  columnGap = 's',
   ...rest
 }) => {
   const euiTheme = useEuiTheme();
   const styles = euiDescriptionListStyles(euiTheme);
 
-  const cssStyles = [styles.euiDescriptionList, styles[type], styles[align]];
+  const cssStyles = [
+    styles.euiDescriptionList,
+    styles[type],
+    styles.rowGap[gutterSize],
+    styles.columnGap[columnGap],
+    styles[align],
+  ];
 
   const classes = classNames('euiDescriptionList', className);
 
@@ -66,7 +73,7 @@ export const EuiDescriptionList: FunctionComponent<
 
   return (
     <EuiDescriptionListContext.Provider
-      value={{ type, compressed, textStyle, align, gutterSize }}
+      value={{ type, compressed, textStyle, align, gutterSize, columnGap }}
     >
       <dl className={classes} css={cssStyles} {...rest} data-type={type}>
         {childrenOrListItems}

src/components/description_list/description_list_context.tsx

@@ -11,13 +11,17 @@ import { EuiDescriptionListProps } from './description_list_types';
 
 type EuiDescriptionListContextValues = Required<
   Pick<EuiDescriptionListProps, 'type' | 'textStyle' | 'align' | 'gutterSize'>
-> & { compressed?: EuiDescriptionListProps['compressed'] };
+> & {
+  compressed?: EuiDescriptionListProps['compressed'];
+  columnGap?: EuiDescriptionListProps['columnGap'];
+};
 
 export const contextDefaults: EuiDescriptionListContextValues = {
   type: 'row',
   textStyle: 'normal',
   align: 'left',
   gutterSize: 'm',
+  columnGap: 'm',
 };
 
 export const EuiDescriptionListContext =

src/components/description_list/description_list_description.styles.ts

@@ -23,8 +23,7 @@ export const euiDescriptionListDescriptionStyles = (
   const { euiTheme } = euiThemeContext;
 
   const columnDisplay = `
-    ${logicalCSS('width', '50%')}
-    ${logicalCSS('padding-left', euiTheme.size.s)}
+
   `;
 
   return {

src/components/description_list/description_list_title.styles.ts

@@ -11,8 +11,6 @@ import {
   euiFontSize,
   euiTextBreakWord,
   logicalTextAlignCSS,
-  euiMaxBreakpoint,
-  euiMinBreakpoint,
   logicalCSS,
 } from '../../global_styling';
 import { tint, UseEuiTheme } from '../../services';
@@ -22,8 +20,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, colorMode } = euiThemeContext;
 
   const columnDisplay = `
-  ${logicalCSS('width', '50%')}
-    ${logicalCSS('padding-right', euiTheme.size.s)}
+
   `;
   return {
     euiDescriptionList__title: css`
@@ -35,15 +32,7 @@ export const euiDescriptionListTitleStyles = (euiThemeContext: UseEuiTheme) => {
     column: css`
       ${columnDisplay}
     `,
-    responsiveColumn: css`
-      ${euiMaxBreakpoint(euiThemeContext, 'm')} {
-        ${logicalCSS('width', '100%')}
-        padding: 0;
-      }
-      ${euiMinBreakpoint(euiThemeContext, 'm')} {
-        ${columnDisplay}
-      }
-    `,
+    responsiveColumn: css``,
     inline: css`
       display: inline;
       border-radius: ${euiTheme.border.radius.small};

src/components/description_list/description_list_types.ts

@@ -43,6 +43,10 @@ export interface EuiDescriptionListProps {
    * Vertical spacing added between `EuiDescriptionList` elements
    */
   gutterSize?: EuiDescriptionListGutterSizes;
+  /**
+   * Horizontal spacing added between `EuiDescriptionList` elements
+   */
+  columnGap?: EuiDescriptionListColumnGapSizes;
 }
 
 export const TYPES = ['row', 'inline', 'column', 'responsiveColumn'] as const;
@@ -56,3 +60,6 @@ export type EuiDescriptionListTextStyle = (typeof TEXT_STYLES)[number];
 
 export const GUTTER_SIZES = ['s', 'm'] as const;
 export type EuiDescriptionListGutterSizes = (typeof GUTTER_SIZES)[number];
+
+export const COLUMN_GAP_SIZES = ['s', 'm'] as const;
+export type EuiDescriptionListColumnGapSizes = (typeof GUTTER_SIZES)[number];