[Visual Refresh] Update form layout append/prepend API

packages/eui-theme-common/src/global_styling/variables/typography.ts

@@ -97,11 +97,11 @@ export type _EuiThemeFontWeights = {
   light: CSSProperties['fontWeight'];
   /** - Default value: 400 */
   regular: CSSProperties['fontWeight'];
-  /** - Default value: 500 */
+  /** - Default value: 450 */
   medium: CSSProperties['fontWeight'];
-  /** - Default value: 600 */
+  /** - Default value: 500 */
   semiBold: CSSProperties['fontWeight'];
-  /** - Default value: 700 */
+  /** - Default value: 600 */
   bold: CSSProperties['fontWeight'];
 };
 

packages/eui/changelogs/upcoming/9014.md

@@ -0,0 +1,12 @@
+- Added `EuiFormAppend` and `EuiFormPrepend` components
+- Added support for `type="span"` on `EuiFormLabel` to support using visual-only form labels
+- Updated `EuiFormControlLayout` to use `EuiFormAppend` and `EuiFormPrepend`
+- Updated `EuiAutoRefresh` and `EuiColorPicker` to use `EuiFormPrepend`
+
+**Breaking changes**
+
+- Updated `EuiQuickSelectPopover` in `EuiSuperDatePicker` to use `EuiFormPrepend`. This results in more restricted `buttonProps` as they reflect `EuiFormPrepend` instead of generic `EuiButtonEmpty` props. 
+
+**Bug fixes**
+
+- Updated `EuiColorPicker` to ensure `id` is correctly passed onto the internal `EuiFormControlLayout`

packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap

@@ -616,11 +616,15 @@ exports[`EuiColorPicker prepend and append 1`] = `
     <div
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
-      <label
-        class="euiFormLabel emotion-euiFormLabel"
+      <div
+        class="euiFormPrepend css-1civv6t-side-uncompressed"
       >
-        prepend
-      </label>
+        <label
+          class="euiFormLabel emotion-euiFormLabel"
+        >
+          prepend
+        </label>
+      </div>
     </div>
     <div
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
@@ -665,11 +669,15 @@ exports[`EuiColorPicker prepend and append 1`] = `
     <div
       class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
     >
-      <label
-        class="euiFormLabel emotion-euiFormLabel"
+      <div
+        class="euiFormAppend css-1civv6t-side-uncompressed"
       >
-        append
-      </label>
+        <label
+          class="euiFormLabel emotion-euiFormLabel"
+        >
+          append
+        </label>
+      </div>
     </div>
   </div>
 </div>

packages/eui/src/components/color_picker/color_picker.styles.ts

@@ -46,7 +46,7 @@ export const euiColorPickerStyles = (euiThemeContext: UseEuiTheme) => {
         padding-inline: ${euiTheme.size.xs};
       }
 
-      .euiFormControlLayout__append {
+      .euiFormAppend {
         padding-inline: ${euiTheme.size.xxs} !important;
       }
 

packages/eui/src/components/color_picker/color_picker.tsx

@@ -602,6 +602,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
         isInvalid={isInvalid}
         isDisabled={disabled}
         isDropdown
+        inputId={id}
       >
         <EuiFieldText
           className="euiColorPicker__input"

packages/eui/src/components/date_picker/auto_refresh/__snapshots__/auto_refresh.test.tsx.snap

@@ -11,25 +11,17 @@ exports[`EuiAutoRefresh is rendered 1`] = `
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
       <button
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text"
-        type="button"
+        class="euiFormPrepend euiFormControlLayout__prepend css-1q2k5id-side-uncompressed-isInteractive-prepend"
       >
         <span
-          class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+          data-euiicon-type="timeRefresh"
+        />
+        <span
+          class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
         >
-          <span
-            color="inherit"
-            data-euiicon-type="timeRefresh"
-          />
-          <span
-            class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
-          >
-            <strong>
-              <small>
-                Auto refresh
-              </small>
-            </strong>
-          </span>
+          <strong>
+            Auto refresh
+          </strong>
         </span>
       </button>
     </div>
@@ -60,25 +52,17 @@ exports[`EuiAutoRefresh isPaused is false 1`] = `
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
       <button
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text"
-        type="button"
+        class="euiFormPrepend euiFormControlLayout__prepend css-1q2k5id-side-uncompressed-isInteractive-prepend"
       >
         <span
-          class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+          data-euiicon-type="timeRefresh"
+        />
+        <span
+          class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
         >
-          <span
-            color="inherit"
-            data-euiicon-type="timeRefresh"
-          />
-          <span
-            class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
-          >
-            <strong>
-              <small>
-                Auto refresh
-              </small>
-            </strong>
-          </span>
+          <strong>
+            Auto refresh
+          </strong>
         </span>
       </button>
     </div>
@@ -108,25 +92,17 @@ exports[`EuiAutoRefresh refreshInterval is rendered 1`] = `
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
       <button
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text"
-        type="button"
+        class="euiFormPrepend euiFormControlLayout__prepend css-1q2k5id-side-uncompressed-isInteractive-prepend"
       >
         <span
-          class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+          data-euiicon-type="timeRefresh"
+        />
+        <span
+          class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
         >
-          <span
-            color="inherit"
-            data-euiicon-type="timeRefresh"
-          />
-          <span
-            class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
-          >
-            <strong>
-              <small>
-                Auto refresh
-              </small>
-            </strong>
-          </span>
+          <strong>
+            Auto refresh
+          </strong>
         </span>
       </button>
     </div>

packages/eui/src/components/date_picker/auto_refresh/auto_refresh.tsx

@@ -8,7 +8,7 @@
 
 import React, { FunctionComponent, useState } from 'react';
 import classNames from 'classnames';
-import { EuiFieldText, EuiFieldTextProps } from '../../form';
+import { EuiFieldText, EuiFieldTextProps, EuiFormPrepend } from '../../form';
 import {
   EuiButtonEmpty,
   CommonEuiButtonEmptyProps,
@@ -61,18 +61,14 @@ export const EuiAutoRefresh: FunctionComponent<EuiAutoRefreshProps> = ({
           aria-label={autoRefeshLabel}
           onClick={() => setIsPopoverOpen((isOpen) => !isOpen)}
           prepend={
-            <EuiButtonEmpty
+            <EuiFormPrepend
               className="euiFormControlLayout__prepend"
-              onClick={() => setIsPopoverOpen((isOpen) => !isOpen)}
-              size="s"
-              color="text"
-              iconType="timeRefresh"
+              element="button"
+              label={<strong>{autoRefeshLabel}</strong>}
+              iconLeft="timeRefresh"
               isDisabled={isDisabled}
-            >
-              <strong>
-                <small>{autoRefeshLabel}</small>
-              </strong>
-            </EuiButtonEmpty>
+              onClick={() => setIsPopoverOpen((isOpen) => !isOpen)}
+            />
           }
           readOnly={readOnly}
           disabled={isDisabled}

packages/eui/src/components/date_picker/date_picker.stories.tsx

@@ -150,6 +150,7 @@ export const Playground: Story = {
     // setting a selected date to ensure VRT does not
     // automatically updated based on the current date
     selected: moment('Tue Mar 19 2024 18:54:51 GMT+0100'),
+    id: 'foo',
   },
   render: (args) => <StatefulDatePicker {...args} />,
 };