diff --git a/package.json b/package.json index 4fffa4304db86..5ae8763ffd181 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@babel/register": "7.4.4", "@elastic/charts": "^4.2.6", "@elastic/datemath": "5.0.2", - "@elastic/eui": "11.0.1", + "@elastic/eui": "11.3.2", "@elastic/filesaver": "1.1.2", "@elastic/good": "8.1.1-kibana2", "@elastic/numeral": "2.3.3", diff --git a/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap b/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap index daa74771d79b1..c75588f5369b5 100644 --- a/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap +++ b/src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap @@ -10,14 +10,17 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiBasicTable.selectThisRow": "Select this row", "euiBasicTable.tableDescription": [Function], "euiBottomBar.screenReaderAnnouncement": "There is a new menu opening with page level controls at the end of the document.", + "euiCardSelect.select": "Select", + "euiCardSelect.selected": "Unavailable", + "euiCardSelect.unavailable": "Selected", "euiCodeBlock.copyButton": "Copy", "euiCodeEditor.startEditing": "Press Enter to start editing.", "euiCodeEditor.startInteracting": "Press Enter to start interacting with the code.", "euiCodeEditor.stopEditing": "When you're done, press Escape to stop editing.", "euiCodeEditor.stopInteracting": "When you're done, press Escape to stop interacting with the code.", "euiCollapsedItemActions.allActions": "All actions", - "euiColorPicker.colorSelectionLabel": [Function], - "euiColorPicker.transparentColor": "transparent", + "euiColorPicker.screenReaderAnnouncement": "A popup with a range of selectable colors opened. Tab forward to cycle through colors choices or press escape to close this popup.", + "euiColorPicker.swatchAriaLabel": [Function], "euiComboBoxOptionsList.allOptionsSelected": "You've selected all available options", "euiComboBoxOptionsList.alreadyAdded": [Function], "euiComboBoxOptionsList.createCustomOption": [Function], @@ -25,20 +28,25 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiComboBoxOptionsList.noAvailableOptions": "There aren't any options available", "euiComboBoxOptionsList.noMatchingOptions": [Function], "euiComboBoxPill.removeSelection": [Function], + "euiFilterButton.filterBadge": [Function], "euiForm.addressFormErrors": "Please address the errors in your form.", "euiFormControlLayoutClearButton.label": "Clear input", "euiHeaderAlert.dismiss": "Dismiss", "euiHeaderLinks.appNavigation": "App navigation", "euiHeaderLinks.openNavigationMenu": "Open navigation menu", + "euiHue.label": "Select the HSV color mode \\"hue\\" value", "euiModal.closeModal": "Closes this modal window", "euiPagination.jumpToLastPage": [Function], "euiPagination.nextPage": "Next page", "euiPagination.pageOfTotal": [Function], "euiPagination.previousPage": "Previous page", "euiPopover.screenReaderAnnouncement": "You are in a popup. To exit this popup, hit Escape.", + "euiSaturation.roleDescription": "HSV color mode saturation and value selection", + "euiSaturation.screenReaderAnnouncement": "Use the arrow keys to navigate the square color gradient. The coordinates resulting from each key press will be used to calculate HSV color mode \\"saturation\\" and \\"value\\" numbers, in the range of 0 to 1. Left and right decrease and increase (respectively) the \\"saturation\\" value. Up and down decrease and increase (respectively) the \\"value\\" value.", "euiSelectable.loadingOptions": "Loading options", "euiSelectable.noAvailableOptions": "There aren't any options available", "euiSelectable.noMatchingOptions": [Function], + "euiStat.loadingText": [Function], "euiStep.completeStep": "Step", "euiStep.incompleteStep": "Incomplete Step", "euiStepHorizontal.buttonTitle": [Function], @@ -49,6 +57,7 @@ exports[`#start() returns \`Context\` component 1`] = ` "euiSuperSelect.screenReaderAnnouncement": [Function], "euiSuperSelectControl.selectAnOption": [Function], "euiTablePagination.rowsPerPage": "Rows per page", + "euiTablePagination.rowsPerPageOption": [Function], "euiTableSortMobile.sorting": "Sorting", "euiToast.dismissToast": "Dismiss toast", "euiToast.newNotification": "A new notification appears", diff --git a/src/core/public/i18n/i18n_service.tsx b/src/core/public/i18n/i18n_service.tsx index b1ef6e91abdce..79678aac17157 100644 --- a/src/core/public/i18n/i18n_service.tsx +++ b/src/core/public/i18n/i18n_service.tsx @@ -65,6 +65,18 @@ export class I18nService { 'Screen reader announcement that functionality is available in the page document', } ), + 'euiCardSelect.select': i18n.translate('core.euiCardSelect.select', { + defaultMessage: 'Select', + description: 'Displayed button text when a card option can be selected.', + }), + 'euiCardSelect.selected': i18n.translate('core.euiCardSelect.selected', { + defaultMessage: 'Unavailable', + description: 'Displayed button text when a card option is selected.', + }), + 'euiCardSelect.unavailable': i18n.translate('core.euiCardSelect.unavailable', { + defaultMessage: 'Selected', + description: 'Displayed button text when a card option is unavailable.', + }), 'euiCodeBlock.copyButton': i18n.translate('core.euiCodeBlock.copyButton', { defaultMessage: 'Copy', description: 'ARIA label for a button that copies source code text to the clipboard', @@ -89,15 +101,22 @@ export class I18nService { 'ARIA label and tooltip content describing a button that expands an actions menu', } ), - 'euiColorPicker.colorSelectionLabel': ({ colorValue }: EuiValues) => - i18n.translate('core.euiColorPicker.colorSelectionLabel', { - defaultMessage: 'Color selection is {colorValue}', - values: { colorValue }, + 'euiColorPicker.screenReaderAnnouncement': i18n.translate( + 'core.euiColorPicker.screenReaderAnnouncement', + { + defaultMessage: + 'A popup with a range of selectable colors opened. Tab forward to cycle through colors choices or press escape to close this popup.', + description: + 'Message when the color picker popover is opened. Describes the interaction with the elements in the popover.', + } + ), + 'euiColorPicker.swatchAriaLabel': ({ swatch }: EuiValues) => + i18n.translate('core.euiColorPicker.swatchAriaLabel', { + defaultMessage: 'Select {swatch} as the color', + values: { swatch }, + description: + 'Screen reader text to describe the action and hex value of the selectable option', }), - 'euiColorPicker.transparentColor': i18n.translate('core.euiColorPicker.transparentColor', { - defaultMessage: 'transparent', - description: 'Describes a color that is fully transparent', - }), 'euiComboBoxOptionsList.allOptionsSelected': i18n.translate( 'core.euiComboBoxOptionsList.allOptionsSelected', { @@ -144,6 +163,11 @@ export class I18nService { values: { children }, description: 'ARIA label, `children` is the human-friendly value of an option', }), + 'euiFilterButton.filterBadge': ({ count, hasActiveFilters }: EuiValues) => + i18n.translate('core.euiFilterButton.filterBadge', { + defaultMessage: '${count} ${filterCountLabel} filters', + values: { count, filterCountLabel: hasActiveFilters ? 'active' : 'available' }, + }), 'euiForm.addressFormErrors': i18n.translate('core.euiForm.addressFormErrors', { defaultMessage: 'Please address the errors in your form.', }), @@ -168,6 +192,9 @@ export class I18nService { defaultMessage: 'Open navigation menu', } ), + 'euiHue.label': i18n.translate('core.euiHue.label', { + defaultMessage: 'Select the HSV color mode "hue" value', + }), 'euiModal.closeModal': i18n.translate('core.euiModal.closeModal', { defaultMessage: 'Closes this modal window', }), @@ -193,6 +220,16 @@ export class I18nService { defaultMessage: 'You are in a popup. To exit this popup, hit Escape.', } ), + 'euiSaturation.roleDescription': i18n.translate('core.euiSaturation.roleDescription', { + defaultMessage: 'HSV color mode saturation and value selection', + }), + 'euiSaturation.screenReaderAnnouncement': i18n.translate( + 'core.euiSaturation.screenReaderAnnouncement', + { + defaultMessage: + 'Use the arrow keys to navigate the square color gradient. The coordinates resulting from each key press will be used to calculate HSV color mode "saturation" and "value" numbers, in the range of 0 to 1. Left and right decrease and increase (respectively) the "saturation" value. Up and down decrease and increase (respectively) the "value" value.', + } + ), 'euiSelectable.loadingOptions': i18n.translate('core.euiSelectable.loadingOptions', { defaultMessage: 'Loading options', description: 'Placeholder message while data is asynchronously loaded', @@ -207,6 +244,9 @@ export class I18nService { values={{ searchValue }} /> ), + 'euiStat.loadingText': () => ( + + ), 'euiStep.completeStep': i18n.translate('core.euiStep.completeStep', { defaultMessage: 'Step', description: @@ -260,6 +300,12 @@ export class I18nService { defaultMessage: 'Rows per page', description: 'Displayed in a button that toggles a table pagination menu', }), + 'euiTablePagination.rowsPerPageOption': ({ rowsPerPage }: EuiValues) => + i18n.translate('core.euiTablePagination.rowsPerPageOption', { + defaultMessage: '{rowsPerPage} rows', + description: 'Displayed in a button that toggles the number of visible rows', + values: { rowsPerPage }, + }), 'euiTableSortMobile.sorting': i18n.translate('core.euiTableSortMobile.sorting', { defaultMessage: 'Sorting', description: 'Displayed in a button that toggles a table sorting menu', diff --git a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap index 82d2698b42e9c..147a57bdaadae 100644 --- a/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap +++ b/src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap @@ -518,22 +518,22 @@ exports[`bulkCreate should display success message when bulkCreate is successful token="euiStepNumber.isComplete" > List should render empty state 1`] = ` aria-relevant="text" className="euiScreenReaderOnly" role="status" - > - Below is a table of 0 items. - + />
List should render empty state 1`] = ` List should render empty state 1`] = ` List should render with data 1`] = ` aria-relevant="text" className="euiScreenReaderOnly" role="status" - > - Below is a table of 4 items. - + />
List should render with data 1`] = ` List should render with data 1`] = `
-
- Asset thumbnail -
+
+ Asset thumbnail +
+
-
- Asset thumbnail -
+
+ Asset thumbnail +
+
void; + onSelect?: (value: DisplayedFont['value']) => void; value?: FontValue; } @@ -20,7 +25,7 @@ export const FontPicker: FunctionComponent = props => { // While fonts are strongly-typed, we also support custom fonts someone might type in. // So let's cast the fonts and allow for additions. - const displayedFonts: Array<{ value: string; label: string }> = fonts; + const displayedFonts: DisplayedFont[] = fonts; if (value && !fonts.find(font => font.value === value)) { const label = (value.indexOf(',') >= 0 ? value.split(',')[0] : value).replace(/['"]/g, ''); @@ -36,7 +41,7 @@ export const FontPicker: FunctionComponent = props => { inputDisplay:
{font.label}
, }))} valueOfSelected={value} - onChange={(newValue: FontValue) => onSelect && onSelect(newValue)} + onChange={(newValue: DisplayedFont['value']) => onSelect && onSelect(newValue)} /> ); }; diff --git a/x-pack/plugins/canvas/public/components/tag/__examples__/__snapshots__/tag.examples.storyshot b/x-pack/plugins/canvas/public/components/tag/__examples__/__snapshots__/tag.examples.storyshot index c2fc980eeb792..ec6d0cbe4d1ec 100644 --- a/x-pack/plugins/canvas/public/components/tag/__examples__/__snapshots__/tag.examples.storyshot +++ b/x-pack/plugins/canvas/public/components/tag/__examples__/__snapshots__/tag.examples.storyshot @@ -2,7 +2,7 @@ exports[`Storyshots components/Tags/Tag as badge 1`] = ` , , , , , , , , , , , - - + ); } diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/simple_privilege_section/simple_privilege_section.tsx b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/simple_privilege_section/simple_privilege_section.tsx index e1123284c513d..5510fa6291c08 100644 --- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/simple_privilege_section/simple_privilege_section.tsx +++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/simple_privilege_section/simple_privilege_section.tsx @@ -9,7 +9,6 @@ import { // @ts-ignore EuiDescribedFormGroup, EuiFormRow, - // @ts-ignore EuiSuperSelect, EuiText, } from '@elastic/eui'; diff --git a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx index 1d086c6dfb519..89ad1de9a816a 100644 --- a/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx +++ b/x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx @@ -18,7 +18,6 @@ import { EuiFormRow, EuiOverlayMask, EuiSpacer, - // @ts-ignore EuiSuperSelect, EuiText, EuiTitle, @@ -261,10 +260,7 @@ export class PrivilegeSpaceForm extends Component { }, ]} hasDividers - valueOfSelected={`basePrivilege_${this.getDisplayedBasePrivilege( - allowedPrivileges, - baseExplanation - )}`} + valueOfSelected={this.getDisplayedBasePrivilege(allowedPrivileges, baseExplanation)} disabled={!hasSelectedSpaces} /> @@ -486,6 +482,8 @@ export class PrivilegeSpaceForm extends Component { allowedPrivileges: AllowedPrivilege, explanation: PrivilegeExplanation ) => { + let displayedBasePrivilege = explanation.actualPrivilege; + if (this.canCustomizeFeaturePrivileges(explanation, allowedPrivileges)) { const form = this.state.role.kibana[this.state.editingIndex]; @@ -494,11 +492,11 @@ export class PrivilegeSpaceForm extends Component { explanation.actualPrivilege === NO_PRIVILEGE_VALUE || this.state.isCustomizingFeaturePrivileges ) { - return CUSTOM_PRIVILEGE_VALUE; + displayedBasePrivilege = CUSTOM_PRIVILEGE_VALUE; } } - return explanation.actualPrivilege; + return displayedBasePrivilege ? `basePrivilege_${displayedBasePrivilege}` : undefined; }; private canCustomizeFeaturePrivileges = ( diff --git a/x-pack/plugins/siem/public/components/flow_controls/flow_target_select.tsx b/x-pack/plugins/siem/public/components/flow_controls/flow_target_select.tsx index 344e8b254b5d0..59da4c57f25fe 100644 --- a/x-pack/plugins/siem/public/components/flow_controls/flow_target_select.tsx +++ b/x-pack/plugins/siem/public/components/flow_controls/flow_target_select.tsx @@ -4,10 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { - // @ts-ignore - EuiSuperSelect, -} from '@elastic/eui'; +import { EuiSuperSelect } from '@elastic/eui'; import React from 'react'; import { pure } from 'recompose'; import { ActionCreator } from 'typescript-fsa'; diff --git a/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx b/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx index eedbf8757ebf8..a5d0b818dea97 100644 --- a/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx +++ b/x-pack/plugins/siem/public/components/timeline/body/column_headers/events_select/index.tsx @@ -4,11 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { - EuiCheckbox, - // @ts-ignore - EuiSuperSelect, -} from '@elastic/eui'; +import { EuiCheckbox, EuiSuperSelect } from '@elastic/eui'; import { noop } from 'lodash/fp'; import * as React from 'react'; import { pure } from 'recompose'; @@ -60,7 +56,6 @@ export const EventsSelect = pure(({ checkState, timelineId }) => { itemClassName="eventsSelectItem" onChange={noop} options={getEventsSelectOptions()} - valueOfSelected={''} /> diff --git a/x-pack/plugins/siem/public/components/timeline/data_providers/providers.test.tsx b/x-pack/plugins/siem/public/components/timeline/data_providers/providers.test.tsx index b8a4ba633515e..55a71469ea47d 100644 --- a/x-pack/plugins/siem/public/components/timeline/data_providers/providers.test.tsx +++ b/x-pack/plugins/siem/public/components/timeline/data_providers/providers.test.tsx @@ -141,7 +141,7 @@ describe('Providers', () => { ); wrapper - .find('[data-test-subj="providerBadge"]') + .find('button[data-test-subj="providerBadge"]') .first() .simulate('click'); @@ -176,7 +176,7 @@ describe('Providers', () => { ); wrapper - .find('[data-test-subj="providerBadge"]') + .find('button[data-test-subj="providerBadge"]') .first() .simulate('click'); @@ -221,7 +221,7 @@ describe('Providers', () => { ); wrapper - .find('[data-test-subj="providerBadge"]') + .find('button[data-test-subj="providerBadge"]') .first() .simulate('click'); wrapper.update(); @@ -259,7 +259,7 @@ describe('Providers', () => { ); wrapper - .find('[data-test-subj="providerBadge"]') + .find('button[data-test-subj="providerBadge"]') .first() .simulate('click'); wrapper.update(); @@ -296,7 +296,7 @@ describe('Providers', () => { ); wrapper - .find('[data-test-subj="providerBadge"]') + .find('button[data-test-subj="providerBadge"]') .first() .simulate('click'); @@ -337,7 +337,7 @@ describe('Providers', () => { ); wrapper - .find('[data-test-subj="providerBadge"]') + .find('button[data-test-subj="providerBadge"]') .first() .simulate('click'); @@ -483,6 +483,8 @@ describe('Providers', () => { wrapper .find('[data-test-subj="providerBadge"]') .at(4) + .find('button') + .first() .simulate('click'); wrapper.update(); @@ -527,6 +529,8 @@ describe('Providers', () => { wrapper .find('[data-test-subj="providerBadge"]') .at(4) + .find('button') + .first() .simulate('click'); wrapper.update(); @@ -565,6 +569,8 @@ describe('Providers', () => { wrapper .find('[data-test-subj="providerBadge"]') .at(4) + .find('button') + .first() .simulate('click'); wrapper.update(); @@ -609,6 +615,8 @@ describe('Providers', () => { wrapper .find('[data-test-subj="providerBadge"]') .at(4) + .find('button') + .first() .simulate('click'); wrapper.update(); diff --git a/x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.tsx b/x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.tsx index 3c9c7e5e86516..44035b5ffb2c1 100644 --- a/x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.tsx +++ b/x-pack/plugins/siem/public/components/timeline/search_or_filter/helpers.tsx @@ -4,12 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { - EuiSpacer, - // @ts-ignore - EuiSuperSelect, - EuiText, -} from '@elastic/eui'; +import { EuiSpacer, EuiText } from '@elastic/eui'; import * as React from 'react'; import styled from 'styled-components'; diff --git a/x-pack/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx b/x-pack/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx index d11dd8922ab03..1776c87f09a99 100644 --- a/x-pack/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx +++ b/x-pack/plugins/siem/public/components/timeline/search_or_filter/search_or_filter.tsx @@ -4,13 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { - EuiFlexGroup, - EuiFlexItem, - // @ts-ignore - EuiSuperSelect, - EuiToolTip, -} from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiSuperSelect, EuiToolTip } from '@elastic/eui'; import * as React from 'react'; import { pure } from 'recompose'; import styled, { injectGlobal } from 'styled-components'; diff --git a/x-pack/plugins/siem/public/components/timeline/timeline.test.tsx b/x-pack/plugins/siem/public/components/timeline/timeline.test.tsx index 7edcd1338632f..c6c1356cac574 100644 --- a/x-pack/plugins/siem/public/components/timeline/timeline.test.tsx +++ b/x-pack/plugins/siem/public/components/timeline/timeline.test.tsx @@ -263,7 +263,7 @@ describe('Timeline', () => { ); wrapper - .find('[data-test-subj="providerBadge"]') + .find('button[data-test-subj="providerBadge"]') .first() .simulate('click'); @@ -315,7 +315,7 @@ describe('Timeline', () => { ); wrapper - .find('[data-test-subj="providerBadge"]') + .find('button[data-test-subj="providerBadge"]') .first() .simulate('click'); @@ -372,6 +372,8 @@ describe('Timeline', () => { wrapper .find('[data-test-subj="providerBadge"]') .first() + .find('button') + .first() .simulate('click'); wrapper.update(); @@ -476,6 +478,8 @@ describe('Timeline', () => { wrapper .find('[data-test-subj="providerBadge"]') .at(3) + .find('button') + .first() .simulate('click'); wrapper.update(); @@ -528,6 +532,8 @@ describe('Timeline', () => { wrapper .find('[data-test-subj="providerBadge"]') .at(3) + .find('button') + .first() .simulate('click'); wrapper.update(); @@ -584,6 +590,8 @@ describe('Timeline', () => { wrapper .find('[data-test-subj="providerBadge"]') .at(3) + .find('button') + .first() .simulate('click'); wrapper.update(); diff --git a/x-pack/plugins/spaces/public/components/space_avatar.tsx b/x-pack/plugins/spaces/public/components/space_avatar.tsx index 04524d741e42c..7e37f6a05110f 100644 --- a/x-pack/plugins/spaces/public/components/space_avatar.tsx +++ b/x-pack/plugins/spaces/public/components/space_avatar.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { EuiAvatar } from '@elastic/eui'; +import { EuiAvatar, isValidHex } from '@elastic/eui'; import React, { SFC } from 'react'; import { getSpaceColor, getSpaceInitials, MAX_SPACE_INITIALS } from '../../common'; import { Space } from '../../common/model/space'; @@ -21,6 +21,8 @@ export const SpaceAvatar: SFC = (props: Props) => { const spaceName = space.name ? space.name.trim() : ''; + const spaceColor = getSpaceColor(space); + return ( = (props: Props) => { size={size || 'm'} initialsLength={MAX_SPACE_INITIALS} initials={getSpaceInitials(space)} - color={getSpaceColor(space)} + color={isValidHex(spaceColor) ? spaceColor : ''} {...rest} /> ); diff --git a/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap b/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap index 09cecfce3a8c7..d2e05e114663a 100644 --- a/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap +++ b/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap @@ -32,14 +32,14 @@ exports[`renders without crashing 1`] = ` describedByIds={Array []} fullWidth={false} hasEmptyLabelSpace={false} + isInvalid={false} label="Color" labelType="label" > diff --git a/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space.tsx b/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space.tsx index b1bd52cb1ff31..8a7e384d44b35 100644 --- a/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space.tsx +++ b/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space.tsx @@ -5,7 +5,6 @@ */ import { - // @ts-ignore EuiDescribedFormGroup, EuiFieldText, EuiFlexGroup, diff --git a/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.test.tsx b/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.test.tsx index 516229449b95a..642f2f0013222 100644 --- a/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.test.tsx +++ b/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.test.tsx @@ -25,7 +25,7 @@ test('shows customization fields', () => { const wrapper = mountWithIntl(); expect(wrapper.find(EuiLink)).toHaveLength(0); - expect(wrapper.find(EuiFieldText)).toHaveLength(1); + expect(wrapper.find(EuiFieldText)).toHaveLength(2); // EuiColorPicker contains an EuiFieldText element expect(wrapper.find(EuiColorPicker)).toHaveLength(1); }); @@ -45,6 +45,7 @@ test('invokes onChange callback when avatar is customized', () => { wrapper .find(EuiFieldText) + .first() .find('input') .simulate('change', { target: { value: 'NV' } }); diff --git a/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx b/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx index 3c3e81926dfd2..dea3f0d8cec16 100644 --- a/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx +++ b/x-pack/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx @@ -3,8 +3,8 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ -// @ts-ignore -import { EuiColorPicker, EuiFieldText, EuiFlexItem, EuiFormRow, EuiLink } from '@elastic/eui'; + +import { EuiColorPicker, EuiFieldText, EuiFlexItem, EuiFormRow, isValidHex } from '@elastic/eui'; import { InjectedIntl, injectI18n } from '@kbn/i18n/react'; import React, { ChangeEvent, Component } from 'react'; import { MAX_SPACE_INITIALS } from '../../../../../common/constants'; @@ -37,6 +37,9 @@ class CustomizeSpaceAvatarUI extends Component { const { initialsHasFocus, pendingInitials } = this.state; + const spaceColor = getSpaceColor(space); + const isInvalidSpaceColor = !isValidHex(spaceColor) && spaceColor !== ''; + return (
false}> @@ -62,8 +65,13 @@ class CustomizeSpaceAvatarUI extends Component { id: 'xpack.spaces.management.customizeSpaceAvatar.colorFormRowLabel', defaultMessage: 'Color', })} + isInvalid={isInvalidSpaceColor} > - +
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 835e63047b882..8d3bc14e76a96 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -771,8 +771,6 @@ "core.euiCodeEditor.stopEditing": "完了したら Esc キーで編集を終了します。", "core.euiCodeEditor.stopInteracting": "完了したら Esc キーでコードの操作を終了します。", "core.euiCollapsedItemActions.allActions": "すべてのアクション", - "core.euiColorPicker.colorSelectionLabel": "選択された色は {colorValue} です", - "core.euiColorPicker.transparentColor": "透明", "core.euiComboBoxOptionsList.allOptionsSelected": "利用可能なオプションをすべて選択しました", "core.euiComboBoxOptionsList.alreadyAdded": "{label} は既に追加されています", "core.euiComboBoxOptionsList.createCustomOption": "{searchValue} をカスタムオプションとして追加するには、{key} を押してください。", diff --git a/x-pack/plugins/uptime/public/pages/monitor.tsx b/x-pack/plugins/uptime/public/pages/monitor.tsx index 6dded7196a750..b04ee66b54254 100644 --- a/x-pack/plugins/uptime/public/pages/monitor.tsx +++ b/x-pack/plugins/uptime/public/pages/monitor.tsx @@ -7,8 +7,6 @@ import { // @ts-ignore No typings for EuiSpacer EuiSpacer, - // @ts-ignore No typings for EuiSuperSelect - EuiSuperSelect, } from '@elastic/eui'; import { ApolloQueryResult, OperationVariables, QueryOptions } from 'apollo-client'; import gql from 'graphql-tag'; diff --git a/yarn.lock b/yarn.lock index 420f92a81195a..3ef8ec04ba896 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1606,10 +1606,10 @@ tabbable "^1.1.0" uuid "^3.1.0" -"@elastic/eui@11.0.1": - version "11.0.1" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-11.0.1.tgz#fbf8650bd766f955b611d6aa9f652bab680a8874" - integrity sha512-/RJOFPTiFu1UIqhLEzsY0n3tv5XwXxH1W3dica8YtfaTl+6GvvQhYP9MAjqzOwDd0y8E7+130ZTFszwP+cyBcQ== +"@elastic/eui@11.3.2": + version "11.3.2" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-11.3.2.tgz#d578ab2d6ebe9c85a445376fad190564d43bcdb4" + integrity sha512-lnf7ZCEI443uwXJX9rWD/nK10asBTFOmd8HiH1Mn6iggOBchk4QCrI8XDqfJRp2bUqMetBGI6Az7WgqF4uZsEw== dependencies: "@types/lodash" "^4.14.116" "@types/numeral" "^0.0.25" @@ -1624,7 +1624,6 @@ prop-types "^15.6.0" react-ace "^5.5.0" react-beautiful-dnd "^10.1.0" - react-color "^2.13.8" react-focus-lock "^1.17.7" react-input-autosize "^2.2.1" react-is "~16.3.0"