Skip to content

Commit

Permalink
[EuiSuperDatePicker] Convert date popover styles to Emotion (#7908)
Browse files Browse the repository at this point in the history
  • Loading branch information
cee-chen authored Jul 25, 2024
1 parent f33c787 commit 3fec66b
Show file tree
Hide file tree
Showing 10 changed files with 400 additions and 419 deletions.
3 changes: 3 additions & 0 deletions packages/eui/changelogs/upcoming/7908.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**CSS-in-JS conversions**

- Converted `EuiSuperDatePicker`'s date popover content to Emotion
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
@import 'date_popover/index';
@import 'quick_select_popover/index';

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { css } from '@emotion/react';

import { UseEuiTheme } from '../../../../services';
import { logicalCSS, mathWithUnits } from '../../../../global_styling';

export const euiAbsoluteTabDateFormStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;

return {
euiAbsoluteTabDateForm: css`
${logicalCSS('padding-horizontal', euiTheme.size.s)}
${logicalCSS('padding-bottom', euiTheme.size.s)}
`,
euiAbsoluteTabDateForm__submit: css`
flex-shrink: 0;
`,
euiAbsoluteTabDateForm__row: css`
flex-grow: 1;
/* CSS hack to make the help/error text extend to the submit button.
* We can't actually put the submit button within an EuiFormRow due to
* cloneElement limitations (https://github.com/elastic/eui/issues/2493#issuecomment-561278494)
* TODO: Remove this and clean up DOM rendering once we can
*/
.euiFormRow__text {
${logicalCSS(
'margin-right',
mathWithUnits(
[euiTheme.size.xl, euiTheme.size.s],
(submitButtonSize, gapSize) => -1 * (submitButtonSize + gapSize)
)
)}
}
`,
};
};
Loading

0 comments on commit 3fec66b

Please sign in to comment.