[Visual Refresh] Add EuiFormControlButton component

packages/eui/changelogs/upcoming/9006.md

@@ -0,0 +1,3 @@
+- Added `EuiFormControlButton` component for usage as input-styled button within `EuiFormControlLayout`
+- Updated `EuiSuperDatePicker` to use `EuiFormControlButton` when a prettified duration button is rendered
+

packages/eui/src/components/button/button_empty/button_empty.tsx

@@ -84,7 +84,8 @@ export interface CommonEuiButtonEmptyProps
   contentProps?: CommonProps & EuiButtonDisplayContentType;
 }
 
-type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>;
+export type EuiButtonEmptyPropsForAnchor =
+  PropsForAnchor<CommonEuiButtonEmptyProps>;
 
 export type EuiButtonEmptyPropsForButton =
   PropsForButton<CommonEuiButtonEmptyProps>;

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

@@ -43,11 +43,15 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
     >
       <button
-        class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
+        class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
         type="button"
       >
-        Last 15 minutes
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+        >
+          Last 15 minutes
+        </span>
       </button>
     </div>
   </div>
@@ -116,11 +120,15 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
     >
       <button
-        class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
+        class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
         type="button"
       >
-        Last 15 minutes
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+        >
+          Last 15 minutes
+        </span>
       </button>
     </div>
   </div>
@@ -256,15 +264,19 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly passes required props 1`] =
 
 exports[`EuiSuperDatePicker props isDisabled config object 1`] = `
 <button
-  class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled emotion-euiSuperDatePicker__prettyFormat"
+  class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled emotion-euiButtonDisplay-euiButtonEmpty-m-empty-disabled-isDisabled-euiFormControlButton-euiSuperDatePicker__prettyFormat"
   data-test-subj="superDatePickerShowDatesButton"
   disabled=""
   type="button"
 >
   <span
-    data-test-subj="customDisabledDisplay"
+    class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
   >
-    All time
+    <span
+      data-test-subj="customDisabledDisplay"
+    >
+      All time
+    </span>
   </span>
 </button>
 `;
@@ -312,12 +324,16 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
     >
       <button
-        class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled emotion-euiSuperDatePicker__prettyFormat"
+        class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled emotion-euiButtonDisplay-euiButtonEmpty-m-empty-disabled-isDisabled-euiFormControlButton-euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
         disabled=""
         type="button"
       >
-        Last 15 minutes
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+        >
+          Last 15 minutes
+        </span>
       </button>
     </div>
   </div>
@@ -452,11 +468,15 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
     >
       <button
-        class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
+        class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
         type="button"
       >
-        Last 15 minutes
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+        >
+          Last 15 minutes
+        </span>
       </button>
     </div>
   </div>
@@ -505,11 +525,15 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
     >
       <button
-        class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
+        class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
         type="button"
       >
-        Last 15 minutes
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+        >
+          Last 15 minutes
+        </span>
       </button>
     </div>
   </div>
@@ -581,11 +605,15 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
     >
       <button
-        class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
+        class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
         type="button"
       >
-        Last 15 minutes
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+        >
+          Last 15 minutes
+        </span>
       </button>
     </div>
   </div>
@@ -654,11 +682,15 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
     >
       <button
-        class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
+        class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
         type="button"
       >
-        Last 15 minutes
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+        >
+          Last 15 minutes
+        </span>
       </button>
     </div>
   </div>
@@ -728,11 +760,15 @@ exports[`EuiSuperDatePicker renders 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly"
     >
       <button
-        class="euiSuperDatePicker__prettyFormat emotion-euiSuperDatePicker__prettyFormat"
+        class="euiButtonEmpty euiFormControlButton euiSuperDatePicker__prettyFormat emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiSuperDatePicker__prettyFormat"
         data-test-subj="superDatePickerShowDatesButton"
         type="button"
       >
-        Last 15 minutes
+        <span
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+        >
+          Last 15 minutes
+        </span>
       </button>
     </div>
   </div>

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

@@ -21,7 +21,11 @@ import { isObject } from '../../../services/predicate';
 import { EuiI18nConsumer } from '../../context';
 import { CommonProps } from '../../common';
 import { EuiDatePickerRange } from '../date_picker_range';
