From eae95f4e9651e18ad966c5bb06ed2b49e94f509d Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 23 Aug 2023 16:00:46 -0700
Subject: [PATCH] [docs] Fix prop names

+ clean up var names and callbacks
---
 .../description_list_example.js               |  6 +--
 .../description_list_styling.js               | 44 +++++++------------
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js
index 99267b328b5..c846252972d 100644
--- a/src-docs/src/views/description_list/description_list_example.js
+++ b/src-docs/src/views/description_list/description_list_example.js
@@ -249,15 +249,15 @@ export const DescriptionListExample = {
           </p>
           <h4>Vertical spacing</h4>
           <p>
-            Modify the <EuiCode>gutterSize</EuiCode> prop to control the
+            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>columnGap</EuiCode> prop. This will not affect inline or
-            row types.
+            <EuiCode>columnGutterSize</EuiCode> prop. This will not affect
+            inline or row types.
           </p>
         </>
       ),
diff --git a/src-docs/src/views/description_list/description_list_styling.js b/src-docs/src/views/description_list/description_list_styling.js
index a3b366dbdc2..6b3f16194fa 100644
--- a/src-docs/src/views/description_list/description_list_styling.js
+++ b/src-docs/src/views/description_list/description_list_styling.js
@@ -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,13 +51,9 @@ export default () => {
     },
   ];
 
-  const [gutterSelected, setGutterSelected] = useState('m');
-
-  const gutterOnChange = (id) => {
-    setGutterSelected(id);
-  };
+  const [rowGutterSize, setRowGutterSize] = useState('m');
 
-  const columnGapToggleButtons = [
+  const columnGutterSizeOptions = [
     {
       id: 's',
       label: 'Small',
@@ -72,11 +64,7 @@ export default () => {
     },
   ];
 
-  const [columnGapSelected, setColumnGapSelected] = useState('m');
-
-  const columnGapOnChange = (id) => {
-    setColumnGapSelected(id);
-  };
+  const [columnGutterSize, setColumnGutterSize] = useState('m');
 
   const [compressed, setCompressed] = useState(true);
 
@@ -95,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>
 
@@ -104,10 +92,10 @@ 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>
 
@@ -116,10 +104,10 @@ export default () => {
             <h3>Column gap sizes</h3>
           </EuiTitle>
           <EuiButtonGroup
-            legend="Toggle for the EuiDescription columnGap prop"
-            options={columnGapToggleButtons}
-            idSelected={columnGapSelected}
-            onChange={(id) => columnGapOnChange(id)}
+            legend="Toggle for the EuiDescription columnGutterSize prop"
+            options={columnGutterSizeOptions}
+            idSelected={columnGutterSize}
+            onChange={(id) => setColumnGutterSize(id)}
           />
         </EuiFlexItem>
 
@@ -141,7 +129,7 @@ export default () => {
         listItems={favoriteVideoGames}
         align={alignSelected}
         compressed={compressed}
-        gutterSize={gutterSelected}
+        rowGutterSize={rowGutterSize}
       />
 
       <EuiSpacer size="l" />
@@ -151,8 +139,8 @@ export default () => {
         type="column"
         align={alignSelected}
         compressed={compressed}
-        gutterSize={gutterSelected}
-        columnGap={columnGapSelected}
+        rowGutterSize={rowGutterSize}
+        columnGutterSize={columnGutterSize}
       />
 
       <EuiSpacer size="l" />