[TSVB/SCSS] Migrate all remaining .scss styles to Emotion CSS-in-JS#221484
Merged
mariairiartef merged 16 commits intoelastic:mainfrom May 30, 2025
Merged
[TSVB/SCSS] Migrate all remaining .scss styles to Emotion CSS-in-JS#221484mariairiartef merged 16 commits intoelastic:mainfrom
.scss styles to Emotion CSS-in-JS#221484mariairiartef merged 16 commits intoelastic:mainfrom
Conversation
mariairiartef
added
Feature:TSVB
16 tasks
Contributor
|
Pinging @elastic/kibana-visualizations (Team:Visualizations) |
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Module Count
Async chunks
|
ryankeairns
approved these changes
May 27, 2025
nickofthyme
approved these changes
May 27, 2025
Comment on lines
+121
to
+123
| white-space: nowrap; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; |
Contributor
There was a problem hiding this comment.
Are you doing this instead of euiTextTruncate() because of the createReversedStyles thing?
Contributor
Author
There was a problem hiding this comment.
Not really. You can either add eui-textTruncate class or import { euiTextTruncate } from '@elastic/eui'; and use it as css={euiTextTruncate()}. However, in this case I directly copied the styles.
mariairiartef
changed the title
.scss styles to Emotion CSS-in-JS
Contributor
|
Starting backport for target branches: 8.19 https://github.com/elastic/kibana/actions/runs/15350774956 |
Contributor
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
mariairiartef
added a commit
to mariairiartef/kibana
that referenced
this pull request
Jun 3, 2025
…elastic#221484) ## Summary Part of elastic#220095 Migrates the following files to Emotion CSS-in-JS: - `_gauge.scss` - `_metric.scss` - `_top_n.scss` - `_variables.scss` - `_error.scss` - `_vis_editor_visualization.scss` - `_panel_config.scss` ### Considerations For details on considerations, read [this](elastic#220095 (comment)). ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) (cherry picked from commit 9872638) # Conflicts: # src/platform/plugins/private/vis_types/timeseries/public/application/components/_error.scss # src/platform/plugins/private/vis_types/timeseries/public/application/components/_vis_editor_visualization.scss # src/platform/plugins/private/vis_types/timeseries/public/application/components/panel_config/_panel_config.scss # src/platform/plugins/private/vis_types/timeseries/public/application/components/panel_config/_panel_config.ts # src/platform/plugins/private/vis_types/timeseries/public/application/visualizations/views/_gauge.scss # src/platform/plugins/private/vis_types/timeseries/public/application/visualizations/views/_metric.scss # src/platform/plugins/private/vis_types/timeseries/public/application/visualizations/views/_top_n.scss # src/platform/plugins/private/vis_types/timeseries/public/application/visualizations/views/_variables.scss # src/platform/plugins/private/vis_types/timeseries/public/application/visualizations/views/_variables.ts
Contributor
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
mariairiartef
added a commit
that referenced
this pull request
Jun 3, 2025
…S-in-JS (#221484) (#222362) # Backport This will backport the following commits from `main` to `8.19`: - [[TSVB/SCSS] Migrate all remaining `.scss` styles to Emotion CSS-in-JS (#221484)](#221484) <!--- Backport version: 10.0.0 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Maria Iriarte","email":"106958839+mariairiartef@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-05-30T16:02:03Z","message":"[TSVB/SCSS] Migrate all remaining `.scss` styles to Emotion CSS-in-JS (#221484)\n\n## Summary\n\nPart of https://github.com/elastic/kibana/issues/220095\n\nMigrates the following files to Emotion CSS-in-JS:\n- `_gauge.scss`\n- `_metric.scss`\n- `_top_n.scss` \n- `_variables.scss`\n- `_error.scss`\n- `_vis_editor_visualization.scss`\n- `_panel_config.scss`\n\n### Considerations\n\nFor details on considerations, read\n[this](https://github.com/elastic/kibana/issues/220095#issuecomment-2911737679).\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"98726383a4b1359a85480846585ac24b0c60d995","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:TSVB","technical debt","Team:Visualizations","release_note:skip","backport:version","v9.1.0","v8.19.0","scss-removal"],"title":"[TSVB/SCSS] Migrate all remaining `.scss` styles to Emotion CSS-in-JS","number":221484,"url":"https://github.com/elastic/kibana/pull/221484","mergeCommit":{"message":"[TSVB/SCSS] Migrate all remaining `.scss` styles to Emotion CSS-in-JS (#221484)\n\n## Summary\n\nPart of https://github.com/elastic/kibana/issues/220095\n\nMigrates the following files to Emotion CSS-in-JS:\n- `_gauge.scss`\n- `_metric.scss`\n- `_top_n.scss` \n- `_variables.scss`\n- `_error.scss`\n- `_vis_editor_visualization.scss`\n- `_panel_config.scss`\n\n### Considerations\n\nFor details on considerations, read\n[this](https://github.com/elastic/kibana/issues/220095#issuecomment-2911737679).\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"98726383a4b1359a85480846585ac24b0c60d995"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/221484","number":221484,"mergeCommit":{"message":"[TSVB/SCSS] Migrate all remaining `.scss` styles to Emotion CSS-in-JS (#221484)\n\n## Summary\n\nPart of https://github.com/elastic/kibana/issues/220095\n\nMigrates the following files to Emotion CSS-in-JS:\n- `_gauge.scss`\n- `_metric.scss`\n- `_top_n.scss` \n- `_variables.scss`\n- `_error.scss`\n- `_vis_editor_visualization.scss`\n- `_panel_config.scss`\n\n### Considerations\n\nFor details on considerations, read\n[this](https://github.com/elastic/kibana/issues/220095#issuecomment-2911737679).\n\n### Checklist\n\n- [x] The PR description includes the appropriate Release Notes section,\nand the correct `release_note:*` label is applied per the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"98726383a4b1359a85480846585ac24b0c60d995"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT-->
zacharyparikh
pushed a commit
to zacharyparikh/kibana
that referenced
this pull request
Jun 4, 2025
…elastic#221484) ## Summary Part of elastic#220095 Migrates the following files to Emotion CSS-in-JS: - `_gauge.scss` - `_metric.scss` - `_top_n.scss` - `_variables.scss` - `_error.scss` - `_vis_editor_visualization.scss` - `_panel_config.scss` ### Considerations For details on considerations, read [this](elastic#220095 (comment)). ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
nickpeihl
pushed a commit
to nickpeihl/kibana
that referenced
this pull request
Jun 12, 2025
…elastic#221484) ## Summary Part of elastic#220095 Migrates the following files to Emotion CSS-in-JS: - `_gauge.scss` - `_metric.scss` - `_top_n.scss` - `_variables.scss` - `_error.scss` - `_vis_editor_visualization.scss` - `_panel_config.scss` ### Considerations For details on considerations, read [this](elastic#220095 (comment)). ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Part of #220095
Migrates the following files to Emotion CSS-in-JS:
_gauge.scss_metric.scss_top_n.scss_variables.scss_error.scss_vis_editor_visualization.scss_panel_config.scssConsiderations
For details on considerations, read this.
Checklist
release_note:*label is applied per the guidelines