[Inputs] Append/Prepend API and design updates

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/8948.md

@@ -0,0 +1,3 @@
+- Updated paddings for `EuiButton`, `EuiButtonEmpty`, `EuiFilterButton`
+- Updated paddings for `append`/`prepend` on `EuiFormControlLayout`
+

packages/eui/changelogs/upcoming/9014.md

@@ -0,0 +1,13 @@
+- Added `EuiFormAppend` and `EuiFormPrepend` components
+- Added support for `type="span"` on `EuiFormLabel` to support using visual-only form labels
+- Updated `EuiFormLabel` to render a `span` if no `htmlFor` is passed
+- 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/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`EuiSkipLink is rendered 1`] = `
     class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="eui-textTruncate"
+      class="eui-textTruncate css-1ryezsz-s"
     >
       Skip
     </span>

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

@@ -502,7 +502,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                   class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="eui-textTruncate euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
                   >
                     Edit
                   </span>
@@ -521,7 +521,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                   class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="eui-textTruncate euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
                   >
                     Delete
                   </span>
@@ -650,7 +650,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                   class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="eui-textTruncate euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
                   >
                     Edit
                   </span>
@@ -669,7 +669,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                   class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="eui-textTruncate euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
                   >
                     Delete
                   </span>
@@ -798,7 +798,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                   class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="eui-textTruncate euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
                   >
                     Edit
                   </span>
@@ -817,7 +817,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                   class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="eui-textTruncate euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
                   >
                     Delete
                   </span>
@@ -929,7 +929,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
               class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
             >
               <span
-                class="eui-textTruncate euiButtonEmpty__text"
+                class="eui-textTruncate euiButtonEmpty__text css-1shwb46-xs"
               >
                 Rows per page
                 : 
@@ -991,7 +991,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                   class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="eui-textTruncate euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
                   >
                     1
                   </span>
@@ -1013,7 +1013,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
                   class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
                 >
                   <span
-                    class="eui-textTruncate euiButtonEmpty__text"
+                    class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
                   >
                     2
                   </span>

packages/eui/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`DefaultItemAction renders an EuiButtonEmpty when \`type="button" 1`] =
       class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
     >
       <span
-        class="eui-textTruncate euiButtonEmpty__text"
+        class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
       >
         action1
       </span>

packages/eui/src/components/basic_table/__snapshots__/expanded_item_actions.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`ExpandedItemActions renders 1`] = `
         class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
       >
         <span
-          class="eui-textTruncate euiButtonEmpty__text"
+          class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
         >
           default1
         </span>
@@ -37,7 +37,7 @@ exports[`ExpandedItemActions renders 1`] = `
         class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
       >
         <span
-          class="eui-textTruncate euiButtonEmpty__text"
+          class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
         >
           showOnHover
         </span>

packages/eui/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`EuiInMemoryTable behavior mobile header 1`] = `
           class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
         >
           <span
-            class="eui-textTruncate euiButtonEmpty__text"
+            class="eui-textTruncate euiButtonEmpty__text css-1shwb46-xs"
           >
             Sorting
           </span>
@@ -106,7 +106,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
         >
           <span
-            class="eui-textTruncate euiButtonEmpty__text"
+            class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
           >
             1
           </span>
@@ -129,7 +129,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
         >
           <span
-            class="eui-textTruncate euiButtonEmpty__text"
+            class="eui-textTruncate euiButtonEmpty__text css-1ryezsz-s"
           >
             2
           </span>

packages/eui/src/components/basic_table/__snapshots__/pagination_bar.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`PaginationBar renders 1`] = `
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text"
+              class="eui-textTruncate euiButtonEmpty__text css-1shwb46-xs"
             >
               Rows per page
               : 

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

@@ -11,7 +11,7 @@ exports[`EuiButton is rendered 1`] = `
     class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="eui-textTruncate"
+      class="eui-textTruncate css-13ifi6d-m"
     >
       Content
     </span>
@@ -107,7 +107,7 @@ exports[`EuiButton props contentProps is rendered 1`] = `
     data-test-subj="test subject string"
   >
     <span
-      class="eui-textTruncate"
+      class="eui-textTruncate css-13ifi6d-m"
     >
       Content
     </span>
@@ -163,7 +163,7 @@ exports[`EuiButton props iconSide left is rendered 1`] = `
       data-euiicon-type="user"
     />
     <span
-      class="eui-textTruncate"
+      class="eui-textTruncate css-13ifi6d-m"
     >
       Content
     </span>
@@ -180,7 +180,7 @@ exports[`EuiButton props iconSide right is rendered 1`] = `
     class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="eui-textTruncate"
+      class="eui-textTruncate css-13ifi6d-m"
     >
       Content
     </span>
@@ -205,7 +205,7 @@ exports[`EuiButton props iconSize m is rendered 1`] = `
       data-euiicon-type="user"
     />
     <span
-      class="eui-textTruncate"
+      class="eui-textTruncate css-13ifi6d-m"
     >
       Content
     </span>
@@ -226,7 +226,7 @@ exports[`EuiButton props iconSize s is rendered 1`] = `
       data-euiicon-type="user"
     />
     <span
-      class="eui-textTruncate"
+      class="eui-textTruncate css-13ifi6d-m"
     >
       Content
     </span>
