Skip to content

Commit

Permalink
[apm][uptime][monitoring] Remove color="ghost" buttons (#169312)
Browse files Browse the repository at this point in the history
## Summary

👋 Hey y'all - EUI will shortly be deprecating the `ghost` color in all
button components (see
https://eui.elastic.co/v89.0.0/#/navigation/button#ghost-vs-dark-mode).

In this PR, components using `color="ghost"` within an `EuiBottomBar`
already automatically inherit dark mode coloring and should be changed
to `color="text"` instead.

For the legacy uptime change that adds a theme wrapper, I'm unsure what
context it's being used in (does not appear to be a bottom bar) and
would appreciate help QAing it.

I'm opening this PR ahead of time for your team so you can test this
migration and ensure no UI regressions have occurred as a result.

### Checklist

- [ ] Tested in light and dark mode

---------

Co-authored-by: shahzad31 <shahzad31comp@gmail.com>
  • Loading branch information
cee-chen and shahzad31 authored Oct 27, 2023
1 parent 80d382a commit f235f22
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 51 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function BottomBarActions({
}}
>
<EuiHealth color="warning" />
<EuiText color="ghost">
<EuiText>
{i18n.translate('xpack.apm.bottomBarActions.unsavedChanges', {
defaultMessage:
'{unsavedChangesCount, plural, =0{0 unsaved changes} one {1 unsaved change} other {# unsaved changes}} ',
Expand All @@ -55,7 +55,7 @@ export function BottomBarActions({
<EuiFlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="apmBottomBarActionsDiscardChangesButton"
color="ghost"
color="text"
onClick={onDiscardChanges}
>
{i18n.translate(
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,7 @@
* 2.0.
*/

import {
EuiBottomBar,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiSpacer,
EuiTextColor,
} from '@elastic/eui';
import { EuiBottomBar, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import React, { Fragment } from 'react';
import { withKibana } from '@kbn/kibana-react-plugin/public';
Expand Down Expand Up @@ -144,15 +137,13 @@ export class WrappedSetupModeRenderer extends React.Component {
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={false}>
<EuiTextColor color="ghost">
<FormattedMessage
id="xpack.monitoring.setupMode.description"
defaultMessage="You are in setup mode. The ({flagIcon}) icon indicates configuration options."
values={{
flagIcon: <EuiIcon type="flag" />,
}}
/>
</EuiTextColor>
<FormattedMessage
id="xpack.monitoring.setupMode.description"
defaultMessage="You are in setup mode. The ({flagIcon}) icon indicates configuration options."
values={{
flagIcon: <EuiIcon type="flag" />,
}}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*/

import React from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiText } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { SettingsPageFieldErrors } from '../../pages/settings';
Expand Down Expand Up @@ -41,8 +41,8 @@ export const SettingsActions = ({
</WarningText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
color="ghost"
<EuiButton
color="text"
size="s"
iconType="cross"
data-test-subj="discardSettingsButton"
Expand All @@ -55,7 +55,7 @@ export const SettingsActions = ({
id="xpack.uptime.sourceConfiguration.discardSettingsButtonLabel"
defaultMessage="Cancel"
/>
</EuiButtonEmpty>
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
Expand Down

0 comments on commit f235f22

Please sign in to comment.