Skip to content

Delete more unused Sass variables/mixins #8169

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 6 commits into from
Nov 20, 2024
Merged

Delete more unused Sass variables/mixins #8169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ccd74f2
Delete lingering/unused react datepicker Sass
cee-chen Nov 19, 2024
e7537c5
Delete lingering utility Sass / unused animations
cee-chen Nov 19, 2024
36b1077
Remove unused `euiFullHeight` and `euiSlightShadowHover` Sass mixins
cee-chen Nov 19, 2024
53f2b5d
Remove `$euiButtonMinWidth` Sass var
cee-chen Nov 19, 2024
82960ba
changelog
cee-chen Nov 19, 2024
fc5baff
[extra] Remove `:has` media query util - all evergreen browsers now s…
cee-chen Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions packages/eui/changelogs/upcoming/8169.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
**CSS-in-JS conversions**

- Removed the following global Sass variables:
- `$euiButtonMinWidth`
- `$euiDatePickerCalendarWidth`
- Removed the following Sass animations:
- `euiAnimFadeIn`
- `euiGrow`
- `focusRingAnimate`
- `focusRingAnimateLarge`
- `euiButtonActive`
- Removed the following Sass mixins:
- `euiFullHeight`
- `euiSlightShadowHover`
- `datePickerArrow`
10 changes: 1 addition & 9 deletions packages/eui/src/components/card/card.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { css } from '@emotion/react';

import {
euiPaddingSize,
euiSupportsHas,
logicalCSS,
logicals,
logicalTextAlignCSS,
Expand Down Expand Up @@ -218,12 +217,6 @@ export const euiCardTextStyles = (euiThemeContext: UseEuiTheme) => {
&:focus {
text-decoration: underline;
}

/* Progressive enhancement where we remove focus from text as
it will be applied to the whole card instead */
${euiSupportsHas} {
outline: none !important; /* stylelint-disable-line declaration-no-important */
}
`,

aligned: {
Expand Down Expand Up @@ -269,9 +262,8 @@ export const euiCardBetaBadgeStyles = (
transform: translateX(-50%) translateY(-50%);
/* Get above absolutely positioned image */
z-index: 3;
/* TODO: $euiButtonMinWidth */
/* Extend beta badges to at least 30% of the container's width or 112px (whichever is smaller) */
${logicalCSS('min-width', 'min(30%, 112px)')}
${logicalCSS('min-width', `min(30%, ${euiTheme.base * 7}px)`)}
Copy link
Member

@tkajtoch tkajtoch Nov 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

${logicalCSS('max-width', `calc(100% - (${padding} * 2))`)}
`,

Expand Down
6 changes: 0 additions & 6 deletions packages/eui/src/global_styling/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,4 @@
// Mixins provide generic code expansion through helpers
@import 'mixins/index';

// Utility classes provide one-off selectors for common css problems
@import 'utility/index';

// The reset file has moved to global_styles.tsx

// Customization of the React Date Picker
@import 'react_date_picker/index';
9 changes: 0 additions & 9 deletions packages/eui/src/global_styling/mixins/_helpers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,15 +81,6 @@
@include euiOverflowShadow('x');
}

/**
* For quickly applying a full-height element whether using flex or not
*/
@mixin euiFullHeight {
height: 100%;
flex: 1 1 auto;
overflow: hidden;
}

// Hiding elements offscreen to only be read by screen reader
// See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
@mixin euiScreenReaderOnly {
Expand Down
6 changes: 0 additions & 6 deletions packages/eui/src/global_styling/mixins/_helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,9 +226,3 @@ export const euiFullHeight = () => `
flex: 1 1 auto;
overflow: hidden;
`;

/**
* A constant storing the support for the `:has()` selector through a
* media query that will only apply the content it is supported.
*/
export const euiSupportsHas = '@supports(selector(:has(p)))';
8 changes: 0 additions & 8 deletions packages/eui/src/global_styling/mixins/_shadow.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,6 @@
}
}

@mixin euiSlightShadowHover($color: $euiShadowColor) {
box-shadow:
0 1px 5px rgba($color, shadowOpacity(.1)),
0 3.6px 13px rgba($color, shadowOpacity(.07)),
0 8.4px 23px rgba($color, shadowOpacity(.06)),
0 23px 35px rgba($color, shadowOpacity(.05));
}

// stylelint-disable color-named
@mixin euiOverflowShadow($direction: 'y', $side: 'both') {
$hideHeight: $euiScrollBarCornerThin * 1.25;
Expand Down
Loading