-import { EuiFormControlLayout, EuiFormControlLayoutProps } from '../../form';
+import {
+  EuiFormControlButton,
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from '../../form';
 
 import {
   ShortDate,
@@ -604,7 +608,7 @@ export class EuiSuperDatePickerInternal extends Component<
       return (
         <EuiFormControlLayout {...formControlLayoutProps}>
           {!isQuickSelectOnly && (
-            <button
+            <EuiFormControlButton
               type="button"
               css={styles.euiSuperDatePicker__prettyFormat}
               className={classNames('euiSuperDatePicker__prettyFormat', {
@@ -625,7 +629,7 @@ export class EuiSuperDatePickerInternal extends Component<
                   dateFormat={dateFormat}
                 />
               )}
-            </button>
+            </EuiFormControlButton>
           )}
         </EuiFormControlLayout>
       );

packages/eui/src/components/form/form.styles.test.tsx

@@ -123,21 +123,21 @@ describe('euiFormControlStyles', () => {
 
 
         &::-webkit-input-placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
+          color: #798EAF;
+          opacity: 1;
+         }
         &::-moz-placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
+          color: #798EAF;
+          opacity: 1;
+         }
         &:-moz-placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
+          color: #798EAF;
+          opacity: 1;
+         }
         &::placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
+          color: #798EAF;
+          opacity: 1;
+         }
 
         ",
         "focus": "
@@ -210,21 +210,21 @@ describe('euiFormControlStyles', () => {
 
 
         &::-webkit-input-placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
+          color: #798EAF;
+          opacity: 1;
+         }
         &::-moz-placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
+          color: #798EAF;
+          opacity: 1;
+         }
         &:-moz-placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
+          color: #798EAF;
+          opacity: 1;
+         }
         &::placeholder { 
-            color: #798EAF;
-            opacity: 1;
-           }
+          color: #798EAF;
+          opacity: 1;
+         }
 
 
 

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

@@ -25,6 +25,19 @@ import { highContrastModeStyles } from '../../global_styling/functions/high_cont
 export const euiFormMaxWidth = ({ euiTheme }: UseEuiTheme) =>
   euiTheme.components.forms.maxWidth;
 
+export const euiFormPlaceholderStyles = (
+  euiThemeContext: UseEuiTheme,
+  color?: string
+) => {
+  const form = euiFormVariables(euiThemeContext);
+  const _color = color ?? form.textColorDisabled;
+
+  return `
+    color: ${_color};
+    opacity: 1;
+  `;
+};
+
 export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, highContrastMode } = euiThemeContext;
   const isRefreshVariant = isEuiThemeRefreshVariant(
@@ -195,10 +208,9 @@ export const euiFormControlText = (euiThemeContext: UseEuiTheme) => {
     font-size: ${fontSize};
     color: ${form.textColor};
 
-    ${euiPlaceholderPerBrowser(`
-      color: ${form.controlPlaceholderText};
-      opacity: 1;
-    `)}
+    ${euiPlaceholderPerBrowser(
+      euiFormPlaceholderStyles(euiThemeContext, form.controlPlaceholderText)
+    )}
   `;
 };
 
@@ -422,10 +434,7 @@ export const euiFormControlDisabledStyles = (euiThemeContext: UseEuiTheme) => {
 
     ${isRefreshVariant && refreshVariantStyles}
 
-    ${euiPlaceholderPerBrowser(`
-      color: ${form.textColorDisabled};
-      opacity: 1;
-    `)}
+    ${euiPlaceholderPerBrowser(euiFormPlaceholderStyles(euiThemeContext))}
   `;
 };
 

packages/eui/src/components/form/form_control_button/__snapshots__/form_control_button.test.tsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiButtonEmpty is rendered 1`] = `
+<button
+  aria-label="aria-label"
+  class="euiButtonEmpty euiFormControlButton testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiFormControlButton-euiTestCss"
+  data-test-subj="test subject string"
+  type="button"
+  value="Button value"
+>
+  <span
+    class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFormControlButton__content"
+  >
+    <span
+      class="eui-textTruncate css-z3gg36-textContent"
+    >
+      Button value
+    </span>
+
+    <span />
+  </span>
+</button>
+`;