[EuiSelect] & [EuiSuperSelect] Update to new EuiFormControlLayout props

- Fixed EuiSuperSelect border radius with append/prepend elastic#5442 - Fixed EuiSuperSelect not respecting `readOnly` elastic#3510
cchaos · Mar 22, 2022 · dd3bdac · dd3bdac
1 parent fdca711
commit dd3bdac
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 17 deletions.
diff --git a/src-docs/src/views/form_controls/display_toggles.js b/src-docs/src/views/form_controls/display_toggles.js
@@ -137,7 +137,7 @@ export const DisplayToggles = ({
                       compressed{' '}
                       <EuiToolTip content="Compressed usages are very specific. Click to view full compressed documentation">
                         <a href="#/forms/compressed-forms">
-                          <EuiIcon type="help" />
+                          <EuiIcon type="help" aria-label="help" />
                         </a>
                       </EuiToolTip>
                     </span>

diff --git a/src/components/form/form_control_layout/_num_icons.ts b/src/components/form/form_control_layout/_num_icons.ts
@@ -22,15 +22,17 @@ export type _EuiFormControlLayoutNumIcons = {
   clear?: boolean;
   isLoading?: boolean;
   isInvalid?: boolean;
+  isDropdown?: boolean;
 };
 
 export function getFormControlClassNameForIconCount({
   icon,
   clear,
   isLoading,
   isInvalid,
+  isDropdown,
 }: _EuiFormControlLayoutNumIcons): string | undefined {
-  const numIcons = [icon, clear, isInvalid, isLoading].filter(
+  const numIcons = [icon, clear, isInvalid, isLoading, isDropdown].filter(
     (item) => item === true
   ).length;
 

diff --git a/src/components/form/select/__snapshots__/select.test.tsx.snap b/src/components/form/select/__snapshots__/select.test.tsx.snap
@@ -4,8 +4,8 @@ exports[`EuiSelect is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="[object Object]"
   inputid="id"
+  isdropdown="true"
   isloading="false"
 >
   <eui-validatable-control>
@@ -24,7 +24,7 @@ exports[`EuiSelect props disabled options are rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="[object Object]"
+  isdropdown="true"
   isloading="false"
 >
   <eui-validatable-control>
@@ -51,7 +51,7 @@ exports[`EuiSelect props fullWidth is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="true"
-  icon="[object Object]"
+  isdropdown="true"
   isloading="false"
 >
   <eui-validatable-control>
@@ -66,7 +66,7 @@ exports[`EuiSelect props isInvalid is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="[object Object]"
+  isdropdown="true"
   isinvalid="true"
   isloading="false"
 >
@@ -84,7 +84,7 @@ exports[`EuiSelect props isLoading is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="[object Object]"
+  isdropdown="true"
   isloading="true"
 >
   <eui-validatable-control>
@@ -99,7 +99,7 @@ exports[`EuiSelect props options are rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="[object Object]"
+  isdropdown="true"
   isloading="false"
 >
   <eui-validatable-control>
@@ -125,7 +125,7 @@ exports[`EuiSelect props value option is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
   fullwidth="false"
-  icon="[object Object]"
+  isdropdown="true"
   isloading="false"
 >
   <eui-validatable-control>

diff --git a/src/components/form/select/select.tsx b/src/components/form/select/select.tsx
@@ -77,6 +77,7 @@ export const EuiSelect: FunctionComponent<EuiSelectProps> = ({
   prepend,
   append,
   onMouseUp,
+  disabled,
   ...rest
 }) => {
   // if this is injecting an empty option for `hasNoInitialSelection` then
@@ -133,10 +134,11 @@ export const EuiSelect: FunctionComponent<EuiSelectProps> = ({
 
   return (
     <EuiFormControlLayout
-      icon={icon}
+      isDropdown={true}
       fullWidth={fullWidth}
       isLoading={isLoading}
       isInvalid={isInvalid}
+      isDisabled={disabled}
       compressed={compressed}
       prepend={prepend}
       append={append}
@@ -151,6 +153,7 @@ export const EuiSelect: FunctionComponent<EuiSelectProps> = ({
           defaultValue={selectDefaultValue}
           value={value}
           onMouseUp={handleMouseUp}
+          disabled={disabled}
           {...rest}
         >
           {emptyOptionNode}

diff --git a/src/components/form/super_select/super_select_control.tsx b/src/components/form/super_select/super_select_control.tsx
@@ -74,18 +74,20 @@ export const EuiSuperSelectControl: <T extends string>(
   fullWidth = false,
   isLoading = false,
   isInvalid = false,
+  readOnly,
   defaultValue,
   compressed = false,
   value,
   prepend,
   append,
   screenReaderId,
+  disabled,
   ...rest
 }) => {
   const numIconsClass = getFormControlClassNameForIconCount({
-    icon: true,
     isInvalid,
     isLoading,
+    isDropdown: true,
   });
 
   const classes = classNames(
@@ -116,11 +118,6 @@ export const EuiSuperSelectControl: <T extends string>(
       : selectedValue;
   }
 
-  const icon: EuiFormControlLayoutProps['icon'] = {
-    type: 'arrowDown',
-    side: 'right',
-  };
-
   return (
     <Fragment>
       <input
@@ -129,13 +126,16 @@ export const EuiSuperSelectControl: <T extends string>(
         name={name}
         defaultValue={selectDefaultValue}
         value={value}
+        readOnly={readOnly}
       />
 
       <EuiFormControlLayout
-        icon={icon}
+        isDropdown
         fullWidth={fullWidth}
         isLoading={isLoading}
         isInvalid={isInvalid}
+        isDisabled={disabled}
+        readOnly={readOnly}
         compressed={compressed}
         prepend={prepend}
         append={append}
@@ -157,6 +157,9 @@ export const EuiSuperSelectControl: <T extends string>(
           type="button"
           className={classes}
           aria-haspopup="listbox"
+          disabled={disabled || readOnly}
+          // @ts-ignore Using as a selector only for mixin use
+          readOnly={readOnly}
           {...rest}
         >
           {selectedValue}

diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
@@ -214,7 +214,10 @@
 }
 
 @mixin euiFormControlReadOnlyStyle {
+  // sass-lint:disable-block no-vendor-prefixes
   cursor: default;
+  color: $euiTextColor;
+  -webkit-text-fill-color: $euiTextColor; // Required for Safari
   // Use transparency since there is no border and in case form is on a non-white background
   background: $euiFormBackgroundReadOnlyColor;
   border-color: transparent;

diff --git a/src/themes/amsterdam/overrides/_form_control_layout.scss b/src/themes/amsterdam/overrides/_form_control_layout.scss
@@ -43,11 +43,13 @@
   }
 
   .euiFormControlLayout__childrenWrapper:first-child .euiSelect,
+  .euiFormControlLayout__childrenWrapper:first-child .euiSuperSelectControl,
   .euiFormControlLayout__childrenWrapper:first-child [class*='euiField'] {
     @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'left');
   }
 
   .euiFormControlLayout__childrenWrapper:last-child .euiSelect,
+  .euiFormControlLayout__childrenWrapper:last-child .euiSuperSelectControl,
   .euiFormControlLayout__childrenWrapper:last-child [class*='euiField'] {
     @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right');
   }