From b2836fe9d4380038090e2fb3f8fd7067a32a0282 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Wed, 14 Jun 2023 13:31:07 -0700
Subject: [PATCH] [tech debt] Lint Emotion CSS-in-JS (#6839)
* Upgrade `stylelint` to latest v15+
- see https://github.com/stylelint/stylelint/blob/main/docs/migration-guide/to-15.md - this removal of Prettier conflicts will save us a lot of setup for CSS-in-JS
* Move Sass-specific rules & deprecated v15 rules
- to Sass overrides only - we'll need a separate set of rules for CSS-in-JS later
- see https://github.com/stylelint/stylelint/blob/main/docs/user-guide/rules.md#deprecated
* Install + setup stylelint css-in-js custom syntax
- @see https://github.com/hudochenkov/postcss-styled-syntax
+ set up rule overrides as necessary to handle JS-specific issues
* [cleanup] remove unnecessary extra `*-fix` scripts
- in favor of simply typing `--fix` manually, or calling `yarn llint-fix`
- remove lint-sass-fix entirely since we're moving away from sass
* Change all inline CSS `//` comments to `/* */`
- required by parser - see https://github.com/hudochenkov/postcss-styled-syntax#known-issues
* Fix `//` comment + usage of static px
- use `mathWithUnits` and border width var instead
* Fix `EuiMark` comments + style architecture
- use obj keys so that Emotion correctly generates the expected classNames
- use conditionals in array, not in CSS generation
- use separate fn for SR styles that take a custom arg
* Add `stylelint-disable`s for `!important` usage
- matches Sass
* Lint extra trailing `;`s
Our various JS utils generally include trailing `;`s and don't need extra `;`s after them
+ lint a few extra trailing `}`s which stylelint also catches
* Lint double `::`s for pseudo elements
* Lint `:not()` syntax
- new stylelint default in v15 uses commas (complex) instead of chained `:not()`s
- disable for Sass - wasn't previously linted
* Handle `property-no-vendor-prefix` lint rule
- valid usage in this case, but in general we should lint for it
* Lint `rule-empty-line-before`
- `except` isn't handling JS interpolation well, so change it to `ignore` instead
* Update snapshots
* Quiet deprecation warnings from CLI
- Sass will be going away soon and is irrelevant
- CSS-in-JS has one deprecation warning (extra semicolons), but it's pretty dang useful, so I think we should not warn on it
* Add wiki faq for CSS comments
- I'm sure this will come up in the future otherwise
---
.stylelintrc.js | 150 +++++---
package.json | 17 +-
.../screen_reader_only.styles.ts | 18 +-
.../skip_link/skip_link.styles.ts | 3 +-
src/components/accordion/accordion.styles.ts | 12 +-
src/components/avatar/avatar.styles.ts | 6 +-
src/components/badge/badge.styles.ts | 24 +-
.../badge/badge_group/badge_group.styles.ts | 2 +-
.../badge_notification.styles.ts | 2 +-
.../__snapshots__/basic_table.test.tsx.snap | 4 +-
.../in_memory_table.test.tsx.snap | 4 +-
src/components/beacon/beacon.styles.ts | 16 +-
.../bottom_bar/bottom_bar.styles.ts | 2 +-
.../breadcrumbs/breadcrumb.styles.ts | 21 +-
.../breadcrumbs/breadcrumbs.styles.ts | 8 +-
.../button_display/_button_display.styles.ts | 2 +-
.../_button_display_content.styles.ts | 4 +-
src/components/call_out/call_out.styles.ts | 6 +-
src/components/card/card.styles.ts | 105 +++---
.../card/card_select/card_select.styles.ts | 2 +-
.../checkable_card/checkable_card.styles.ts | 4 +-
src/components/code/code_block.styles.ts | 8 +-
src/components/code/code_block_line.styles.ts | 6 +-
.../color_stops/color_stop_thumb.styles.ts | 9 +-
.../color_stops/color_stops.styles.ts | 9 +-
.../__snapshots__/data_grid.test.tsx.snap | 4 +-
.../date_picker/date_picker_range.styles.ts | 18 +-
.../description_list_description.styles.ts | 8 +-
.../description_list_title.styles.ts | 12 +-
.../error_boundary/error_boundary.styles.ts | 6 +-
.../expression/expression.styles.ts | 16 +-
src/components/facet/facet_button.styles.ts | 4 +-
src/components/flex/flex_group.styles.ts | 2 +-
src/components/flyout/flyout.styles.ts | 26 +-
src/components/flyout/flyout_body.styles.ts | 4 +-
.../form/range/range_highlight.styles.ts | 2 +-
.../form/range/range_levels.styles.ts | 2 +-
.../form/range/range_slider.styles.ts | 23 +-
.../form/range/range_thumb.styles.ts | 6 +-
.../form/range/range_ticks.styles.ts | 8 +-
.../form/range/range_tooltip.styles.ts | 2 +-
.../form/range/range_track.styles.ts | 6 +-
.../form/range/range_wrapper.styles.ts | 4 +-
.../header_breadcrumbs.styles.ts | 2 +-
.../__snapshots__/highlight.test.tsx.snap | 16 +-
.../horizontal_rule/horizontal_rule.styles.ts | 5 +-
src/components/icon/icon.styles.ts | 30 +-
src/components/image/image.styles.ts | 16 +-
src/components/image/image_button.styles.ts | 10 +-
src/components/image/image_caption.styles.ts | 7 +-
.../image/image_fullscreen_wrapper.styles.ts | 8 +-
src/components/image/image_wrapper.styles.ts | 6 +-
.../list_group/list_group.styles.ts | 4 +-
.../list_group/list_group_item.styles.ts | 14 +-
.../pinnable_list_group.styles.ts | 2 +-
.../loading/loading_chart.styles.ts | 10 +-
.../loading/loading_elastic.styles.ts | 2 +-
src/components/loading/loading_logo.styles.ts | 20 +-
.../loading/loading_spinner.styles.ts | 2 +-
.../mark/__snapshots__/mark.test.tsx.snap | 2 +-
src/components/mark/mark.styles.ts | 56 ++-
src/components/mark/mark.tsx | 33 +-
src/components/modal/modal.styles.ts | 15 +-
src/components/modal/modal_body.styles.ts | 6 +-
src/components/modal/modal_footer.styles.ts | 2 +-
src/components/modal/modal_header.styles.ts | 2 +-
.../overlay_mask/overlay_mask.styles.ts | 6 +-
.../overlay_mask/overlay_mask.test.tsx | 4 +-
src/components/page/page.styles.ts | 8 +-
.../page/page_body/page_body.styles.ts | 4 +-
.../page/page_header/page_header.styles.ts | 10 +-
.../page_header/page_header_content.styles.ts | 8 +-
.../page/page_section/page_section.styles.ts | 20 +-
.../page/page_sidebar/page_sidebar.styles.ts | 4 +-
.../page_template/inner/page_inner.styles.ts | 2 +-
.../page_template/outer/page_outer.styles.ts | 2 +-
.../__snapshots__/pagination.test.tsx.snap | 40 +--
.../pagination_button.test.tsx.snap | 2 +-
.../pagination/pagination.styles.ts | 11 +-
.../pagination/pagination_button.styles.ts | 12 +-
src/components/panel/panel.styles.ts | 8 +-
src/components/popover/popover.styles.ts | 2 +-
.../popover_arrow/_popover_arrow.styles.ts | 12 +-
.../popover/popover_footer.styles.ts | 4 +-
.../popover_panel/_popover_panel.styles.ts | 14 +-
.../popover/popover_title.styles.ts | 4 +-
.../progress.styles.test.ts.snap | 32 +-
src/components/progress/progress.styles.ts | 10 +-
.../selectable_list.test.tsx.snap | 4 +-
.../skeleton/skeleton_circle.styles.ts | 8 +-
.../skeleton/skeleton_text.styles.ts | 2 +-
.../skeleton/skeleton_title.styles.ts | 14 +-
src/components/spacer/spacer.styles.ts | 2 +-
src/components/steps/step.styles.ts | 12 +-
.../steps/step_horizontal.styles.ts | 6 +-
src/components/steps/step_number.styles.ts | 8 +-
.../steps/steps_horizontal.styles.ts | 8 +-
src/components/steps/sub_steps.styles.ts | 2 +-
.../table_pagination.test.tsx.snap | 20 +-
src/components/tabs/tab.styles.ts | 8 +-
src/components/tabs/tabs.styles.ts | 6 +-
.../__snapshots__/text.styles.test.ts.snap | 30 +-
src/components/text/text.styles.ts | 33 +-
src/components/text/text_color.styles.ts | 3 +-
.../timeline/timeline_item_icon.styles.ts | 2 +-
src/components/title/title.styles.ts | 2 +-
.../toast/global_toast_list.styles.ts | 42 +--
src/components/toast/toast.styles.ts | 32 +-
src/components/token/token.styles.ts | 22 +-
src/components/tool_tip/tool_tip.styles.ts | 22 +-
src/components/tour/tour.styles.ts | 34 +-
.../__snapshots__/utility.test.tsx.snap | 14 +-
.../amsterdam/global_styling/mixins/button.ts | 2 +-
.../developing/writing-styles-with-emotion.md | 6 +
yarn.lock | 328 +++++++++++-------
115 files changed, 963 insertions(+), 795 deletions(-)
diff --git a/.stylelintrc.js b/.stylelintrc.js
index c9d4baa4c1c..a9f4a8aa115 100644
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@@ -1,24 +1,13 @@
const camelCaseRegex = '^[a-z][\\w-]*$'; // Note: also allows `_` as part of BEM naming
+const camelCaseValueRegex = '/^[a-z][\\w.]*$/'; // Note: also allows `.` for JS objects
+const cssInJsVarRegex = '/\\${[a-zA-Z]+/';
-// TODO: Remove Sass-specific config & rules once we're completely off Sass
module.exports = {
- extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'],
// @see https://stylelint.io/user-guide/rules
- // @see https://github.com/stylelint-scss/stylelint-scss#list-of-rules
rules: {
// Enforce camelCase naming
'selector-class-pattern': camelCaseRegex,
'keyframes-name-pattern': camelCaseRegex,
- 'scss/dollar-variable-pattern': camelCaseRegex,
- 'scss/at-mixin-pattern': camelCaseRegex,
- 'scss/at-function-pattern': camelCaseRegex,
- // TODO: This rule can be removed entirely (already lower by default) once we're fully off Sass
- 'function-name-case': [
- 'lower',
- {
- ignoreFunctions: [`/${camelCaseRegex}/`, 'MIN'],
- },
- ],
// Opinionated rules
'declaration-no-important': true,
@@ -36,47 +25,19 @@ module.exports = {
},
],
- // 2 spaces for indentation
- indentation: [
- 2,
- {
- indentInsideParens: 'once-at-root-twice-in-block',
- },
- ],
- 'string-quotes': 'single',
- // Mimic 1tbs `} else {` brace style, like our JS
- 'block-opening-brace-space-before': 'always',
- 'block-closing-brace-newline-before': 'always-multi-line',
- 'scss/at-if-closing-brace-space-after': 'always-intermediate',
+ // Non-Prettier newline rules
// Put a line-break between sections of CSS, but allow quick one-liners for legibility
'rule-empty-line-before': [
'always-multi-line',
{
- except: ['first-nested'],
- ignore: ['after-comment'],
+ ignore: ['first-nested', 'after-comment'],
},
],
- // Ensure multiple selectors on one line each
- 'selector-list-comma-newline-before': 'never-multi-line',
- 'selector-list-comma-newline-after': 'always',
- // Trim unnecessary newlines/whitespace
- 'block-closing-brace-empty-line-before': 'never',
+ 'comment-empty-line-before': null,
'declaration-empty-line-before': null,
- 'max-empty-lines': 1,
- 'no-eol-whitespace': true,
- // Enforce spacing around various syntax symbols (colons, operators, etc.)
- 'declaration-colon-space-after': 'always-single-line',
- 'declaration-colon-space-before': 'never',
- 'function-calc-no-unspaced-operator': true,
- 'scss/operator-no-unspaced': true,
- 'selector-combinator-space-before': 'always',
- 'selector-combinator-space-after': 'always',
- // Ensure trailing semicolons are always present on non-oneliners
- 'declaration-block-semicolon-newline-after': 'always-multi-line',
// Value preferences
'number-max-precision': null,
- 'color-hex-case': 'upper',
// Attempt to catch/flag non-variable color values
'color-named': 'never',
'color-no-hex': true,
@@ -103,17 +64,96 @@ module.exports = {
'no-descending-specificity': null,
'keyframe-selector-notation': null,
'declaration-block-no-redundant-longhand-properties': null,
- 'scss/no-global-function-names': null,
- 'scss/dollar-variable-empty-line-before': null,
- 'scss/at-rule-conditional-no-parentheses': null,
- 'scss/double-slash-comment-empty-line-before': null,
- 'scss/at-if-no-null': null,
- 'selector-not-notation': null,
},
- ignoreFiles: [
- 'generator-eui/**/*.scss',
- 'src/global_styling/react_date_picker/**/*.scss',
- 'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss',
- 'src/components/date_picker/react-datepicker/**/*.scss',
+ overrides: [
+ {
+ // TODO: Remove Sass-specific config & rules once we're completely off Sass
+ files: ['**/*.scss'],
+ ignoreFiles: [
+ 'generator-eui/**/*.scss',
+ 'src/global_styling/react_date_picker/**/*.scss',
+ 'src/themes/amsterdam/global_styling/react_date_picker/**/*.scss',
+ 'src/components/date_picker/react-datepicker/**/*.scss',
+ ],
+ extends: [
+ 'stylelint-config-standard-scss',
+ 'stylelint-config-prettier-scss',
+ ],
+ // @see https://github.com/stylelint-scss/stylelint-scss#list-of-rules
+ rules: {
+ // Casing
+ 'scss/dollar-variable-pattern': camelCaseRegex,
+ 'scss/at-mixin-pattern': camelCaseRegex,
+ 'scss/at-function-pattern': camelCaseRegex,
+ 'function-name-case': [
+ 'lower',
+ {
+ ignoreFunctions: [`/${camelCaseRegex}/`, 'MIN'],
+ },
+ ],
+
+ // Whitespace/newlines
+ 'scss/at-if-closing-brace-space-after': 'always-intermediate',
+ 'scss/operator-no-unspaced': true,
+
+ // Formatting rules deprecated as of v15 - keep them in Sass styles just in case until end of migration
+ // @see https://github.com/stylelint/stylelint/blob/main/docs/user-guide/rules.md#deprecated
+ 'color-hex-case': 'upper',
+ 'string-quotes': 'single',
+ // 2 spaces for indentation
+ indentation: [2, { indentInsideParens: 'once-at-root-twice-in-block' }],
+ // Mimic 1tbs `} else {` brace style, like our JS
+ 'block-opening-brace-space-before': 'always',
+ 'block-closing-brace-newline-before': 'always-multi-line',
+ // Ensure multiple selectors on one line each
+ 'selector-list-comma-newline-before': 'never-multi-line',
+ 'selector-list-comma-newline-after': 'always',
+ // Trim unnecessary newlines/whitespace
+ 'block-closing-brace-empty-line-before': 'never',
+ 'max-empty-lines': 1,
+ 'no-eol-whitespace': true,
+ // Enforce spacing around various syntax symbols (colons, operators, etc.)
+ 'declaration-colon-space-after': 'always-single-line',
+ 'declaration-colon-space-before': 'never',
+ 'function-calc-no-unspaced-operator': true,
+ 'selector-combinator-space-before': 'always',
+ 'selector-combinator-space-after': 'always',
+ // Ensure trailing semicolons are always present on non-oneliners
+ 'declaration-block-semicolon-newline-after': 'always-multi-line',
+
+ // Disable various opinionated extended stylelint rules that EUI has not previously enforced
+ 'scss/no-global-function-names': null,
+ 'scss/dollar-variable-empty-line-before': null,
+ 'scss/at-rule-conditional-no-parentheses': null,
+ 'scss/double-slash-comment-empty-line-before': null,
+ 'scss/at-if-no-null': null,
+ 'selector-not-notation': null, // Enforce comma notation for CSS-in-JS moving forward
+ },
+ },
+ {
+ files: ['**/*.styles.ts', '**/*.ts', '**/*.tsx'],
+ extends: ['stylelint-config-standard'],
+ customSyntax: 'postcss-styled-syntax',
+ rules: {
+ // Unfortunately, double slash comments must be replaced with standard CSS /* */ comments
+ // Otherwise we get a parsing error - see https://github.com/hudochenkov/postcss-styled-syntax#known-issues
+ 'no-invalid-double-slash-comments': true,
+ // Empty style keys should be allowed, as Emotion still uses them for generating classNames
+ 'no-empty-source': null,
+ // Don't lint casing on interpolated JS vars
+ 'function-name-case': ['lower', { ignoreFunctions: [cssInJsVarRegex] }],
+ 'function-no-unknown': [true, { ignoreFunctions: [cssInJsVarRegex] }],
+ 'value-keyword-case': [
+ 'lower',
+ {
+ ignoreProperties: ['font-family'],
+ ignoreKeywords: [camelCaseValueRegex],
+ },
+ ],
+ // This is set to deprecate after stylelint v16, but in the meanwhile, is helpful
+ // for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS())
+ 'no-extra-semicolons': true,
+ },
+ },
],
};
diff --git a/package.json b/package.json
index 078e2ef4e76..c019aec4a3c 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,11 @@
"compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
"compile-scss": "node ./scripts/compile-scss.js",
"extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
- "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass",
- "lint-fix": "yarn lint-es-fix",
+ "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-css-in-js && yarn lint-sass",
+ "lint-fix": "yarn lint-es --fix && yarn lint-css-in-js --fix",
"lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0",
- "lint-es-fix": "yarn lint-es --fix",
- "lint-sass": "yarn stylelint \"**/*.scss\"",
- "lint-sass-fix": "yarn stylelint \"**/*.scss\" --fix",
+ "lint-css-in-js": "yarn stylelint \"**/*.styles.ts\" \"./src/themes/**/*.ts\" \"./src/global_styling/**/*.ts\" --quiet-deprecation-warnings",
+ "lint-sass": "yarn stylelint \"**/*.scss\" --quiet-deprecation-warnings",
"test": "yarn lint && yarn test-unit",
"test-ci": "yarn test && yarn test-cypress",
"test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
@@ -217,6 +216,7 @@
"postcss-cli": "^7.1.2",
"postcss-inline-svg": "^4.1.0",
"postcss-loader": "^7.0.1",
+ "postcss-styled-syntax": "^0.4.0",
"pre-commit": "^1.2.2",
"prettier": "^2.8.8",
"process": "^0.11.10",
@@ -243,9 +243,10 @@
"start-server-and-test": "^1.11.3",
"storybook": "^7.0.17",
"style-loader": "^3.3.1",
- "stylelint": "^14.15.0",
- "stylelint-config-prettier-scss": "^0.0.1",
- "stylelint-config-standard-scss": "^6.1.0",
+ "stylelint": "^15.7.0",
+ "stylelint-config-prettier-scss": "^1.0.0",
+ "stylelint-config-standard": "^33.0.0",
+ "stylelint-config-standard-scss": "^9.0.0",
"terser-webpack-plugin": "^5.3.5",
"typescript": "4.5.3",
"uglifyjs-webpack-plugin": "^2.2.0",
diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
index 3599923538a..5099dea3540 100644
--- a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
+++ b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
@@ -14,20 +14,20 @@ import { logicalCSS, logicalSizeCSS } from '../../../global_styling';
* See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
*/
export const euiScreenReaderOnly = () => `
- // Take the element out of the layout
+ /* Take the element out of the layout */
position: absolute;
- // Keep it vertically inline
+ /* Keep it vertically inline */
${logicalCSS('top', 'auto')}
- // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text
+ /* Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text */
${logicalCSS('left', '-10000px')}
- // The element must have a size (for some screen readers)
+ /* The element must have a size (for some screen readers) */
${logicalSizeCSS('1px', '1px')}
- // But reduce the visible size to nothing
+ /* But reduce the visible size to nothing */
clip: rect(0 0 0 0);
clip-path: inset(50%);
- // And ensure no overflows occur
+ /* And ensure no overflows occur */
overflow: hidden;
- // Chrome requires the negative margin to not cause overflows of parent containers
+ /* Chrome requires the negative margin to not cause overflows of parent containers */
margin: -1px;
`;
@@ -37,8 +37,8 @@ export const euiScreenReaderOnly = () => `
export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => ({
euiScreenReaderOnly: showOnFocus
? css`
- // The :active selector is necessary for Safari which removes :focus when a button is pressed
- &:not(:focus):not(:active):not(:focus-within) {
+ /* The :active selector is necessary for Safari which removes :focus when a button is pressed */
+ &:not(:focus, :active, :focus-within) {
${euiScreenReaderOnly()}
}
`
diff --git a/src/components/accessibility/skip_link/skip_link.styles.ts b/src/components/accessibility/skip_link/skip_link.styles.ts
index cddee59a86d..322d930b30e 100644
--- a/src/components/accessibility/skip_link/skip_link.styles.ts
+++ b/src/components/accessibility/skip_link/skip_link.styles.ts
@@ -12,6 +12,7 @@ import { UseEuiTheme } from '../../../services';
export const euiSkipLinkStyles = ({ euiTheme }: UseEuiTheme) => {
return {
euiSkipLink: css`
+ /* stylelint-disable declaration-no-important */
transition: none !important;
&:focus {
@@ -27,7 +28,7 @@ export const euiSkipLinkStyles = ({ euiTheme }: UseEuiTheme) => {
}
`,
fixed: css`
- position: fixed !important; // Needs to override euiScreenReaderOnly - prevents scroll jumping in Firefox
+ position: fixed !important; /* Needs to override euiScreenReaderOnly - prevents scroll jumping in Firefox */
&:focus {
inset-block-start: ${euiTheme.size.xs};
diff --git a/src/components/accordion/accordion.styles.ts b/src/components/accordion/accordion.styles.ts
index 68326ba6b77..120376be425 100644
--- a/src/components/accordion/accordion.styles.ts
+++ b/src/components/accordion/accordion.styles.ts
@@ -19,7 +19,7 @@ export const euiAccordionButtonStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
return {
euiAccordion__button: css`
- ${euiFontSize(euiThemeContext, 's')};
+ ${euiFontSize(euiThemeContext, 's')}
align-items: center;
display: flex;
flex-grow: 1;
@@ -81,7 +81,7 @@ export const euiAccordionChildWrapperStyles = ({ euiTheme }: UseEuiTheme) => ({
visibility: hidden;
&:focus {
- outline: none; // Hide focus ring because of tabindex=-1 on Safari
+ outline: none; /* Hide focus ring because of tabindex=-1 on Safari */
}
`,
isOpen: css`
@@ -95,10 +95,14 @@ export const euiAccordionIconButtonStyles = ({ euiTheme }: UseEuiTheme) => ({
euiAccordion__iconButton: css`
flex-shrink: 0;
${logicalCSS('margin-right', euiTheme.size.xs)}
- transform: rotate(0deg) !important;
+ transform: rotate(
+ 0deg
+ ) !important; /* stylelint-disable-line declaration-no-important */
`,
isOpen: css`
- transform: rotate(90deg) !important;
+ transform: rotate(
+ 90deg
+ ) !important; /* stylelint-disable-line declaration-no-important */
`,
arrowRight: css`
${logicalCSS('margin-left', euiTheme.size.xs)}
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index 75fe1f6404d..ef10b294e9f 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -28,16 +28,16 @@ const _avatarSize = ({
export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
// Base
euiAvatar: css`
- // Ensures it never scales down below its intended size
+ /* Ensures it never scales down below its intended size */
flex-shrink: 0;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
background-size: cover;
- ${logicalTextAlignCSS('center')};
+ ${logicalTextAlignCSS('center')}
${logicalCSS('overflow-x', 'hidden')}
- // Explicitly state weight so it doesn't get overridden by inheritance
+ /* Explicitly state weight so it doesn't get overridden by inheritance */
font-weight: ${euiTheme.font.weight.medium};
`,
// Variants
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
index 4b194e8088a..def70a6a6bc 100644
--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -29,7 +29,11 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
${logicalShorthandCSS('padding', `0 ${euiTheme.size.s}`)}
${logicalCSS('max-width', '100%')}
font-size: ${euiFontSize(euiThemeContext, 'xs').fontSize};
- line-height: ${euiTheme.base + 2}px; // Accounts for the border
+ line-height: ${mathWithUnits(
+ // Account for the border
+ [euiTheme.size.base, euiTheme.border.width.thin],
+ (x, y) => x + y * 2
+ )};
font-weight: ${euiTheme.font.weight.medium};
white-space: nowrap;
text-decoration: none;
@@ -40,8 +44,8 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
euiTheme.border.radius.medium,
(x) => x / 2
)};
- // The badge will only ever be as wide as its content
- // So, make the text left aligned to ensure all badges line up the same
+ /* The badge will only ever be as wide as its content
+ So, make the text left aligned to ensure all badges line up the same */
${logicalTextAlignCSS('left')}
&:focus-within {
@@ -69,10 +73,14 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
}
`,
disabled: css`
- // Using !important to override inline styles
+ /* stylelint-disable declaration-no-important */
+
+ /* Using !important to override inline styles */
color: ${euiButtonColor(euiThemeContext, 'disabled').color} !important;
background-color: ${euiButtonColor(euiThemeContext, 'disabled')
.backgroundColor} !important;
+
+ /* stylelint-enable declaration-no-important */
`,
// Hollow has a border and is mostly used for autocompleters.
hollow: css`
@@ -127,7 +135,7 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
// Clickable icons (iconOnClick)
iconButton: {
euiBadge__iconButton: css`
- font-size: 0; // Makes the button only as large as the icon so it aligns vertically better
+ font-size: 0; /* Makes the button only as large as the icon so it aligns vertically better */
&:focus {
background-color: ${transparentize(euiTheme.colors.ghost, 0.8)};
@@ -143,10 +151,10 @@ export const euiBadgeStyles = (euiThemeContext: UseEuiTheme) => {
}
.euiBadge__icon {
- // Remove margins from icon itself so that focus state doesn't include that space
- margin: 0 !important;
+ /* Remove margins from icon itself so that focus state doesn't include that space */
+ margin: 0 !important; /* stylelint-disable-line declaration-no-important */
}
- }`,
+ `,
right: css`
${logicalCSS('margin-left', euiTheme.size.xs)}
`,
diff --git a/src/components/badge/badge_group/badge_group.styles.ts b/src/components/badge/badge_group/badge_group.styles.ts
index f985a4198b3..b66a0d76de0 100644
--- a/src/components/badge/badge_group/badge_group.styles.ts
+++ b/src/components/badge/badge_group/badge_group.styles.ts
@@ -17,7 +17,7 @@ export const euiBadgeGroupStyles = ({ euiTheme }: UseEuiTheme) => {
flex-wrap: wrap;
${logicalCSS('max-width', '100%')}
- // Override the .euiBadge + .euiBadge CSS in badge.styles.ts
+ /* Override the .euiBadge + .euiBadge CSS in badge.styles.ts */
.euiBadge + .euiBadge {
${logicalCSS('margin-left', 0)}
}
diff --git a/src/components/badge/notification_badge/badge_notification.styles.ts b/src/components/badge/notification_badge/badge_notification.styles.ts
index 0e38ca99c46..9f887f51ddd 100644
--- a/src/components/badge/notification_badge/badge_notification.styles.ts
+++ b/src/components/badge/notification_badge/badge_notification.styles.ts
@@ -23,7 +23,7 @@ export const euiNotificationBadgeStyles = (euiThemeContext: UseEuiTheme) => {
return {
euiNotificationBadge: css`
- flex-shrink: 0; // Ensures it never scales down below its intended size
+ flex-shrink: 0; /* Ensures it never scales down below its intended size */
display: inline-block;
vertical-align: middle;
${logicalCSS('padding-horizontal', euiTheme.size.xs)}
diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
index 176625e1870..b678c9f763f 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap
@@ -844,7 +844,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
aria-controls="__table_generated-id"
aria-current="true"
aria-label="Page 1 of 2"
- class="euiButtonEmpty euiButtonEmpty--small euiPaginationButton css-7ubx5w-empty-disabled-euiPaginationButton-isActive"
+ class="euiButtonEmpty euiButtonEmpty--small euiPaginationButton css-57pcyl-empty-disabled-euiPaginationButton-isActive"
data-test-subj="pagination-button-0"
disabled=""
type="button"
@@ -866,7 +866,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin