Skip to content
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.

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

Move nested declarations above rule #193931

Merged

Conversation

kc13greiner
Copy link
Contributor

@kc13greiner kc13greiner commented Sep 25, 2024

Summary

Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in & {}.

I have moved the declarations above the nested rules.

I had attempted to opt in to the new behavior, but the resulting CSS has duplicate selectors, which CI does not allow

For more information about the new behavior, see here

Closes #190898 screenshots
Closes #190899 screenshots
Closes #190900 Access Page uses authentication_state_page, but I was unable to find 'overwrite_sessionandlogged_out` pages
Closes #190901 screenshots
Closes #190902 ^used on same UI
Closes #190903 screenshots
Closes #190904 screenshots

@kc13greiner kc13greiner self-assigned this Sep 25, 2024
@kc13greiner kc13greiner added Team:Security Team focused on: Auth, Users, Roles, Spaces, Audit Logging, and more! v8.16.0 release_note:skip Skip the PR/issue when compiling release notes backport:version Backport to applied version labels labels Sep 25, 2024
@kc13greiner kc13greiner changed the title Opt in to the new method for spaces menu Opt in to the new Sass method for nested declarations Sep 25, 2024
@kc13greiner
Copy link
Contributor Author

kc13greiner commented Sep 25, 2024

Login

Before:
Screenshot 2024-09-25 at 3 49 32 PM

After:
Screenshot 2024-09-25 at 9 45 04 PM

@kc13greiner
Copy link
Contributor Author

kc13greiner commented Sep 25, 2024

Access Agreement

Before:
Screenshot 2024-09-25 at 3 49 44 PM

After:
Screenshot 2024-09-25 at 9 45 19 PM

@kc13greiner
Copy link
Contributor Author

kc13greiner commented Sep 25, 2024

Space Selector

Before:
Screenshot 2024-09-25 at 3 49 50 PM

After:
Screenshot 2024-09-25 at 9 45 55 PM

@kc13greiner
Copy link
Contributor Author

kc13greiner commented Sep 25, 2024

Space Nav menu

Before:
Screenshot 2024-09-25 at 3 49 10 PM

After:
Screenshot 2024-09-25 at 9 45 38 PM

@kc13greiner
Copy link
Contributor Author

kc13greiner commented Sep 25, 2024

Interactive Setup

Before:
Screenshot 2024-09-25 at 3 53 02 PM

After:
Screenshot 2024-09-25 at 9 46 59 PM

@kc13greiner kc13greiner changed the title Opt in to the new Sass method for nested declarations Move nested declarations above rule Sep 26, 2024
@@ -4,6 +4,9 @@

.spcSelectorBackground {
@include kibanaFullScreenGraphics;
}

