[EuiSuperDatePicker] & [EuiButtonIcon] A couple quick fixes (#5060)

* [EuiSuperDatePicker] Fix width of inline calendar
* [EuiButtonIcon] Account for `disabled` prop
  - Which in turn fixes EuiPagination left/right arrows, and EuiListGroupItem extra action
* [EuiSuperDatePicker] Fixed responsive sizes of inline date picker

CHANGELOG.md

@@ -9,10 +9,12 @@
 - Fixed untranslated i18n strings for `EuiFilterButton` - adds 2 new tokens and removes old `euiFilterButton.filterBadge` token ([#4750](https://github.com/elastic/eui/pull/5061))
 - Fixed missing i18n token `EuiFilePicker`'s default prompt, and improved i18n string for `euiFilePicker.filesSelected` ([#5063](https://github.com/elastic/eui/pull/5063))
 - Fixed `EuiDataGrid` sort button text pluralization ([#5043](https://github.com/elastic/eui/pull/5043))
+- Fixed styles of `EuiButtonIcon` when passing `disabled` prop ([#5060](https://github.com/elastic/eui/pull/5060))
 
 **Theme: Amsterdam**
 
 - Updated styles for `EuiDatePicker` ([#5000](https://github.com/elastic/eui/pull/5000))
+- Fixed styles for `EuiSuperDatePicker` ([#5060](https://github.com/elastic/eui/pull/5060))
 
 ## [`37.3.0`](https://github.com/elastic/eui/tree/v37.3.0)
 

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

@@ -65,7 +65,7 @@ export default () => (
         <EuiButtonIcon
           iconType="arrowRight"
           display="fill"
-          isDisabled
+          disabled
           aria-label="Next"
         />
       </EuiFlexItem>

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -716,7 +716,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                             >
                               <button
                                 aria-label="Next page"
-                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                 data-test-subj="pagination-button-next"
                                 disabled={true}
                                 onClick={[Function]}

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

@@ -229,6 +229,22 @@ exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiButtonIcon props isDisabled or disabled is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+  disabled=""
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    color="inherit"
+    data-euiicon-type="user"
+  />
+</button>
+`;
+
 exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = `
 <button
   aria-label="button"

src/components/button/button_icon/button_icon.test.tsx

@@ -31,6 +31,14 @@ describe('EuiButtonIcon', () => {
         expect(component).toMatchSnapshot();
       });
 
+      it('or disabled is rendered', () => {
+        const component = render(
+          <EuiButtonIcon iconType="user" aria-label="button" disabled />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+
       it('renders a button even when href is defined', () => {
         const component = render(
           <EuiButtonIcon

src/components/button/button_icon/button_icon.tsx

@@ -136,6 +136,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   iconSize = 'm',
   color = 'primary',
   isDisabled: _isDisabled,
+  disabled,
   href,
   type = 'button',
   display = 'empty',
@@ -147,7 +148,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   ...rest
 }) => {
   const isHrefValid = !href || validateHref(href);
-  const isDisabled = _isDisabled || !isHrefValid;
+  const isDisabled = _isDisabled || disabled || !isHrefValid;
 
   const ariaHidden = rest['aria-hidden'];
   const isAriaHidden = ariaHidden === 'true' || ariaHidden === true;

src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -110,7 +110,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
       </ul>
       <button
         aria-label="Next page"
-        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+        class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-next"
         disabled=""
         type="button"

src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss

@@ -11,7 +11,7 @@
   padding: $euiSize;
 }
 
-@include euiBreakpoint('xs', 's') {
+@include euiBreakpoint('xs') {
   .euiDatePopoverContent {
     // Small screens drop the time selector
     width: $euiDatePickerCalendarWidth;

src/components/list_group/__snapshots__/list_group_item.test.tsx.snap

@@ -117,7 +117,7 @@ exports[`EuiListGroupItem props extraAction can be disabled 1`] = `
     </span>
   </span>
   <button
-    class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction"
+    class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction"
     disabled=""
     type="button"
   >

src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss

@@ -12,7 +12,6 @@
 
   &.euiDatePicker--inline {
     .euiFormControlLayout {
-      display: inline-block;
       width: auto;
     }
   }

src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss

@@ -26,6 +26,10 @@
       text-decoration: underline;
     }
   }
+
+  @include euiBreakpoint('xs') {
+    margin-top: 0;
+  }
 }
 
 .react-datepicker__time,