Upgrade EUI to v31.3.0 (#88881)

* Bump EUI to v31.3.0

* jest snapshot updates

* Fixed space issue in kbnQueryBar date picker

* Removed unecessary space in query bar scss

Co-authored-by: miukimiu <elizabet.oliveira@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -98,7 +98,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "31.0.0",
+    "@elastic/eui": "31.3.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/node-crypto": "1.2.1",

src/plugins/data/public/ui/query_string_input/_query_bar.scss

@@ -73,9 +73,10 @@
     // sass-lint:disable-block no-important
     flex-grow: 0 !important;
     flex-basis: auto !important;
-    margin-right: -$euiSizeXS !important;
 
     &.kbnQueryBar__datePickerWrapper-isHidden {
+      // sass-lint:disable-block no-important
+      margin-right: -$euiSizeXS !important;
       width: 0;
       overflow: hidden;
       max-width: 0;

src/plugins/es_ui_shared/public/components/cron_editor/__snapshots__/cron_editor.test.tsx.snap

@@ -170,6 +170,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                   </select>
                 </EuiValidatableControl>
                 <EuiFormControlLayoutIcons
+                  compressed={false}
                   icon={
                     Object {
                       "side": "right",
@@ -182,6 +183,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                     className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                   >
                     <EuiFormControlLayoutCustomIcon
+                      size="m"
                       type="arrowDown"
                     >
                       <span
@@ -190,12 +192,14 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                         <EuiIcon
                           aria-hidden="true"
                           className="euiFormControlLayoutCustomIcon__icon"
+                          size="m"
                           type="arrowDown"
                         >
                           <span
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
                             data-euiicon-type="arrowDown"
+                            size="m"
                           />
                         </EuiIcon>
                       </span>
@@ -914,6 +918,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                             </select>
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
+                            compressed={false}
                             icon={
                               Object {
                                 "side": "right",
@@ -926,6 +931,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                             >
                               <EuiFormControlLayoutCustomIcon
+                                size="m"
                                 type="arrowDown"
                               >
                                 <span
@@ -934,12 +940,14 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
                                       data-euiicon-type="arrowDown"
+                                      size="m"
                                     />
                                   </EuiIcon>
                                 </span>
@@ -1607,6 +1615,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                             </select>
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
+                            compressed={false}
                             icon={
                               Object {
                                 "side": "right",
@@ -1619,6 +1628,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                             >
                               <EuiFormControlLayoutCustomIcon
+                                size="m"
                                 type="arrowDown"
                               >
                                 <span
@@ -1627,12 +1637,14 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
                                       data-euiicon-type="arrowDown"
+                                      size="m"
                                     />
                                   </EuiIcon>
                                 </span>
@@ -1824,6 +1836,7 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = `
                   </select>
                 </EuiValidatableControl>
                 <EuiFormControlLayoutIcons
+                  compressed={false}
                   icon={
                     Object {
                       "side": "right",
@@ -1836,6 +1849,7 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = `
                     className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                   >
                     <EuiFormControlLayoutCustomIcon
+                      size="m"
                       type="arrowDown"
                     >
                       <span
@@ -1844,12 +1858,14 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = `
                         <EuiIcon
                           aria-hidden="true"
                           className="euiFormControlLayoutCustomIcon__icon"
+                          size="m"
                           type="arrowDown"
                         >
                           <span
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
                             data-euiicon-type="arrowDown"
+                            size="m"
                           />
                         </EuiIcon>
                       </span>
@@ -2816,6 +2832,7 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = `
                     </select>
                   </EuiValidatableControl>
                   <EuiFormControlLayoutIcons
+                    compressed={false}
                     icon={
                       Object {
                         "side": "right",
@@ -2828,6 +2845,7 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = `
                       className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                     >
                       <EuiFormControlLayoutCustomIcon
+                        size="m"
                         type="arrowDown"
                       >
                         <span
@@ -2836,12 +2854,14 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = `
                           <EuiIcon
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
+                            size="m"
                             type="arrowDown"
                           >
                             <span
                               aria-hidden="true"
                               className="euiFormControlLayoutCustomIcon__icon"
                               data-euiicon-type="arrowDown"
+                              size="m"
                             />
                           </EuiIcon>
                         </span>
@@ -3029,6 +3049,7 @@ exports[`CronEditor is rendered with a MINUTE frequency 1`] = `
                   </select>
                 </EuiValidatableControl>
                 <EuiFormControlLayoutIcons
+                  compressed={false}
                   icon={
                     Object {
                       "side": "right",
@@ -3041,6 +3062,7 @@ exports[`CronEditor is rendered with a MINUTE frequency 1`] = `
                     className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                   >
                     <EuiFormControlLayoutCustomIcon
+                      size="m"
                       type="arrowDown"
                     >
                       <span
@@ -3049,12 +3071,14 @@ exports[`CronEditor is rendered with a MINUTE frequency 1`] = `
                         <EuiIcon
                           aria-hidden="true"
                           className="euiFormControlLayoutCustomIcon__icon"
+                          size="m"
                           type="arrowDown"
                         >
                           <span
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
                             data-euiicon-type="arrowDown"
+                            size="m"
                           />
                         </EuiIcon>
                       </span>
@@ -3241,6 +3265,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                   </select>
                 </EuiValidatableControl>
                 <EuiFormControlLayoutIcons
+                  compressed={false}
                   icon={
                     Object {
                       "side": "right",
@@ -3253,6 +3278,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                     className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                   >
                     <EuiFormControlLayoutCustomIcon
+                      size="m"
                       type="arrowDown"
                     >
                       <span
@@ -3261,12 +3287,14 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                         <EuiIcon
                           aria-hidden="true"
                           className="euiFormControlLayoutCustomIcon__icon"
+                          size="m"
                           type="arrowDown"
                         >
                           <span
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
                             data-euiicon-type="arrowDown"
+                            size="m"
                           />
                         </EuiIcon>
                       </span>
@@ -4173,6 +4201,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                     </select>
                   </EuiValidatableControl>
                   <EuiFormControlLayoutIcons
+                    compressed={false}
                     icon={
                       Object {
                         "side": "right",
@@ -4185,6 +4214,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                       className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                     >
                       <EuiFormControlLayoutCustomIcon
+                        size="m"
                         type="arrowDown"
                       >
                         <span
@@ -4193,12 +4223,14 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                           <EuiIcon
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
+                            size="m"
                             type="arrowDown"
                           >
                             <span
                               aria-hidden="true"
                               className="euiFormControlLayoutCustomIcon__icon"
                               data-euiicon-type="arrowDown"
+                              size="m"
                             />
                           </EuiIcon>
                         </span>
@@ -4568,6 +4600,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                             </select>
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
+                            compressed={false}
                             icon={
                               Object {
                                 "side": "right",
@@ -4580,6 +4613,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                             >
                               <EuiFormControlLayoutCustomIcon
+                                size="m"
                                 type="arrowDown"
                               >
                                 <span
@@ -4588,12 +4622,14 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
                                       data-euiicon-type="arrowDown"
+                                      size="m"
                                     />
                                   </EuiIcon>
                                 </span>
@@ -5261,6 +5297,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                             </select>
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
+                            compressed={false}
                             icon={
                               Object {
                                 "side": "right",
@@ -5273,6 +5310,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                             >
                               <EuiFormControlLayoutCustomIcon
+                                size="m"
                                 type="arrowDown"
                               >
                                 <span
@@ -5281,12 +5319,14 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
                                       data-euiicon-type="arrowDown"
+                                      size="m"
                                     />
                                   </EuiIcon>
                                 </span>
@@ -5478,6 +5518,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                   </select>
                 </EuiValidatableControl>
                 <EuiFormControlLayoutIcons
+                  compressed={false}
                   icon={
                     Object {
                       "side": "right",
@@ -5490,6 +5531,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                     className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                   >
                     <EuiFormControlLayoutCustomIcon
+                      size="m"
                       type="arrowDown"
                     >
                       <span
@@ -5498,12 +5540,14 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                         <EuiIcon
                           aria-hidden="true"
                           className="euiFormControlLayoutCustomIcon__icon"
+                          size="m"
                           type="arrowDown"
                         >
                           <span
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
                             data-euiicon-type="arrowDown"
+                            size="m"
                           />
                         </EuiIcon>
                       </span>
@@ -6074,6 +6118,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                     </select>
                   </EuiValidatableControl>
                   <EuiFormControlLayoutIcons
+                    compressed={false}
                     icon={
                       Object {
                         "side": "right",
@@ -6086,6 +6131,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                       className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                     >
                       <EuiFormControlLayoutCustomIcon
+                        size="m"
                         type="arrowDown"
                       >
                         <span
@@ -6094,12 +6140,14 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                           <EuiIcon
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
+                            size="m"
                             type="arrowDown"
                           >
                             <span
                               aria-hidden="true"
                               className="euiFormControlLayoutCustomIcon__icon"
                               data-euiicon-type="arrowDown"
+                              size="m"
                             />
                           </EuiIcon>
                         </span>
@@ -6469,6 +6517,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                             </select>
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
+                            compressed={false}
                             icon={
                               Object {
                                 "side": "right",
@@ -6481,6 +6530,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                             >
                               <EuiFormControlLayoutCustomIcon
+                                size="m"
                                 type="arrowDown"
                               >
                                 <span
@@ -6489,12 +6539,14 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
                                       data-euiicon-type="arrowDown"
+                                      size="m"
                                     />
                                   </EuiIcon>
                                 </span>
@@ -7162,6 +7214,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                             </select>
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
+                            compressed={false}
                             icon={
                               Object {
                                 "side": "right",
@@ -7174,6 +7227,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                             >
                               <EuiFormControlLayoutCustomIcon
+                                size="m"
                                 type="arrowDown"
                               >
                                 <span
@@ -7182,12 +7236,14 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
                                       data-euiicon-type="arrowDown"
+                                      size="m"
                                     />
                                   </EuiIcon>
                                 </span>
@@ -7379,6 +7435,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                   </select>
                 </EuiValidatableControl>
                 <EuiFormControlLayoutIcons
+                  compressed={false}
                   icon={
                     Object {
                       "side": "right",
@@ -7391,6 +7448,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                     className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                   >
                     <EuiFormControlLayoutCustomIcon
+                      size="m"
                       type="arrowDown"
                     >
                       <span
@@ -7399,12 +7457,14 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                         <EuiIcon
                           aria-hidden="true"
                           className="euiFormControlLayoutCustomIcon__icon"
+                          size="m"
                           type="arrowDown"
                         >
                           <span
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
                             data-euiicon-type="arrowDown"
+                            size="m"
                           />
                         </EuiIcon>
                       </span>
@@ -8174,6 +8234,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                     </select>
                   </EuiValidatableControl>
                   <EuiFormControlLayoutIcons
+                    compressed={false}
                     icon={
                       Object {
                         "side": "right",
@@ -8186,6 +8247,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                       className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                     >
                       <EuiFormControlLayoutCustomIcon
+                        size="m"
                         type="arrowDown"
                       >
                         <span
@@ -8194,12 +8256,14 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                           <EuiIcon
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
+                            size="m"
                             type="arrowDown"
                           >
                             <span
                               aria-hidden="true"
                               className="euiFormControlLayoutCustomIcon__icon"
                               data-euiicon-type="arrowDown"
+                              size="m"
                             />
                           </EuiIcon>
                         </span>
@@ -8628,6 +8692,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                     </select>
                   </EuiValidatableControl>
                   <EuiFormControlLayoutIcons
+                    compressed={false}
                     icon={
                       Object {
                         "side": "right",
@@ -8640,6 +8705,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                       className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                     >
                       <EuiFormControlLayoutCustomIcon
+                        size="m"
                         type="arrowDown"
                       >
                         <span
@@ -8648,12 +8714,14 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                           <EuiIcon
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
+                            size="m"
                             type="arrowDown"
                           >
                             <span
                               aria-hidden="true"
                               className="euiFormControlLayoutCustomIcon__icon"
                               data-euiicon-type="arrowDown"
+                              size="m"
                             />
                           </EuiIcon>
                         </span>
@@ -9023,6 +9091,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                             </select>
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
+                            compressed={false}
                             icon={
                               Object {
                                 "side": "right",
@@ -9035,6 +9104,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                             >
                               <EuiFormControlLayoutCustomIcon
+                                size="m"
                                 type="arrowDown"
                               >
                                 <span
@@ -9043,12 +9113,14 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
                                       data-euiicon-type="arrowDown"
+                                      size="m"
                                     />
                                   </EuiIcon>
                                 </span>
@@ -9716,6 +9788,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                             </select>
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
+                            compressed={false}
                             icon={
                               Object {
                                 "side": "right",
@@ -9728,6 +9801,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                               className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                             >
                               <EuiFormControlLayoutCustomIcon
+                                size="m"
                                 type="arrowDown"
                               >
                                 <span
@@ -9736,12 +9810,14 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
                                     type="arrowDown"
                                   >
                                     <span
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
                                       data-euiicon-type="arrowDown"
+                                      size="m"
                                     />
                                   </EuiIcon>
                                 </span>

src/plugins/home/public/application/components/__snapshots__/sample_data_view_data_button.test.js.snap

@@ -51,6 +51,7 @@ exports[`should render popover when appLinks is not empty 1`] = `
         },
       ]
     }
+    size="m"
   />
 </EuiPopover>
 `;

src/plugins/share/public/components/__snapshots__/share_context_menu.test.tsx.snap

@@ -55,6 +55,7 @@ exports[`shareContextMenuExtensions should sort ascending on sort order first an
         },
       ]
     }
+    size="m"
   />
 </I18nProvider>
 `;
@@ -78,6 +79,7 @@ exports[`should only render permalink panel when there are no other panels 1`] =
         },
       ]
     }
+    size="m"
   />
 </I18nProvider>
 `;
@@ -130,6 +132,7 @@ exports[`should render context menu panel when there are more than one panel 1`]
         },
       ]
     }
+    size="m"
   />
 </I18nProvider>
 `;

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/__snapshots__/extended_template.stories.storyshot

@@ -63,6 +63,7 @@ exports[`Storyshots arguments/AxisConfig extended 1`] = `
                 aria-hidden="true"
                 className="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="arrowDown"
+                size="s"
               />
             </span>
           </div>
@@ -139,6 +140,7 @@ exports[`Storyshots arguments/AxisConfig/components extended 1`] = `
                 aria-hidden="true"
                 className="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="arrowDown"
+                size="s"
               />
             </span>
           </div>

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/date_format/__stories__/__snapshots__/date_format.stories.storyshot

@@ -46,6 +46,7 @@ Array [
             aria-hidden="true"
             className="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
+            size="s"
           />
         </span>
       </div>
@@ -118,6 +119,7 @@ Array [
             aria-hidden="true"
             className="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
+            size="s"
           />
         </span>
       </div>
@@ -189,6 +191,7 @@ exports[`Storyshots arguments/DateFormat with preset format 1`] = `
           aria-hidden="true"
           className="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="arrowDown"
+          size="s"
         />
       </span>
     </div>

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__stories__/__snapshots__/number_format.stories.storyshot

@@ -56,6 +56,7 @@ Array [
             aria-hidden="true"
             className="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
+            size="s"
           />
         </span>
       </div>
@@ -138,6 +139,7 @@ Array [
             aria-hidden="true"
             className="euiFormControlLayoutCustomIcon__icon"
             data-euiicon-type="arrowDown"
+            size="s"
           />
         </span>
       </div>
@@ -219,6 +221,7 @@ exports[`Storyshots arguments/NumberFormat with preset format 1`] = `
           aria-hidden="true"
           className="euiFormControlLayoutCustomIcon__icon"
           data-euiicon-type="arrowDown"
+          size="s"
         />
       </span>
     </div>

x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot

@@ -75,6 +75,7 @@ exports[`Storyshots components/SavedElementsModal no custom elements 1`] = `
                     aria-hidden="true"
                     className="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="search"
+                    size="m"
                   />
                 </span>
               </div>
@@ -222,6 +223,7 @@ exports[`Storyshots components/SavedElementsModal with custom elements 1`] = `
                     aria-hidden="true"
                     className="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="search"
+                    size="m"
                   />
                 </span>
               </div>
@@ -669,6 +671,7 @@ exports[`Storyshots components/SavedElementsModal with text filter 1`] = `
                     aria-hidden="true"
                     className="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="search"
+                    size="m"
                   />
                 </span>
               </div>

x-pack/plugins/canvas/public/components/tag/__stories__/__snapshots__/tag.stories.storyshot

@@ -46,7 +46,7 @@ exports[`Storyshots components/Tags/Tag as badge with color 1`] = `
 
 exports[`Storyshots components/Tags/Tag as health 1`] = `
 <div
-  className="euiHealth"
+  className="euiHealth euiHealth--textSizeS"
 >
   <div
     className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -70,7 +70,7 @@ exports[`Storyshots components/Tags/Tag as health 1`] = `
 
 exports[`Storyshots components/Tags/Tag as health with color 1`] = `
 <div
-  className="euiHealth"
+  className="euiHealth euiHealth--textSizeS"
 >
   <div
     className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"

x-pack/plugins/canvas/public/components/tag_list/__stories__/__snapshots__/tag_list.stories.storyshot

@@ -67,7 +67,7 @@ Array [
 exports[`Storyshots components/Tags/TagList with health tags 1`] = `
 Array [
   <div
-    className="euiHealth"
+    className="euiHealth euiHealth--textSizeS"
   >
     <div
       className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -88,7 +88,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiHealth"
+    className="euiHealth euiHealth--textSizeS"
   >
     <div
       className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -109,7 +109,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiHealth"
+    className="euiHealth euiHealth--textSizeS"
   >
     <div
       className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"

x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot

@@ -151,6 +151,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                   aria-hidden="true"
                   className="euiFormControlLayoutCustomIcon__icon"
                   data-euiicon-type="arrowDown"
+                  size="s"
                 />
               </span>
             </div>
@@ -587,6 +588,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                   aria-hidden="true"
                   className="euiFormControlLayoutCustomIcon__icon"
                   data-euiicon-type="arrowDown"
+                  size="s"
                 />
               </span>
             </div>

x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot

@@ -38,6 +38,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                 aria-hidden="true"
                 className="euiFormControlLayoutCustomIcon__icon"
                 data-euiicon-type="search"
+                size="m"
               />
             </span>
           </div>
@@ -319,7 +320,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  className="euiHealth"
+                  className="euiHealth euiHealth--textSizeS"
                 >
                   <div
                     className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -340,7 +341,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                   </div>
                 </div>
                 <div
-                  className="euiHealth"
+                  className="euiHealth euiHealth--textSizeS"
                 >
                   <div
                     className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -441,7 +442,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  className="euiHealth"
+                  className="euiHealth euiHealth--textSizeS"
                 >
                   <div
                     className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -462,7 +463,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                   </div>
                 </div>
                 <div
-                  className="euiHealth"
+                  className="euiHealth euiHealth--textSizeS"
                 >
                   <div
                     className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"

x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot

@@ -142,6 +142,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
                       aria-hidden="true"
                       className="euiFormControlLayoutCustomIcon__icon"
                       data-euiicon-type="arrowDown"
+                      size="s"
                     />
                   </span>
                 </div>
@@ -206,6 +207,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
                       aria-hidden="true"
                       className="euiFormControlLayoutCustomIcon__icon"
                       data-euiicon-type="arrowDown"
+                      size="s"
                     />
                   </span>
                 </div>
@@ -547,6 +549,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
                     aria-hidden="true"
                     className="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="arrowDown"
+                    size="s"
                   />
                 </span>
               </div>
@@ -611,6 +614,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
                     aria-hidden="true"
                     className="euiFormControlLayoutCustomIcon__icon"
                     data-euiicon-type="arrowDown"
+                    size="s"
                   />
                 </span>
               </div>
@@ -962,6 +966,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
                       aria-hidden="true"
                       className="euiFormControlLayoutCustomIcon__icon"
                       data-euiicon-type="arrowDown"
+                      size="s"
                     />
                   </span>
                 </div>
@@ -1026,6 +1031,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
                       aria-hidden="true"
                       className="euiFormControlLayoutCustomIcon__icon"
                       data-euiicon-type="arrowDown"
+                      size="s"
                     />
                   </span>
                 </div>

x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__stories__/__snapshots__/extended_template.stories.storyshot

@@ -69,6 +69,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
                   aria-hidden="true"
                   className="euiFormControlLayoutCustomIcon__icon"
                   data-euiicon-type="arrowDown"
+                  size="s"
                 />
               </span>
             </div>
@@ -161,6 +162,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
                       aria-hidden="true"
                       className="euiFormControlLayoutCustomIcon__icon"
                       data-euiicon-type="arrowDown"
+                      size="s"
                     />
                   </span>
                 </div>
@@ -245,6 +247,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
                       aria-hidden="true"
                       className="euiFormControlLayoutCustomIcon__icon"
                       data-euiicon-type="arrowDown"
+                      size="s"
                     />
                   </span>
                 </div>
@@ -329,6 +332,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
                       aria-hidden="true"
                       className="euiFormControlLayoutCustomIcon__icon"
                       data-euiicon-type="arrowDown"
+                      size="s"
                     />
                   </span>
                 </div>

x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/__snapshots__/tools_control.test.tsx.snap

@@ -110,6 +110,7 @@ exports[`Should render cancel button when drawing 1`] = `
             },
           ]
         }
+        size="m"
       />
     </EuiPopover>
   </EuiFlexItem>
@@ -235,6 +236,7 @@ exports[`renders 1`] = `
         },
       ]
     }
+    size="m"
   />
 </EuiPopover>
 `;

x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/__snapshots__/toc_entry_actions_popover.test.tsx.snap

@@ -109,6 +109,7 @@ exports[`TOCEntryActionsPopover is rendered 1`] = `
         },
       ]
     }
+    size="m"
   />
 </EuiPopover>
 `;
@@ -222,6 +223,7 @@ exports[`TOCEntryActionsPopover should disable fit to data when supportsFitToBou
         },
       ]
     }
+    size="m"
   />
 </EuiPopover>
 `;
@@ -336,6 +338,7 @@ exports[`TOCEntryActionsPopover should have "show layer" action when layer is no
         },
       ]
     }
+    size="m"
   />
 </EuiPopover>
 `;
@@ -418,6 +421,7 @@ exports[`TOCEntryActionsPopover should not show edit actions in read only mode 1
         },
       ]
     }
+    size="m"
   />
 </EuiPopover>
 `;

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap

@@ -936,6 +936,7 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                                   />
                                 </EuiValidatableControl>
                                 <EuiFormControlLayoutIcons
+                                  compressed={false}
                                   isLoading={false}
                                 />
                               </div>

x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap

@@ -355,6 +355,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "small": "14px",
           "xSmall": "12px",
         },
+        "euiMarkdownEditorMinHeight": "150px",
         "euiPageBackgroundColor": "#1a1b20",
         "euiPaletteColorBlind": Object {
           "euiColorVis0": Object {

x-pack/plugins/uptime/public/components/certificates/__snapshots__/cert_status.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`CertStatus renders expected elements for valid props 1`] = `
 }
 
 <div
-  class="euiHealth"
+  class="euiHealth euiHealth--textSizeS"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"

x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap

@@ -469,7 +469,7 @@ exports[`DonutChart component renders a donut chart 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero c1"
         >
           <div
-            class="euiHealth"
+            class="euiHealth euiHealth--textSizeS"
           >
             <div
               class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -511,7 +511,7 @@ exports[`DonutChart component renders a donut chart 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero c1"
         >
           <div
-            class="euiHealth"
+            class="euiHealth euiHealth--textSizeS"
           >
             <div
               class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -624,7 +624,7 @@ exports[`DonutChart component renders a green check when all monitors are up 1`]
           class="euiFlexItem euiFlexItem--flexGrowZero c2"
         >
           <div
-            class="euiHealth"
+            class="euiHealth euiHealth--textSizeS"
           >
             <div
               class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
@@ -666,7 +666,7 @@ exports[`DonutChart component renders a green check when all monitors are up 1`]
           class="euiFlexItem euiFlexItem--flexGrowZero c2"
         >
           <div
-            class="euiHealth"
+            class="euiHealth euiHealth--textSizeS"
           >
             <div
               class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"

yarn.lock

@@ -1439,10 +1439,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@31.0.0":
+"@elastic/eui@31.3.0":
-  version "31.0.0"
+  version "31.3.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-31.0.0.tgz#7d17386c04a0ad343d70c3652902fcd3f46ed337"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-31.3.0.tgz#f39eecc09d588e4b22150faceb67e5e169afbbd8"
-  integrity sha512-oj63HpQQKg/Cgwz5B0ZBQCkcgZiEdQzBT9PbmEiR/VRz5P0WqJpgZPyIF7jiFaFlGP1a9hPjkUTo+ramWNCpiw==
+  integrity sha512-1Sjhf5HVakx7VGWQkKP8wzGUf7HzyoNnAxjg5P3NH8k+ctJFagS1Wlz9zogwClEuj3FMTMC4tzbJyo06OgHECw==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"