Compressed Fixes Round 1

CHANGELOG.md

@@ -3,10 +3,14 @@
 - Add `compressed` option to `buttonSize` prop of EuiButtonGroup ([#2343](https://github.com/elastic/eui/pull/2343))
 - Added disabled states to `EuiCard`, `EuiKeyPadMenuItem` and `EuiKeyPadMenuItemButton`
  ([#2333](https://github.com/elastic/eui/pull/2340))
+- Added missing `compressed` TS definitions to `EuiComboBox`, `EuiCheckboxGroup`, `EuiCheckbox`, `EuiFieldSearch`, `EuiRadioGroup`, `EuiSwitch` ([#2338](https://github.com/elastic/eui/pull/2338))
+- Added auto-margin between `EuiFormRow` and `EuiButton` ([#2338](https://github.com/elastic/eui/pull/2338))
+- Added border to `[readOnly]` inputs ([#2338](https://github.com/elastic/eui/pull/2338))
 
 **Bug fixes**
 
 - Fixed default z-index of `EuiPopover` ([#2341](https://github.com/elastic/eui/pull/2341))
+- Fixed styling for `prepend` and `append` nodes that may be popovers or tooltips ([#2338](https://github.com/elastic/eui/pull/2338))
 
 ## [`14.1.1`](https://github.com/elastic/eui/tree/v14.1.1)
 

src-docs/src/views/form_controls/form_controls_example.js

@@ -75,6 +75,10 @@ import Switch from './switch';
 const switchSource = require('!!raw-loader!./switch');
 const switchHtml = renderToHtml(Switch);
 
+import PrependAppend from './prepend_append';
+const PrependAppendSource = require('!!raw-loader!./prepend_append');
+const PrependAppendHtml = renderToHtml(PrependAppend);
+
 import FormControlLayout from './form_control_layout';
 const formControlLayoutSource = require('!!raw-loader!./form_control_layout');
 const formControlLayoutHtml = renderToHtml(FormControlLayout);
@@ -315,6 +319,59 @@ export const FormControlsExample = {
       },
       demo: <Switch />,
     },
+    {
+      title: 'Prepend and Append',
+      text: (
+        <Fragment>
+          <p>
+            Most form controls accept a <EuiCode>prepend</EuiCode> and{' '}
+            <EuiCode>append</EuiCode> prop that allows passing a single
+            node/string or an array of nodes/strings. Strings will be converted
+            into form labels and connected to the input via{' '}
+            <EuiCode>htmlFor</EuiCode> for accessibility.
+          </p>
+          <p>
+            These are great for demarcating the input&apos;s metric like
+            &quot;px&quot; or &quot;ms&quot;. You can also pass buttons for
+            input settings or additional filters. Just be sure to use
+            <EuiCode>&lt;EuiButtonEmpty size=&quot;xs&quot; /&gt;</EuiCode>.
+          </p>
+        </Fragment>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: PrependAppendSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: PrependAppendHtml,
+        },
+      ],
+      demo: <PrependAppend />,
+      snippet: [
+        `<EuiFieldText
+  prepend="Label"
+  append="px"
+/>`,
+        `<EuiFieldText
+  prepend={
+    <EuiPopover
+      button={
+        <EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
+          Popover
+        </EuiButtonEmpty>
+      }
+      closePopover={() => {}}
+    />
+  }
+  append={[
+    <EuiButtonIcon iconType="gear" />,
+    "Label",
+  ]}
+/>`,
+      ],
+    },
     {
       title: 'Form control layout',
       source: [

src-docs/src/views/form_controls/prepend_append.js

@@ -0,0 +1,171 @@
+import React, { Fragment, useState } from 'react';
+
+import {
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiFieldText,
+  EuiIcon,
+  EuiIconTip,
+  EuiPopover,
+  EuiSpacer,
+  EuiSwitch,
+  EuiText,
+  EuiToolTip,
+} from '../../../../src/components';
+
+export default () => {
+  const [isCompressed, setCompressed] = useState(false);
+  const [isDisabled, setDisabled] = useState(false);
+  const [isReadOnly, setReadOnly] = useState(false);
+
+  return (
+    <Fragment>
+      <EuiSwitch
+        label="compressed"
+        checked={isCompressed}
+        onChange={e => setCompressed(e.target.checked)}
+      />
+      &emsp;
+      <EuiSwitch
+        label="disabled"
+        checked={isDisabled}
+        onChange={e => setDisabled(e.target.checked)}
+      />
+      &emsp;
+      <EuiSwitch
+        label="readOnly"
+        checked={isReadOnly}
+        onChange={e => setReadOnly(e.target.checked)}
+      />
+      <EuiSpacer />
+      <EuiFieldText
+        placeholder="String & text in a tooltip"
+        prepend="String"
+        append={
+          <EuiToolTip content="content">
+            <EuiText size="s">Tooltip</EuiText>
+          </EuiToolTip>
+        }
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+      />
+      <EuiSpacer />
+      <EuiFieldText
+        placeholder="XS empty button in a popover & tooltip"
+        prepend={
+          <EuiPopover
+            button={
+              <EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
+                Popover
+              </EuiButtonEmpty>
+            }
+            closePopover={() => {}}
+          />
+        }
+        append={
+          <EuiToolTip content="content">
+            <EuiButtonEmpty size="xs">Tooltip</EuiButtonEmpty>
+          </EuiToolTip>
+        }
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+      />
+      <EuiSpacer />
+      <EuiFieldText
+        placeholder="XS empty buttons with icons"
+        prepend={
+          <EuiButtonEmpty size="xs" iconType="arrowDown" iconSide="right">
+            <EuiIcon type="calendar" />
+          </EuiButtonEmpty>
+        }
+        append={
+          <EuiButtonEmpty size="xs" iconType="gear">
+            Tooltip
+          </EuiButtonEmpty>
+        }
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+      />
+      <EuiSpacer />
+      <EuiFieldText
+        placeholder="Icon & button icon"
+        prepend={<EuiIcon type="vector" />}
+        append={<EuiButtonIcon iconType="gear" aria-label="Gear this" />}
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+      />
+      <EuiSpacer />
+      <EuiFieldText
+        placeholder="Icons in buttons and popovers and tooltips"
+        prepend={[
+          <EuiIcon type="vector" />,
+          <EuiButtonIcon iconType="gear" aria-label="Gear this" />,
+        ]}
+        append={[
+          <EuiPopover
+            button={<EuiButtonIcon iconType="gear" aria-label="Gear this" />}
+            closePopover={() => {}}
+          />,
+          <EuiIconTip content="content" />,
+        ]}
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+      />
+      <EuiSpacer />
+      <EuiFieldText
+        placeholder="Icon button in popover & tooltip"
+        append={
+          <EuiPopover
+            button={<EuiButtonIcon iconType="arrowDown" aria-label="Popover" />}
+            closePopover={() => {}}
+          />
+        }
+        prepend={
+          <EuiToolTip content="content">
+            <EuiButtonIcon iconType="gear" aria-label="Gear this" />
+          </EuiToolTip>
+        }
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+      />
+      <EuiSpacer />
+      <EuiFieldText
+        placeholder="Icon and string & string and icon button"
+        prepend={[<EuiIcon type="vector" />, 'String']}
+        append={[
+          'String',
+          <EuiButtonIcon iconType="gear" aria-label="Gear this" />,
+        ]}
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+      />
+      <EuiSpacer />
+      <EuiFieldText
+        placeholder="String and button icon in tooltip & button icon in popover and string "
+        prepend={[
+          'String',
+          <EuiToolTip content="content">
+            <EuiButtonIcon iconType="gear" aria-label="Gear this" />
+          </EuiToolTip>,
+        ]}
+        append={[
+          <EuiPopover
+            button={<EuiButtonIcon iconType="gear" aria-label="Gear this" />}
+            closePopover={() => {}}
+          />,
+          'String',
+        ]}
+        compressed={isCompressed}
+        disabled={isDisabled}
+        readOnly={isReadOnly}
+      />
+    </Fragment>
+  );
+};

src/components/combo_box/index.d.ts

@@ -79,6 +79,7 @@ declare module '@elastic/eui' {
   export interface EuiComboBoxProps<T> {
     id?: string;
     isDisabled?: boolean;
+    compressed?: boolean;
     className?: string;
     placeholder?: string;
     isLoading?: boolean;

src/components/date_picker/_date_picker_range.scss

@@ -48,6 +48,7 @@
   }
 
   > .euiDatePickerRange__delimeter {
+    background-color: transparent !important; // override .euiFormControlLayout--group .euiText
     line-height: 1 !important;
     flex: 0 0 auto;
     padding-left: $euiFormControlPadding / 2;

src/components/form/_mixins.scss

@@ -149,9 +149,9 @@
 @mixin euiFormControlReadOnlyStyle {
   cursor: default;
   // Use transparency since there is no border and in case form is on a non-white background
-  background: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .88);
+  background: $euiFormBackgroundReadOnlyColor;
   border-color: transparent;
-  box-shadow: none;
+  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 }
 
 /**

src/components/form/_variables.scss

@@ -21,11 +21,13 @@ $euiSwitchThumbSizeCompressed: $euiSwitchHeightCompressed !default;
 // Coloring
 $euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
 $euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
-$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 60%) !default;
+$euiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($euiColorLightShade, $euiColorInk), .95) !default;
+$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default;
 $euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
 $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $euiColorLightShade
 $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
-$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8);
-$euiFormInputGroupLabelBackground: shadeOrTint($euiFormBackgroundDisabledColor, 0, 3%);
+$euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default;
+$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 65%, 40%) !default;
+$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 6%, 8%) !default;

src/components/form/checkbox/index.d.ts

@@ -24,6 +24,7 @@ declare module '@elastic/eui' {
     label?: ReactNode;
     type?: EuiCheckboxType;
     disabled?: boolean;
+    compressed?: boolean;
     indeterminate?: boolean;
   }
 
@@ -50,6 +51,7 @@ declare module '@elastic/eui' {
     options: EuiCheckboxGroupOption[];
     idToSelectedMap: EuiCheckboxGroupIdToSelectedMap;
     onChange: ChangeEventHandler<HTMLInputElement>;
+    compressed?: boolean;
   }
 
   export const EuiCheckboxGroup: FunctionComponent<

src/components/form/field_search/index.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from '../../common';
 
-import { FunctionComponent, InputHTMLAttributes } from 'react';
+import { FunctionComponent, InputHTMLAttributes, Ref } from 'react';
 
 declare module '@elastic/eui' {
   /**
@@ -17,8 +17,10 @@ declare module '@elastic/eui' {
     isInvalid?: boolean;
     fullWidth?: boolean;
     isLoading?: boolean;
-    incremental?: boolean;
     onSearch?: (value: string) => void;
+    incremental?: boolean;
+    compressed?: boolean;
+    inputRef?: Ref<HTMLInputElement>;
   }
 
   export const EuiFieldSearch: FunctionComponent<