diff --git a/x-pack/platform/plugins/private/graph/public/components/_index.scss b/x-pack/platform/plugins/private/graph/public/components/_index.scss index 58acc8d52f301..3f93e91722d66 100644 --- a/x-pack/platform/plugins/private/graph/public/components/_index.scss +++ b/x-pack/platform/plugins/private/graph/public/components/_index.scss @@ -1,2 +1 @@ @import './source_modal'; -@import './settings/index'; diff --git a/x-pack/platform/plugins/private/graph/public/components/settings/_index.scss b/x-pack/platform/plugins/private/graph/public/components/settings/_index.scss deleted file mode 100644 index 7aeba8fcb9f5d..0000000000000 --- a/x-pack/platform/plugins/private/graph/public/components/settings/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import './url_template_list'; -@import './_legacy_icon'; diff --git a/x-pack/platform/plugins/private/graph/public/components/settings/_legacy_icon.scss b/x-pack/platform/plugins/private/graph/public/components/settings/_legacy_icon.scss deleted file mode 100644 index 6e443d7105c53..0000000000000 --- a/x-pack/platform/plugins/private/graph/public/components/settings/_legacy_icon.scss +++ /dev/null @@ -1,20 +0,0 @@ -.gphLegacyIcon { - width: $euiSizeS * 2; - - &--list { - margin-right: $euiSizeM; - } - - &--pickable { - margin: $euiSizeXS; - cursor: pointer; - opacity: .7; - } - - &--pickable:hover, - &--pickable:focus, - &--selected { - transform: scale(1.4); - opacity: 1; - } -} diff --git a/x-pack/platform/plugins/private/graph/public/components/settings/_url_template_list.scss b/x-pack/platform/plugins/private/graph/public/components/settings/_url_template_list.scss deleted file mode 100644 index 4330b20606997..0000000000000 --- a/x-pack/platform/plugins/private/graph/public/components/settings/_url_template_list.scss +++ /dev/null @@ -1,17 +0,0 @@ -.gphUrlTemplateList__accordion { - border-top: $euiBorderThin; - border-bottom: $euiBorderThin; - - & + & { - // If there is another after it, shift up 1px to overlap borders - margin-top: -1px; - } - - &--isOpen { - background-color: $euiPageBackgroundColor; - } -} - -.gphUrlTemplateList__accordionbutton { - padding: $euiSizeM; -} diff --git a/x-pack/platform/plugins/private/graph/public/components/settings/blocklist_form.tsx b/x-pack/platform/plugins/private/graph/public/components/settings/blocklist_form.tsx index 949082f4c48fa..c43a2cd5e4422 100644 --- a/x-pack/platform/plugins/private/graph/public/components/settings/blocklist_form.tsx +++ b/x-pack/platform/plugins/private/graph/public/components/settings/blocklist_form.tsx @@ -16,11 +16,13 @@ import { EuiText, EuiCallOut, EuiIcon, + useEuiTheme, } from '@elastic/eui'; import { SettingsWorkspaceProps } from './settings'; import { useListKeys } from './use_list_keys'; import { IconRenderer } from '../icon_renderer'; +import { legacyIconStyles } from './legacy_icon.styles'; export function BlocklistForm({ blocklistedNodes, @@ -28,6 +30,7 @@ export function BlocklistForm({ unblockAll, }: Pick) { const getListKey = useListKeys(blocklistedNodes || []); + const euiThemeContext = useEuiTheme(); return ( <> {blocklistedNodes && blocklistedNodes.length > 0 ? ( @@ -56,7 +59,13 @@ export function BlocklistForm({ {blocklistedNodes.map((node) => ( + } key={getListKey(node)} label={node.label} diff --git a/x-pack/platform/plugins/private/graph/public/components/settings/legacy_icon.styles.ts b/x-pack/platform/plugins/private/graph/public/components/settings/legacy_icon.styles.ts new file mode 100644 index 0000000000000..06b822e44543d --- /dev/null +++ b/x-pack/platform/plugins/private/graph/public/components/settings/legacy_icon.styles.ts @@ -0,0 +1,36 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { type UseEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/react'; + +export const legacyIconStyles = { + base: ({ euiTheme }: UseEuiTheme) => css` + width: calc(${euiTheme.size.s} * 2); + `, + + list: ({ euiTheme }: UseEuiTheme) => css` + margin-right: ${euiTheme.size.m}; + `, + + pickable: ({ euiTheme }: UseEuiTheme) => css` + margin: ${euiTheme.size.xs}; + cursor: pointer; + opacity: 0.7; + + &:hover, + &:focus { + transform: scale(1.4); + opacity: 1; + } + `, + + selected: css` + transform: scale(1.4); + opacity: 1; + `, +}; diff --git a/x-pack/platform/plugins/private/graph/public/components/settings/url_template_form.tsx b/x-pack/platform/plugins/private/graph/public/components/settings/url_template_form.tsx index 4b97b35c3fe28..e5f549eb05837 100644 --- a/x-pack/platform/plugins/private/graph/public/components/settings/url_template_form.tsx +++ b/x-pack/platform/plugins/private/graph/public/components/settings/url_template_form.tsx @@ -16,15 +16,18 @@ import { EuiButtonEmpty, EuiLink, EuiAccordion, + UseEuiTheme, + useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import classNames from 'classnames'; +import { css } from '@emotion/react'; import { UrlTemplate } from '../../types'; import { outlinkEncoders } from '../../helpers/outlink_encoders'; import { urlTemplateIconChoices } from '../../helpers/style_choices'; import { isUrlTemplateValid, isKibanaUrl, replaceKibanaUrlParam } from '../../helpers/url_template'; import { isEqual } from '../helpers'; import { IconRenderer } from '../icon_renderer'; +import { legacyIconStyles } from './legacy_icon.styles'; export interface NewFormProps { onSubmit: (template: UrlTemplate) => void; @@ -59,6 +62,8 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) { const [currentTemplate, setCurrentTemplate] = useState(getInitialTemplate); + const euiThemeContext = useEuiTheme(); + const persistedTemplateState = isUpdateForm(props) && props.initialTemplate; // reset local form if template passed in from parent component changes @@ -129,14 +134,15 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) { props.initialTemplate.icon && ( ) } - className={classNames('gphUrlTemplateList__accordion', { - 'gphUrlTemplateList__accordion--isOpen': open, - })} - buttonClassName="gphUrlTemplateList__accordionbutton" + css={[ + styles.listAccordion(euiThemeContext), + open && styles.openListAccordion(euiThemeContext), + ]} + buttonProps={{ css: styles.button(euiThemeContext) }} onToggle={(isOpen) => { setOpen(isOpen); }} @@ -285,9 +291,11 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) { setValue('icon', icon); } }} - className={classNames('gphLegacyIcon gphLegacyIcon--pickable', { - 'gphLegacyIcon--selected': icon === currentTemplate.icon, - })} + css={[ + legacyIconStyles.base(euiThemeContext), + legacyIconStyles.pickable(euiThemeContext), + icon === currentTemplate.icon && legacyIconStyles.selected, + ]} /> ))} @@ -336,3 +344,26 @@ export function UrlTemplateForm(props: UrlTemplateFormProps) { ); } + +const styles = { + listAccordion: ({ euiTheme }: UseEuiTheme) => + css({ + borderTop: euiTheme.border.thin, + borderBottom: euiTheme.border.thin, + + '& + &': { + // If there is another after it, shift up 1px to overlap borders + marginTop: '-1px', + }, + }), + + openListAccordion: ({ euiTheme }: UseEuiTheme) => + css({ + backgroundColor: euiTheme.colors.body, + }), + + button: ({ euiTheme }: UseEuiTheme) => + css({ + padding: euiTheme.size.m, + }), +};