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

src-docs/src/views/description_list/description_list_classes.js

@@ -10,7 +10,7 @@ const favoriteVideoGames = [
   {
     title: 'TIE Fighter',
     description:
-      'The sequel to XWING, join the dark side and fly for the Emporer.',
+      'The sequel to XWING, join the dark side and fly for the Emperor.',
   },
   {
     title: 'Quake 2',

src-docs/src/views/description_list/description_list_column.js

@@ -10,7 +10,7 @@ const favoriteVideoGames = [
   {
     title: 'TIE Fighter',
     description:
-      'The sequel to XWING, join the dark side and fly for the Emporer.',
+      'The sequel to XWING, join the dark side and fly for the Emperor.',
   },
   {
     title: 'Quake 2',

src-docs/src/views/description_list/description_list_column_responsive.js

@@ -10,7 +10,7 @@ const favoriteVideoGames = [
   {
     title: 'TIE Fighter',
     description:
-      'The sequel to XWING, join the dark side and fly for the Emporer.',
+      'The sequel to XWING, join the dark side and fly for the Emperor.',
   },
   {
     title: 'Quake 2',

src-docs/src/views/description_list/description_list_example.js

@@ -239,13 +239,27 @@ export const DescriptionListExample = {
         },
       ],
       text: (
-        <p>
-          Using the <EuiCode>align</EuiCode> and <EuiCode>compressed</EuiCode>{' '}
-          props you can further tailor the look of a description list. This
-          works with column and inline types. You can also adjust the{' '}
-          <EuiCode>gutterSize</EuiCode> prop to increase and decrease vertical
-          spacing between <EuiCode>EuiDescriptionList</EuiCode> elements.
-        </p>
+        <>
+          <h4>Alignment & Compression</h4>
+          <p>
+            Utilize the <EuiCode>align</EuiCode> and
+            <EuiCode>compressed</EuiCode> props to refine the presentation of
+            your description list. These are compatible with both column and
+            inline types.
+          </p>
+          <h4>Vertical spacing</h4>
+          <p>
+            Modify the <EuiCode>rowGutterSize</EuiCode> prop to control the
+            vertical spacing between <EuiCode>EuiDescriptionList</EuiCode>{' '}
+            elements. This will not affect inline list types.
+          </p>
+          <h4>Horizontal spacing</h4>
+          <p>
+            Adjust the spacing between the title and description with the{' '}
+            <EuiCode>columnGutterSize</EuiCode> prop. This will not affect
+            inline or row types.
+          </p>
+        </>
       ),
       snippet: descriptionListStylingSnippet,
       demo: <DescriptionListStyling />,

src-docs/src/views/description_list/description_list_inline.js

@@ -10,7 +10,7 @@ const favoriteVideoGames = [
   {
     title: 'TIE Fighter',
     description:
-      'The sequel to XWING, join the dark side and fly for the Emporer.',
+      'The sequel to XWING, join the dark side and fly for the Emperor.',
   },
   {
     title: 'Quake 2',

src-docs/src/views/description_list/description_list_styling.js

@@ -19,7 +19,7 @@ export default () => {
     {
       title: 'TIE Fighter',
       description:
-        'The sequel to XWING, join the dark side and fly for the Emporer.',
+        'The sequel to XWING, join the dark side and fly for the Emperor.',
     },
     {
       title: 'Quake 2',
@@ -40,11 +40,7 @@ export default () => {
 
   const [alignSelected, setAlignSelected] = useState('center');
 
-  const alignOnChange = (id) => {
-    setAlignSelected(id);
-  };
-
-  const gutterToggleButtons = [
+  const rowGutterSizeOptions = [
     {
       id: 's',
       label: 'Small',
@@ -55,11 +51,20 @@ export default () => {
     },
   ];
 
-  const [gutterSelected, setGutterSelected] = useState('m');
+  const [rowGutterSize, setRowGutterSize] = useState('m');
 
-  const gutterOnChange = (id) => {
-    setGutterSelected(id);
-  };
+  const columnGutterSizeOptions = [
+    {
+      id: 's',
+      label: 'Small',
+    },
+    {
+      id: 'm',
+      label: 'Medium',
+    },
+  ];
+
+  const [columnGutterSize, setColumnGutterSize] = useState('m');
 
   const [compressed, setCompressed] = useState(true);
 
@@ -78,7 +83,7 @@ export default () => {
             legend="Toggle for the EuiDescription align prop"
             options={alignToggleButtons}
             idSelected={alignSelected}
-            onChange={(id) => alignOnChange(id)}
+            onChange={(id) => setAlignSelected(id)}
           />
         </EuiFlexItem>
 
@@ -87,10 +92,22 @@ export default () => {
             <h3>Row gutter sizes</h3>
           </EuiTitle>
           <EuiButtonGroup
-            legend="Toggle for the EuiDescription gutterSize prop"
-            options={gutterToggleButtons}
-            idSelected={gutterSelected}
-            onChange={(id) => gutterOnChange(id)}
+            legend="Toggle for the EuiDescription rowGutterSize prop"
+            options={rowGutterSizeOptions}
+            idSelected={rowGutterSize}
+            onChange={(id) => setRowGutterSize(id)}
+          />
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiTitle size="xxs">
+            <h3>Column gap sizes</h3>
+          </EuiTitle>
+          <EuiButtonGroup
+            legend="Toggle for the EuiDescription columnGutterSize prop"
+            options={columnGutterSizeOptions}
+            idSelected={columnGutterSize}
+            onChange={(id) => setColumnGutterSize(id)}
           />
         </EuiFlexItem>
 
@@ -112,7 +129,7 @@ export default () => {
         listItems={favoriteVideoGames}
         align={alignSelected}
         compressed={compressed}
-        gutterSize={gutterSelected}
+        rowGutterSize={rowGutterSize}
       />
 
       <EuiSpacer size="l" />
@@ -122,7 +139,8 @@ export default () => {
         type="column"
         align={alignSelected}
         compressed={compressed}
-        gutterSize={gutterSelected}
+        rowGutterSize={rowGutterSize}
+        columnGutterSize={columnGutterSize}
       />
 
       <EuiSpacer size="l" />

src-docs/src/views/description_list/playground.js

@@ -18,7 +18,7 @@ export const descriptionListConfig = () => {
     {
       title: 'TIE Fighter',
       description:
-        'The sequel to XWING, join the dark side and fly for the Emporer.',
+        'The sequel to XWING, join the dark side and fly for the Emperor.',
     },
   ]`;
   propsToUse.listItems = {

src-docs/src/views/text/text.js

@@ -169,7 +169,7 @@ export default () => (
         <dd>The opening music alone evokes such strong memories.</dd>
         <dt>TIE Fighter</dt>
         <dd>
-          The sequel to XWING, join the dark side and fly for the Emporer.
+          The sequel to XWING, join the dark side and fly for the Emperor.
         </dd>
         <dt>Quake 2</dt>
         <dd>The game that made me drop out of college.</dd>

src-docs/src/views/text/text_small.js

@@ -94,7 +94,7 @@ const exampleText = (
       <dt>The Elder Scrolls: Morrowind</dt>
       <dd>The opening music alone evokes such strong memories.</dd>
       <dt>TIE Fighter</dt>
-      <dd>The sequel to XWING, join the dark side and fly for the Emporer.</dd>
+      <dd>The sequel to XWING, join the dark side and fly for the Emperor.</dd>
       <dt>Quake 2</dt>
       <dd>The game that made me drop out of college.</dd>
     </dl>

src/components/datagrid/controls/__snapshots__/keyboard_shortcuts.test.tsx.snap

@@ -84,83 +84,83 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
           >
             <dl
               aria-labelledby="generated-id"
-              class="euiDescriptionList emotion-euiDescriptionList-column-center"
+              class="euiDescriptionList emotion-euiDescriptionList-column-center-s-s"
               data-type="column"
             >
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Up arrow
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Move one cell up
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Down arrow
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Move one cell down
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Right arrow
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Move one cell right
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Left arrow
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Move one cell left
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Home
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Move to the first cell of the current row
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   End
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Move to the last cell of the current row
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Ctrl
@@ -171,12 +171,12 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Move to the first cell of the current page
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Ctrl
@@ -187,55 +187,55 @@ exports[`useDataGridKeyboardShortcuts returns a popover containing a list of key
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Move to the last cell of the current page
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Page Up
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Go to the last row of the previous page
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Page Down
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Go to the first row of the next page
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Enter
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Open cell details and actions
               </dd>
               <dt
-                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-s-compressed-right"
+                class="euiDescriptionList__title emotion-euiDescriptionList__title-column-compressed-right"
               >
                 <kbd>
                   Escape
                 </kbd>
               </dt>
               <dd
-                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left-s"
+                class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-left"
               >
                 Close cell details and actions
               </dd>

src/components/datagrid/controls/keyboard_shortcuts.tsx

@@ -53,7 +53,6 @@ export const useDataGridKeyboardShortcuts = (): {
             type="column"
             align="center"
             compressed
-            gutterSize="s"
             listItems={[
               {
                 title: (