@@ -373,7 +373,7 @@ exports[`EuiButton props textProps is rendered 1`] = `
   >
     <span
       aria-label="aria-label"
-      class="eui-textTruncate testClass1 testClass2 emotion-euiTestCss"
+      class="eui-textTruncate testClass1 testClass2 css-1mgkzdg-m-euiTestCss"
       data-test-subj="test subject string"
     >
       Content

packages/eui/src/components/button/button_display/__snapshots__/_button_display.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`EuiButtonDisplay renders 1`] = `
     class="emotion-euiButtonDisplayContent"
   >
     <span
-      class="eui-textTruncate"
+      class="eui-textTruncate css-13ifi6d-m"
     >
       Content
     </span>

packages/eui/src/components/button/button_display/__snapshots__/_button_display_content.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`EuiButtonDisplayContent button icon loading icon renders disabled & loa
     style="border-color: #0b64dd currentcolor currentcolor currentcolor;"
   />
   <span
-    class="eui-textTruncate"
+    class="eui-textTruncate css-13ifi6d-m"
   >
     Loading
   </span>
@@ -28,7 +28,7 @@ exports[`EuiButtonDisplayContent button icon loading icon replaces existing icon
     role="progressbar"
   />
   <span
-    class="eui-textTruncate"
+    class="eui-textTruncate css-13ifi6d-m"
   >
     Loading
   </span>
@@ -70,7 +70,7 @@ exports[`EuiButtonDisplayContent renders 1`] = `
   data-test-subj="test subject string"
 >
   <span
-    class="eui-textTruncate"
+    class="eui-textTruncate css-13ifi6d-m"
   >
     Content
   </span>

packages/eui/src/components/button/button_display/_button_display.styles.ts

@@ -10,7 +10,6 @@ import { UseEuiTheme } from '../../../services';
 import {
   euiFontSize,
   logicalCSS,
-  logicalShorthandCSS,
   logicalTextAlignCSS,
 } from '../../../global_styling';
 import { euiButtonSizeMap } from '../../../global_styling/mixins';
@@ -37,8 +36,10 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
 
   const _buttonSize = (sizeKey: EuiButtonDisplaySizes) => {
     const size = sizes[sizeKey];
+
     return css`
       ${logicalCSS('height', size.height)}
+      ${logicalCSS('padding-horizontal', size.padding)}
       line-height: ${size.height}; /* Prevents descenders from getting cut off */
       ${euiFontSize(euiThemeContext, size.fontScale)}
       border-radius: ${size.radius};
@@ -50,7 +51,6 @@ export const euiButtonDisplayStyles = (euiThemeContext: UseEuiTheme) => {
     euiButtonDisplay: css`
       ${euiButtonBaseCSS()}
       font-weight: ${euiTheme.font.weight.medium};
-      ${logicalShorthandCSS('padding', `0 ${euiTheme.size.m}`)}
     `,
     // States
     isDisabled: css`

packages/eui/src/components/button/button_display/_button_display.tsx

@@ -170,6 +170,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
 
     const innerNode = (
       <EuiButtonDisplayContent
+        size={size}
         isLoading={isLoading}
         isDisabled={buttonIsDisabled}
         iconType={iconType}

packages/eui/src/components/button/button_display/_button_display_content.styles.ts

@@ -23,7 +23,18 @@ export const euiButtonDisplayContentStyles = (euiThemeContext: UseEuiTheme) => {
       justify-content: center;
       align-items: center;
       vertical-align: middle;
-      gap: ${euiTheme.size.s};
+      gap: ${euiTheme.size.xs};
     `,
+    content: {
+      xs: css`
+        ${logicalCSS('padding-horizontal', euiTheme.size.xxs)}
+      `,
+      s: css`
+        ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
+      `,
+      m: css`
+        ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
+      `,
+    },
   };
 };

packages/eui/src/components/button/button_display/_button_display_content.tsx

@@ -15,6 +15,7 @@ import { EuiLoadingSpinner } from '../../loading';
 import { EuiIcon, IconType } from '../../icon';
 
 import { euiButtonDisplayContentStyles } from './_button_display_content.styles';
+import { EuiButtonDisplaySizes } from './_button_display';
 
 export const ICON_SIZES = ['s', 'm'] as const;
 export type ButtonContentIconSize = (typeof ICON_SIZES)[number];
@@ -29,6 +30,7 @@ export type EuiButtonDisplayContentType = HTMLAttributes<HTMLSpanElement>;
  * This component is simply a helper component for reuse within other button components.
  */
 export interface EuiButtonDisplayContentProps extends CommonProps {
+  size?: EuiButtonDisplaySizes;
   /**
    * Any `type` accepted by EuiIcon
    */
@@ -58,6 +60,7 @@ export const EuiButtonDisplayContent: FunctionComponent<
   EuiButtonDisplayContentType & EuiButtonDisplayContentProps
 > = ({
   children,
+  size = 'm',
   textProps,
   isLoading = false,
   isDisabled = false,
@@ -97,12 +100,15 @@ export const EuiButtonDisplayContent: FunctionComponent<
   const doNotRenderTextWrapper = textProps === false;
   const renderTextWrapper = (isText || textProps) && !doNotRenderTextWrapper;
 
+  const textWrapperCss = [styles.content[size], textProps && textProps.css];
+
   return (
     <span css={styles.euiButtonDisplayContent} {...contentProps}>
       {iconSide === 'left' && icon}
       {renderTextWrapper ? (
         <span
           {...textProps}
+          css={textWrapperCss}
           className={classNames('eui-textTruncate', textProps?.className)}
         >
           {children}