.spcSelectorBackground__nonMixinAttributes {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Self Review: The mixin was overwriting the z index which caused only the background graphic to show up.

I should also not that the background graphic does not show up on this branch or main, so maybe we could have some design/UX help here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@kc13greiner kc13greiner marked this pull request as ready for review September 27, 2024 12:01
@kc13greiner kc13greiner requested review from a team as code owners September 27, 2024 12:01
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-security (Team:Security)

@kibana-ci
Copy link
Collaborator

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #9 / Create does not render default value when setDefaultValue is false

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
spaces 256.9KB 257.0KB +128.0B

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @kc13greiner

@kc13greiner kc13greiner merged commit c8c7439 into elastic:main Oct 1, 2024
22 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11127762513

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 1, 2024
## Summary

> Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an
upcoming
version. To keep the existing behavior, move the declaration above the
nested
rule. To opt into the new behavior, wrap the declaration in & {}.

I have moved the declarations above the nested rules.

I had attempted to opt in to the new behavior, but the resulting CSS has
duplicate selectors, which CI does not allow

For more information about the new behavior, see
[here](https://sass-lang.com/documentation/breaking-changes/mixed-decls/)

Closes elastic#190898
[screenshots](elastic#193931 (comment))
Closes elastic#190899
[screenshots](elastic#193931 (comment))
Closes elastic#190900 Access Page uses
`authentication_state_page`, but I was unable to find
'overwrite_session` and `logged_out` pages
Closes elastic#190901
[screenshots](elastic#193931 (comment))
Closes elastic#190902 ^used on same UI
Closes elastic#190903
[screenshots](elastic#193931 (comment))
Closes elastic#190904
[screenshots](elastic#193931 (comment))

(cherry picked from commit c8c7439)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Oct 1, 2024
# Backport

This will backport the following commits from `main` to `8.x`:
- [Move nested declarations above rule
(#193931)](#193931)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Kurt","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-01T14:43:52Z","message":"Move
nested declarations above rule (#193931)\n\n## Summary\r\n\r\n> Sass's
behavior for declarations that appear after nested\r\nrules will be
changing to match the behavior specified by CSS in
an\r\nupcoming\r\nversion. To keep the existing behavior, move the
declaration above the\r\nnested\r\nrule. To opt into the new behavior,
wrap the declaration in & {}.\r\n\r\nI have moved the declarations above
the nested rules.\r\n\r\nI had attempted to opt in to the new behavior,
but the resulting CSS has\r\nduplicate selectors, which CI does not
allow\r\n\r\nFor more information about the new behavior,
see\r\n[here](https://sass-lang.com/documentation/breaking-changes/mixed-decls/)\r\n\r\nCloses
https://github.com/elastic/kibana/issues/190898\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127180)\r\nCloses
https://github.com/elastic/kibana/issues/190899\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375128228)\r\nCloses
#190900 Access Page
uses\r\n`authentication_state_page`, but I was unable to
find\r\n'overwrite_session` and `logged_out` pages\r\nCloses
https://github.com/elastic/kibana/issues/190901\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375126897)\r\nCloses
#190902 ^used on same
UI\r\nCloses
https://github.com/elastic/kibana/issues/190903\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127629)\r\nCloses
https://github.com/elastic/kibana/issues/190904\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127865)","sha":"c8c74399a0b282b9b687379bd324db24fea59c44","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Security","release_note:skip","v9.0.0","v8.16.0","backport:version"],"title":"Move
nested declarations above
rule","number":193931,"url":"https://github.com/elastic/kibana/pull/193931","mergeCommit":{"message":"Move
nested declarations above rule (#193931)\n\n## Summary\r\n\r\n> Sass's
behavior for declarations that appear after nested\r\nrules will be
changing to match the behavior specified by CSS in
an\r\nupcoming\r\nversion. To keep the existing behavior, move the
declaration above the\r\nnested\r\nrule. To opt into the new behavior,
wrap the declaration in & {}.\r\n\r\nI have moved the declarations above
the nested rules.\r\n\r\nI had attempted to opt in to the new behavior,
but the resulting CSS has\r\nduplicate selectors, which CI does not
allow\r\n\r\nFor more information about the new behavior,
see\r\n[here](https://sass-lang.com/documentation/breaking-changes/mixed-decls/)\r\n\r\nCloses
https://github.com/elastic/kibana/issues/190898\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127180)\r\nCloses
https://github.com/elastic/kibana/issues/190899\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375128228)\r\nCloses
#190900 Access Page
uses\r\n`authentication_state_page`, but I was unable to
find\r\n'overwrite_session` and `logged_out` pages\r\nCloses
https://github.com/elastic/kibana/issues/190901\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375126897)\r\nCloses
#190902 ^used on same
UI\r\nCloses
https://github.com/elastic/kibana/issues/190903\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127629)\r\nCloses
https://github.com/elastic/kibana/issues/190904\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127865)","sha":"c8c74399a0b282b9b687379bd324db24fea59c44"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193931","number":193931,"mergeCommit":{"message":"Move
nested declarations above rule (#193931)\n\n## Summary\r\n\r\n> Sass's
behavior for declarations that appear after nested\r\nrules will be
changing to match the behavior specified by CSS in
an\r\nupcoming\r\nversion. To keep the existing behavior, move the
declaration above the\r\nnested\r\nrule. To opt into the new behavior,
wrap the declaration in & {}.\r\n\r\nI have moved the declarations above
the nested rules.\r\n\r\nI had attempted to opt in to the new behavior,
but the resulting CSS has\r\nduplicate selectors, which CI does not
allow\r\n\r\nFor more information about the new behavior,
see\r\n[here](https://sass-lang.com/documentation/breaking-changes/mixed-decls/)\r\n\r\nCloses
https://github.com/elastic/kibana/issues/190898\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127180)\r\nCloses
https://github.com/elastic/kibana/issues/190899\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375128228)\r\nCloses
#190900 Access Page
uses\r\n`authentication_state_page`, but I was unable to
find\r\n'overwrite_session` and `logged_out` pages\r\nCloses
https://github.com/elastic/kibana/issues/190901\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375126897)\r\nCloses
#190902 ^used on same
UI\r\nCloses
https://github.com/elastic/kibana/issues/190903\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127629)\r\nCloses
https://github.com/elastic/kibana/issues/190904\r\n[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127865)","sha":"c8c74399a0b282b9b687379bd324db24fea59c44"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Kurt <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment