diff --git a/package.json b/package.json index 4fffa4304db86f..5ae8763ffd181c 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 daa74771d79b19..c75588f5369b5e 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 b1ef6e91abdce2..79678aac17157d 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 82d2698b42e9c6..147a57bdaadaec 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 c2fc980eeb7927..ec6d0cbe4d1ecc 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 e1123284c513d2..5510fa6291c08c 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 1d086c6dfb519a..89ad1de9a816a5 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 344e8b254b5d0e..59da4c57f25fea 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 eedbf8757ebf8c..a5d0b818dea97f 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 b8a4ba633515e7..55a71469ea47d7 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 3c9c7e5e86516a..44035b5ffb2c15 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 d11dd8922ab030..1776c87f09a99a 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 7edcd1338632f3..c6c1356cac574b 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 04524d741e42ca..7e37f6a05110f1 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 09cecfce3a8c7c..d2e05e114663ab 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 b1bd52cb1ff314..8a7e384d44b358 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 516229449b95a7..642f2f0013222c 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 3c3e81926dfd26..dea3f0d8cec164 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 835e63047b882b..8d3bc14e76a968 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 6dded7196a7506..b04ee66b542541 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 420f92a81195a7..3ef8ec04ba8961 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"