A couple fixes for 7.10

CHANGELOG.md

@@ -1,5 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `both` option to `flush` prop of `EuiButtonEmpty` ([#4084](https://github.com/elastic/eui/pull/4084))
+
+**Bug fixes**
+
+- Fixed `EuiRange` and `EuiDualRange` display of internal spacer ([#4084](https://github.com/elastic/eui/pull/4084))
+- Fixed `EuiFieldSearch` padding for the different states ([#4084](https://github.com/elastic/eui/pull/4084))
+- Fixed `EuiCheckableCard` disabled but checked styles ([#4084](https://github.com/elastic/eui/pull/4084))
+
 **Theme: Amsterdam**
 
 - Fixed `line-height` on `EuiTitle` ([#4079](https://github.com/elastic/eui/pull/4079))

src-docs/src/views/button/button_empty_flush.js

@@ -15,5 +15,9 @@ export default () => (
     <EuiFlexItem grow={false}>
       <EuiButtonEmpty flush="right">Flush right</EuiButtonEmpty>
     </EuiFlexItem>
+
+    <EuiFlexItem grow={false}>
+      <EuiButtonEmpty flush="both">Flush both</EuiButtonEmpty>
+    </EuiFlexItem>
   </EuiFlexGroup>
 );

src-docs/src/views/button/button_example.js

@@ -253,6 +253,7 @@ export const ButtonExample = {
           the other content in the container.
         </p>
       ),
+      props: { EuiButtonEmpty },
       snippet: buttonOptionFlushSnippet,
       demo: <ButtonOptionFlush />,
     },

src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap

@@ -113,6 +113,21 @@ exports[`EuiButtonEmpty props contentProps is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButtonEmpty props flush both is rendered 1`] = `
+<button
+  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushBoth"
+  type="button"
+>
+  <span
+    class="euiButtonContent euiButtonEmpty__content"
+  >
+    <span
+      class="euiButtonEmpty__text"
+    />
+  </span>
+</button>
+`;
+
 exports[`EuiButtonEmpty props flush left is rendered 1`] = `
 <button
   class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"

src/components/button/button_empty/_button_empty.scss

@@ -49,6 +49,24 @@
   }
 }
 
+
+.euiButtonEmpty--flushLeft,
+.euiButtonEmpty--flushRight,
+.euiButtonEmpty--flushBoth {
+  .euiButtonEmpty__content {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.euiButtonEmpty--flushLeft {
+  margin-right: $euiSizeS;
+}
+
+.euiButtonEmpty--flushRight {
+  margin-left: $euiSizeS;
+}
+
 // Modifier naming and colors.
 $euiButtonEmptyTypes: (
   primary: $euiColorPrimary,
@@ -84,22 +102,3 @@ $euiButtonEmptyTypes: (
   }
 }
 
-.euiButtonEmpty--flushLeft {
-  margin-right: $euiSizeS;
-
-  .euiButtonEmpty__content {
-    border-left: none;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-.euiButtonEmpty--flushRight {
-  margin-left: $euiSizeS;
-
-  .euiButtonEmpty__content {
-    border-right: none;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}

src/components/button/button_empty/button_empty.tsx

@@ -64,6 +64,7 @@ export type EuiButtonEmptySizes = keyof typeof sizeToClassNameMap;
 const flushTypeToClassNameMap = {
   left: 'euiButtonEmpty--flushLeft',
   right: 'euiButtonEmpty--flushRight',
+  both: 'euiButtonEmpty--flushBoth',
 };
 
 export const FLUSH_TYPES = keysOf(flushTypeToClassNameMap);
@@ -79,7 +80,7 @@ interface CommonEuiButtonEmptyProps extends EuiButtonContentProps, CommonProps {
   color?: EuiButtonEmptyColor;
   size?: EuiButtonEmptySizes;
   /**
-   * Ensure the text of the button sits flush to the left or right side of its container
+   * Ensure the text of the button sits flush to the left, right, or both sides of its container
    */
   flush?: keyof typeof flushTypeToClassNameMap;
   /**

src/components/card/checkable_card/_checkable_card.scss

@@ -5,18 +5,16 @@
   overflow: hidden; // Hides background color inside panel rounded corners
 
   &:not(.euiCheckableCard-isDisabled) {
+    &.euiCheckableCard-isChecked {
+      border-color: $euiColorPrimary;
+    }
+
     &:focus-within {
       @include euiFocusRing;
     }
   }
 }
 
-.euiCheckableCard-isChecked {
-  border-color: $euiColorPrimary;
-}
-
-
-
 .euiCheckableCard__row {
   display: flex;
   align-items: stretch;

src/components/form/field_search/_field_search.scss

@@ -21,11 +21,31 @@
     display: none; /* 2 */
   }
 
+  &.euiFieldSearch-isClearable {
+    @include euiFormControlLayoutPadding(1)
+  }
+
+  &.euiFieldSearch-isLoading {
+    @include euiFormControlLayoutPadding(1);
+  }
+
+  &.euiFieldSearch-isLoading.euiFieldSearch-isClearable {
+    @include euiFormControlLayoutPadding(2);
+  }
+
   &.euiFieldSearch--compressed {
     @include euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: true);
-  }
 
-  &.euiFieldSearch-isClearable {
-    @include euiFormControlLayoutPadding(1)
+    &.euiFieldSearch-isClearable {
+      @include euiFormControlLayoutPadding(1, $compressed: true);
+    }
+
+    &.euiFieldSearch-isLoading {
+      @include euiFormControlLayoutPadding(1, $compressed: true);
+    }
+
+    &.euiFieldSearch-isLoading.euiFieldSearch-isClearable {
+      @include euiFormControlLayoutPadding(2, $compressed: true);
+    }
   }
-}
+}

src/components/form/range/__snapshots__/dual_range.test.tsx.snap

@@ -4,9 +4,6 @@ exports[`EuiDualRange allows value prop to accept empty strings 1`] = `
 <div
   class="euiRangeWrapper euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -22,19 +19,13 @@ exports[`EuiDualRange allows value prop to accept empty strings 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
 exports[`EuiDualRange allows value prop to accept numbers 1`] = `
 <div
   class="euiRangeWrapper euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -58,9 +49,6 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
@@ -143,9 +131,6 @@ exports[`EuiDualRange is rendered 1`] = `
 <div
   class="euiRangeWrapper euiDualRange testClass1 testClass2"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -172,19 +157,13 @@ exports[`EuiDualRange is rendered 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
 exports[`EuiDualRange props compressed should render 1`] = `
 <div
   class="euiRangeWrapper euiRangeWrapper--compressed euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -208,19 +187,13 @@ exports[`EuiDualRange props compressed should render 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
 exports[`EuiDualRange props custom ticks should render 1`] = `
 <div
   class="euiRangeWrapper euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -269,19 +242,13 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
 exports[`EuiDualRange props disabled should render 1`] = `
 <div
   class="euiRangeWrapper euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack euiRangeTrack--disabled"
@@ -306,19 +273,13 @@ exports[`EuiDualRange props disabled should render 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
 exports[`EuiDualRange props fullWidth should render 1`] = `
 <div
   class="euiRangeWrapper euiRangeWrapper--fullWidth euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -342,9 +303,6 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
@@ -429,9 +387,6 @@ exports[`EuiDualRange props labels should render 1`] = `
 <div
   class="euiRangeWrapper euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <label
     class="euiRangeLabel euiRangeLabel--min"
   >
@@ -465,19 +420,13 @@ exports[`EuiDualRange props labels should render 1`] = `
   >
     100
   </label>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
 exports[`EuiDualRange props levels should render 1`] = `
 <div
   class="euiRangeWrapper euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -513,19 +462,13 @@ exports[`EuiDualRange props levels should render 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
 exports[`EuiDualRange props range should render 1`] = `
 <div
   class="euiRangeWrapper euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -549,9 +492,6 @@ exports[`EuiDualRange props range should render 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;
 
@@ -609,9 +549,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
 <div
   class="euiRangeWrapper euiDualRange"
 >
-  <div
-    class="euiRange__horizontalSpacer"
-  />
   <div
     aria-hidden="false"
     class="euiRangeTrack"
@@ -695,8 +632,5 @@ exports[`EuiDualRange props ticks should render 1`] = `
       type="range"
     />
   </div>
-  <div
-    class="euiRange__horizontalSpacer"
-  />
 </div>
 `;