[Inputs] Implement form element append/prepend design updates

packages/eui-theme-borealis/changelogs/upcoming/9305.md

@@ -0,0 +1,4 @@
+**Breaking changes**
+
+- Removed `components.superDatePickerBackgroundSuccees` token
+

packages/eui-theme-borealis/src/variables/_components.ts

@@ -274,11 +274,6 @@ const component_colors: _EuiThemeComponentColors = {
 
   skeletonBackgroundSkeletonMiddleHighContrast: `rgba(${SEMANTIC_COLORS.shade100RGB}, 0.04)`,
 
-  superDatePickerBackgroundSuccees: computed(
-    ([backgroundBaseSuccess]) => backgroundBaseSuccess,
-    ['colors.backgroundBaseSuccess']
-  ),
-
   switchBackgroundOn: computed(
     ([backgroundFilledPrimary]) => backgroundFilledPrimary,
     ['colors.backgroundFilledPrimary']

packages/eui-theme-common/changelogs/upcoming/9305.md

@@ -0,0 +1,4 @@
+**Breaking changes**
+
+- Removed types from `components.superDatePickerBackgroundSuccees` token
+

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

@@ -122,8 +122,6 @@ export type _EuiThemeComponentColors = {
 
   skeletonBackgroundSkeletonMiddleHighContrast: ColorModeSwitch;
 
-  superDatePickerBackgroundSuccees: ColorModeSwitch;
-
   switchBackgroundOn: ColorModeSwitch;
   switchBackgroundOff: ColorModeSwitch;
   switchUncompressedBackgroundDisabled: ColorModeSwitch;

packages/eui/changelogs/upcoming/9305.md

@@ -0,0 +1,12 @@
+- Updated `EuiFormAppend`/`EuiFormPrepend` styling
+- Updated `EuiFormAppend`/`EuiFormPrepend` to inherit `isDisabled` state from `EuiFormControlLayout`
+- Updated `EuiFormControlLayout` hover, disabled and readonly styling
+- Updated `EuiFormControlButton` to inherit `isDisabled`, `readOnly` and `isInvalid` states from `EuiFormControlLayout`
+- Added `iconSide` prop on `EuiDatePickerRange`
+- Updated `EuiSuperDatePicker` valid state styling
+- Removed background color transition on `EuiButtonEmpty` (other button variants don't have a transition anymore either)
+
+**Breaking changes**
+
+- Removed `components.superDatePickerBackgroundSuccees` token
+

packages/eui/src/components/badge/notification_badge/badge_notification.styles.ts

@@ -44,6 +44,8 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => {
       })}
       cursor: default;
 
+      /* prevent potential unwanted overrides from parent elements */
+      -webkit-text-fill-color: currentColor;
       font-size: ${euiFontSizeFromScale('xs', euiTheme)};
       font-weight: ${euiTheme.font.weight.medium};
       ${euiNumberFormat(euiThemeContext)}

packages/eui/src/components/button/button_empty/button_empty.styles.ts

@@ -12,7 +12,6 @@ import { UseEuiTheme } from '../../../services';
 import {
   logicalCSS,
   logicalShorthandCSS,
-  euiCanAnimate,
   highContrastModeStyles,
 } from '../../../global_styling';
 import { euiButtonDisplayStyles } from '../button_display/_button_display.styles';
@@ -29,12 +28,6 @@ export const euiButtonEmptyStyles = (euiThemeContext: UseEuiTheme) => {
     euiButtonEmpty: css`
       ${displayStyles.euiButtonDisplay}
       ${logicalShorthandCSS('padding', `0 ${euiTheme.size.s}`)}
-
-      /* Change the easing, quickness to not bounce so lighter backgrounds don't flash */
-      ${euiCanAnimate} {
-        transition-timing-function: ease-in;
-        transition-duration: ${euiTheme.animation.fast};
-      }
     `,
     isDisabled: displayStyles.isDisabled,
     // Sizes

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

@@ -626,16 +626,20 @@ exports[`EuiColorPicker prepend and append 1`] = `
     class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
+      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side"
     >
       <div
-        class="euiFormPrepend css-1civv6t-side-uncompressed"
+        class="css-yp07d4-wrapper"
       >
-        <span
-          class="euiFormLabel emotion-euiFormLabel"
+        <div
+          class="euiFormPrepend css-7iwqdv-side-uncompressed"
         >
-          prepend
-        </span>
+          <span
+            class="euiFormLabel emotion-euiFormLabel"
+          >
+            prepend
+          </span>
+        </div>
       </div>
     </div>
     <div
@@ -679,16 +683,20 @@ exports[`EuiColorPicker prepend and append 1`] = `
       </div>
     </div>
     <div
-      class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
+      class="euiFormControlLayout__append emotion-euiFormControlLayout__side"
     >
       <div
-        class="euiFormAppend css-1civv6t-side-uncompressed"
+        class="css-yp07d4-wrapper"
       >
-        <span
-          class="euiFormLabel emotion-euiFormLabel"
+        <div
+          class="euiFormAppend css-7iwqdv-side-uncompressed"
         >
-          append
-        </span>
+          <span
+            class="euiFormLabel emotion-euiFormLabel"
+          >
+            append
+          </span>
+        </div>
       </div>
     </div>
   </div>

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

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

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

@@ -9,7 +9,7 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
     class="euiFormControlLayout emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
     >
       <div
         class="react-datepicker emotion-euiReactDatePicker"
@@ -491,7 +491,7 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
     class="euiFormControlLayout emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
     >
       <div
         class="react-datepicker emotion-euiReactDatePicker"

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

@@ -10,7 +10,7 @@ exports[`EuiDatePickerRange is rendered 1`] = `
     class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-group-delimited"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited"
       data-test-subj="test subject string-range-wrapper"
     >
       <div
@@ -80,7 +80,7 @@ exports[`EuiDatePickerRange props compressed 1`] = `
     class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-compressed-group-delimited"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited"
     >
       <div
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-static"
@@ -145,7 +145,7 @@ exports[`EuiDatePickerRange props disabled 1`] = `
     class="euiFormControlLayout euiFormControlLayout-isDisabled euiFormControlLayoutDelimited emotion-euiFormControlLayout-group-delimited-disabled"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited"
     >
       <div
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static-disabled"
@@ -212,7 +212,7 @@ exports[`EuiDatePickerRange props fullWidth 1`] = `
     class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-fullWidth-group-delimited"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited"
     >
       <div
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
@@ -277,7 +277,7 @@ exports[`EuiDatePickerRange props inline renders 1`] = `
     class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-group-delimited-shadow"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited"
     >
       <div
         class="react-datepicker emotion-euiReactDatePicker"
@@ -1335,7 +1335,7 @@ exports[`EuiDatePickerRange props isInvalid 1`] = `
     class="euiFormControlLayout euiFormControlLayoutDelimited euiFormControlLayoutDelimited--isInvalid emotion-euiFormControlLayout-group-delimited"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited-invalid"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited-invalid"
     >
       <div
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
@@ -1410,7 +1410,7 @@ exports[`EuiDatePickerRange props isLoading 1`] = `
     class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-group-delimited"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited"
     >
       <div
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
@@ -1484,7 +1484,7 @@ exports[`EuiDatePickerRange props readOnly 1`] = `
     class="euiFormControlLayout euiFormControlLayout-readOnly euiFormControlLayoutDelimited emotion-euiFormControlLayout-group-delimited-readOnly"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited-readOnly"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited-readOnly"
     >
       <div
         class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
@@ -1553,7 +1553,7 @@ exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
     class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout-group-delimited"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-delimited"
       data-test-subj="test subject string-range-wrapper"
     >
       <div

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

@@ -8,25 +8,29 @@ exports[`EuiAutoRefresh is rendered 1`] = `
     class="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-readOnly emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
+      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-readOnly"
     >
-      <button
-        class="euiFormPrepend euiFormControlLayout__prepend css-1q2k5id-side-uncompressed-isInteractive-prepend"
+      <div
+        class="css-yp07d4-wrapper"
       >
-        <span
-          data-euiicon-type="timeRefresh"
-        />
-        <span
-          class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
+        <button
+          class="euiFormPrepend euiFormControlLayout__prepend css-a31npo-side-uncompressed-empty-primary-isInteractive"
         >
-          <strong>
-            Auto refresh
-          </strong>
-        </span>
-      </button>
+          <span
+            data-euiicon-type="timeRefresh"
+          />
+          <span
+            class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
+          >
+            <strong>
+              Auto refresh
+            </strong>
+          </span>
+        </button>
+      </div>
     </div>
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
     >
       <input
         aria-label="aria-label"
@@ -49,25 +53,29 @@ exports[`EuiAutoRefresh isPaused is false 1`] = `
     class="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-readOnly emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
+      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-readOnly"
     >
-      <button
-        class="euiFormPrepend euiFormControlLayout__prepend css-1q2k5id-side-uncompressed-isInteractive-prepend"
+      <div
+        class="css-yp07d4-wrapper"
       >
-        <span
-          data-euiicon-type="timeRefresh"
-        />
-        <span
-          class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
+        <button
+          class="euiFormPrepend euiFormControlLayout__prepend css-a31npo-side-uncompressed-empty-primary-isInteractive"
         >
-          <strong>
-            Auto refresh
-          </strong>
-        </span>
-      </button>
+          <span
+            data-euiicon-type="timeRefresh"
+          />
+          <span
+            class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
+          >
+            <strong>
+              Auto refresh
+            </strong>
+          </span>
+        </button>
+      </div>
     </div>
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
     >
       <input
         aria-label="Auto refresh"
@@ -89,25 +97,29 @@ exports[`EuiAutoRefresh refreshInterval is rendered 1`] = `
     class="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-readOnly emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
+      class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-readOnly"
     >
-      <button
-        class="euiFormPrepend euiFormControlLayout__prepend css-1q2k5id-side-uncompressed-isInteractive-prepend"
+      <div
+        class="css-yp07d4-wrapper"
       >
-        <span
-          data-euiicon-type="timeRefresh"
-        />
-        <span
-          class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
+        <button
+          class="euiFormPrepend euiFormControlLayout__prepend css-a31npo-side-uncompressed-empty-primary-isInteractive"
         >
-          <strong>
-            Auto refresh
-          </strong>
-        </span>
-      </button>
+          <span
+            data-euiicon-type="timeRefresh"
+          />
+          <span
+            class="euiFormLabel eui-textTruncate emotion-euiFormLabel"
+          >
+            <strong>
+              Auto refresh
+            </strong>
+          </span>
+        </button>
+      </div>
     </div>
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup"
     >
       <input
         aria-label="Auto refresh"

packages/eui/src/components/date_picker/date_picker_range.styles.ts

@@ -27,16 +27,6 @@ export const euiDatePickerRangeStyles = () => {
       .euiPopover {
         flex: 1;
       }
-
-      .euiPopover:last-child {
-        ${logicalCSS('border-top-right-radius', 'inherit')}
-        ${logicalCSS('border-bottom-right-radius', 'inherit')}
-
-        * {
-          ${logicalCSS('border-top-right-radius', 'inherit')}
-          ${logicalCSS('border-bottom-right-radius', 'inherit')}
-        }
-      }
     `,
   };
 };