[7.x] Upgrade EUI to 11.3.2 (#38262) (#39031)

* Upgrade EUI to 11.3.2 (#38262)

* eui 11.3.1

* EuiSuperSelect TS updates

* EuiColorPicker updates

* EuiBadge updates

* a11y updates

* i18n service updates

* remove unused translations

* move valueOfSelected logic to private method

* update EuiColorPicker class name

* Updated canvas storyshots

* i18n fixes; maps color selection position

* i18n snapshot updates

* update canvas storyshots

* snapshot updates

* 11.3.2

* maps colorpicker

* space avatar colorpicker

* update i18n json
This commit is contained in:
Greg Thompson 2019-06-17 08:57:18 -05:00 committed by Chandler Prall
parent 5d441123e4
commit 0ca094b416
45 changed files with 219 additions and 182 deletions

View file

@ -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",

View file

@ -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",

View file

@ -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': () => (
<FormattedMessage id="core.euiStat.loadingText" defaultMessage="Statistic is loading" />
),
'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',

View file

@ -518,22 +518,22 @@ exports[`bulkCreate should display success message when bulkCreate is successful
token="euiStepNumber.isComplete"
>
<EuiIcon
aria-label="complete"
className="euiStepNumber__icon"
title="complete"
type="check"
>
<EuiIconCheck
aria-label="complete"
className="euiIcon euiIcon--medium euiIcon-isLoaded euiStepNumber__icon"
focusable="false"
style={null}
title="complete"
>
<svg
aria-label="complete"
className="euiIcon euiIcon--medium euiIcon-isLoaded euiStepNumber__icon"
focusable="false"
height={16}
style={null}
title="complete"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"

View file

@ -12,7 +12,7 @@
.tvbColorPicker__swatch {
// SASSTODO: Replace with EUI component
// sass-lint:disable-block placeholder-in-extend
@extend .euiColorPicker__swatch;
@extend .euiColorPickerSwatch;
}
.tvbColorPicker__swatch-empty {

View file

@ -7,7 +7,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "11.0.1",
"@elastic/eui": "11.3.2",
"react": "^16.8.0",
"react-dom": "^16.8.0"
}

View file

@ -7,7 +7,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "11.0.1",
"@elastic/eui": "11.3.2",
"react": "^16.8.0"
}
}

View file

@ -8,7 +8,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "11.0.1",
"@elastic/eui": "11.3.2",
"react": "^16.8.0"
},
"scripts": {

View file

@ -8,7 +8,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "11.0.1",
"@elastic/eui": "11.3.2",
"react": "^16.8.0"
},
"scripts": {

View file

@ -7,7 +7,7 @@
},
"license": "Apache-2.0",
"dependencies": {
"@elastic/eui": "11.0.1",
"@elastic/eui": "11.3.2",
"react": "^16.8.0",
"react-dom": "^16.8.0"
}

View file

@ -168,7 +168,7 @@
"@babel/register": "7.4.4",
"@babel/runtime": "7.4.5",
"@elastic/datemath": "5.0.2",
"@elastic/eui": "11.0.1",
"@elastic/eui": "11.3.2",
"@elastic/javascript-typescript-langserver": "^0.1.28",
"@elastic/lsp-extension": "^0.1.1",
"@elastic/node-crypto": "^1.0.0",

View file

@ -71,9 +71,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
aria-relevant="text"
className="euiScreenReaderOnly"
role="status"
>
Below is a table of 0 items.
</caption>
/>
<thead>
<tr>
<th
@ -125,7 +123,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
</div>
</th>
<th
aria-live={true}
aria-live="polite"
aria-sort="none"
className="euiTableHeaderCell"
data-test-subj="tableHeaderCell_occurrenceCount_3"
@ -155,7 +153,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
</button>
</th>
<th
aria-live={true}
aria-live="polite"
aria-sort="descending"
className="euiTableHeaderCell"
data-test-subj="tableHeaderCell_latestOccurrenceAt_4"
@ -375,9 +373,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
aria-relevant="text"
className="euiScreenReaderOnly"
role="status"
>
Below is a table of 4 items.
</caption>
/>
<thead>
<tr>
<th
@ -429,7 +425,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
</div>
</th>
<th
aria-live={true}
aria-live="polite"
aria-sort="none"
className="euiTableHeaderCell"
data-test-subj="tableHeaderCell_occurrenceCount_3"
@ -459,7 +455,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
</button>
</th>
<th
aria-live={true}
aria-live="polite"
aria-sort="descending"
className="euiTableHeaderCell"
data-test-subj="tableHeaderCell_latestOccurrenceAt_4"

View file

@ -8,7 +8,6 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
// @ts-ignore
EuiSuperSelect,
EuiText
} from '@elastic/eui';

View file

@ -281,7 +281,7 @@ NodeList [
class="euiTableCellContent euiTableCellContent--overflowingContent"
>
<span
class="euiBadge euiBadge--hollow"
class="euiBadge euiBadge--iconLeft euiBadge--hollow"
>
<span
class="euiBadge__content"
@ -294,7 +294,7 @@ NodeList [
</span>
</span>
<span
class="euiBadge euiBadge--hollow"
class="euiBadge euiBadge--iconLeft euiBadge--hollow"
>
<span
class="euiBadge__content"

View file

@ -17,20 +17,24 @@ exports[`Storyshots components/Assets/Asset airplane 1`] = `
<div
className="canvasAsset__thumb canvasCheckered"
>
<figure
className="euiImage canvasAsset__img"
style={
Object {
"backgroundImage": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4zMSA1Ni4zMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMDc4YTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlBsYW5lIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuNTEsNDguOTMsNDEuMjYsMjIuNTIsNTMuNzYsMTBhNS4yOSw1LjI5LDAsMCwwLTcuNDgtNy40N2wtMTIuNSwxMi41TDcuMzgsNi43OUEuNy43LDAsMCwwLDYuNjksN0wxLjIsMTIuNDVhLjcuNywwLDAsMCwwLDFMMTkuODUsMjlsLTcuMjQsNy4yNC03Ljc0LS42YS43MS43MSwwLDAsMC0uNTMuMkwxLjIxLDM5YS42Ny42NywwLDAsMCwuMDgsMUw5LjQ1LDQ2bC4wNywwYy4xMS4xMy4yMi4yNi4zNC4zOHMuMjUuMjMuMzguMzRhLjM2LjM2LDAsMCwwLDAsLjA3TDE2LjMzLDU1YS42OC42OCwwLDAsMCwxLC4wN0wyMC40OSw1MmEuNjcuNjcsMCwwLDAsLjE5LS41NGwtLjU5LTcuNzQsNy4yNC03LjI0TDQyLjg1LDU1LjA2YS42OC42OCwwLDAsMCwxLDBsNS41LTUuNUEuNjYuNjYsMCwwLDAsNDkuNTEsNDguOTNaIi8+PC9nPjwvZz48L3N2Zz4=)",
}
}
<button
type="button"
>
<img
alt="Asset thumbnail"
className="euiImage__img"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4zMSA1Ni4zMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMDc4YTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlBsYW5lIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuNTEsNDguOTMsNDEuMjYsMjIuNTIsNTMuNzYsMTBhNS4yOSw1LjI5LDAsMCwwLTcuNDgtNy40N2wtMTIuNSwxMi41TDcuMzgsNi43OUEuNy43LDAsMCwwLDYuNjksN0wxLjIsMTIuNDVhLjcuNywwLDAsMCwwLDFMMTkuODUsMjlsLTcuMjQsNy4yNC03Ljc0LS42YS43MS43MSwwLDAsMC0uNTMuMkwxLjIxLDM5YS42Ny42NywwLDAsMCwuMDgsMUw5LjQ1LDQ2bC4wNywwYy4xMS4xMy4yMi4yNi4zNC4zOHMuMjUuMjMuMzguMzRhLjM2LjM2LDAsMCwwLDAsLjA3TDE2LjMzLDU1YS42OC42OCwwLDAsMCwxLC4wN0wyMC40OSw1MmEuNjcuNjcsMCwwLDAsLjE5LS41NGwtLjU5LTcuNzQsNy4yNC03LjI0TDQyLjg1LDU1LjA2YS42OC42OCwwLDAsMCwxLDBsNS41LTUuNUEuNjYuNjYsMCwwLDAsNDkuNTEsNDguOTNaIi8+PC9nPjwvZz48L3N2Zz4="
/>
</figure>
<figure
className="euiImage canvasAsset__img"
style={
Object {
"backgroundImage": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4zMSA1Ni4zMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMDc4YTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlBsYW5lIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuNTEsNDguOTMsNDEuMjYsMjIuNTIsNTMuNzYsMTBhNS4yOSw1LjI5LDAsMCwwLTcuNDgtNy40N2wtMTIuNSwxMi41TDcuMzgsNi43OUEuNy43LDAsMCwwLDYuNjksN0wxLjIsMTIuNDVhLjcuNywwLDAsMCwwLDFMMTkuODUsMjlsLTcuMjQsNy4yNC03Ljc0LS42YS43MS43MSwwLDAsMC0uNTMuMkwxLjIxLDM5YS42Ny42NywwLDAsMCwuMDgsMUw5LjQ1LDQ2bC4wNywwYy4xMS4xMy4yMi4yNi4zNC4zOHMuMjUuMjMuMzguMzRhLjM2LjM2LDAsMCwwLDAsLjA3TDE2LjMzLDU1YS42OC42OCwwLDAsMCwxLC4wN0wyMC40OSw1MmEuNjcuNjcsMCwwLDAsLjE5LS41NGwtLjU5LTcuNzQsNy4yNC03LjI0TDQyLjg1LDU1LjA2YS42OC42OCwwLDAsMCwxLDBsNS41LTUuNUEuNjYuNjYsMCwwLDAsNDkuNTEsNDguOTNaIi8+PC9nPjwvZz48L3N2Zz4=)",
}
}
>
<img
alt="Asset thumbnail"
className="euiImage__img"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4zMSA1Ni4zMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMDc4YTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlBsYW5lIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuNTEsNDguOTMsNDEuMjYsMjIuNTIsNTMuNzYsMTBhNS4yOSw1LjI5LDAsMCwwLTcuNDgtNy40N2wtMTIuNSwxMi41TDcuMzgsNi43OUEuNy43LDAsMCwwLDYuNjksN0wxLjIsMTIuNDVhLjcuNywwLDAsMCwwLDFMMTkuODUsMjlsLTcuMjQsNy4yNC03Ljc0LS42YS43MS43MSwwLDAsMC0uNTMuMkwxLjIxLDM5YS42Ny42NywwLDAsMCwuMDgsMUw5LjQ1LDQ2bC4wNywwYy4xMS4xMy4yMi4yNi4zNC4zOHMuMjUuMjMuMzguMzRhLjM2LjM2LDAsMCwwLDAsLjA3TDE2LjMzLDU1YS42OC42OCwwLDAsMCwxLC4wN0wyMC40OSw1MmEuNjcuNjcsMCwwLDAsLjE5LS41NGwtLjU5LTcuNzQsNy4yNC03LjI0TDQyLjg1LDU1LjA2YS42OC42OCwwLDAsMCwxLDBsNS41LTUuNUEuNjYuNjYsMCwwLDAsNDkuNTEsNDguOTNaIi8+PC9nPjwvZz48L3N2Zz4="
/>
</figure>
</button>
</div>
<div
className="euiSpacer euiSpacer--s"
@ -213,20 +217,24 @@ exports[`Storyshots components/Assets/Asset marker 1`] = `
<div
className="canvasAsset__thumb canvasCheckered"
>
<figure
className="euiImage canvasAsset__img"
style={
Object {
"backgroundImage": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zOSA1Ny41NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMTliOGY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkxvY2F0aW9uIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTksMUExOC4xOSwxOC4xOSwwLDAsMCwyLjk0LDI3LjM2aDBhMTkuNTEsMTkuNTEsMCwwLDAsMSwxLjc4TDE5LjE5LDU1LjU3LDM0LjM4LDI5LjIxQTE4LjE5LDE4LjE5LDAsMCwwLDE5LjE5LDFabTAsMjMuMjlhNS41Myw1LjUzLDAsMSwxLDUuNTMtNS41M0E1LjUzLDUuNTMsMCwwLDEsMTkuMTksMjQuMjlaIi8+PC9nPjwvZz48L3N2Zz4=)",
}
}
<button
type="button"
>
<img
alt="Asset thumbnail"
className="euiImage__img"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zOSA1Ny41NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMTliOGY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkxvY2F0aW9uIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTksMUExOC4xOSwxOC4xOSwwLDAsMCwyLjk0LDI3LjM2aDBhMTkuNTEsMTkuNTEsMCwwLDAsMSwxLjc4TDE5LjE5LDU1LjU3LDM0LjM4LDI5LjIxQTE4LjE5LDE4LjE5LDAsMCwwLDE5LjE5LDFabTAsMjMuMjlhNS41Myw1LjUzLDAsMSwxLDUuNTMtNS41M0E1LjUzLDUuNTMsMCwwLDEsMTkuMTksMjQuMjlaIi8+PC9nPjwvZz48L3N2Zz4="
/>
</figure>
<figure
className="euiImage canvasAsset__img"
style={
Object {
"backgroundImage": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zOSA1Ny41NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMTliOGY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkxvY2F0aW9uIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTksMUExOC4xOSwxOC4xOSwwLDAsMCwyLjk0LDI3LjM2aDBhMTkuNTEsMTkuNTEsMCwwLDAsMSwxLjc4TDE5LjE5LDU1LjU3LDM0LjM4LDI5LjIxQTE4LjE5LDE4LjE5LDAsMCwwLDE5LjE5LDFabTAsMjMuMjlhNS41Myw1LjUzLDAsMSwxLDUuNTMtNS41M0E1LjUzLDUuNTMsMCwwLDEsMTkuMTksMjQuMjlaIi8+PC9nPjwvZz48L3N2Zz4=)",
}
}
>
<img
alt="Asset thumbnail"
className="euiImage__img"
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zOSA1Ny41NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMTliOGY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkxvY2F0aW9uIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTksMUExOC4xOSwxOC4xOSwwLDAsMCwyLjk0LDI3LjM2aDBhMTkuNTEsMTkuNTEsMCwwLDAsMSwxLjc4TDE5LjE5LDU1LjU3LDM0LjM4LDI5LjIxQTE4LjE5LDE4LjE5LDAsMCwwLDE5LjE5LDFabTAsMjMuMjlhNS41Myw1LjUzLDAsMSwxLDUuNTMtNS41M0E1LjUzLDUuNTMsMCwwLDEsMTkuMTksMjQuMjlaIi8+PC9nPjwvZz48L3N2Zz4="
/>
</figure>
</button>
</div>
<div
className="euiSpacer euiSpacer--s"

View file

@ -142,7 +142,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
className="euiCard__footer"
>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -161,7 +161,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
</span>
</span>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -180,7 +180,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
</span>
</span>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -199,7 +199,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
</span>
</span>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -218,7 +218,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
</span>
</span>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -237,7 +237,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
</span>
</span>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",

View file

@ -491,7 +491,7 @@ exports[`Storyshots components/Elements/ElementGrid with tags filter 1`] = `
className="euiCard__footer"
>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -565,7 +565,7 @@ exports[`Storyshots components/Elements/ElementGrid with text filter 1`] = `
className="euiCard__footer"
>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -639,7 +639,7 @@ exports[`Storyshots components/Elements/ElementGrid without controls 1`] = `
className="euiCard__footer"
>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -698,7 +698,7 @@ exports[`Storyshots components/Elements/ElementGrid without controls 1`] = `
className="euiCard__footer"
>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -757,7 +757,7 @@ exports[`Storyshots components/Elements/ElementGrid without controls 1`] = `
className="euiCard__footer"
>
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",

View file

@ -31,8 +31,8 @@ exports[`Storyshots components/FontPicker default 1`] = `
<button
aria-haspopup="true"
aria-labelledby="undefined generated-id"
aria-selected={true}
className="euiSuperSelectControl euiSuperSelectControl--compressed"
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
role="option"
@ -105,8 +105,8 @@ exports[`Storyshots components/FontPicker with value 1`] = `
<button
aria-haspopup="true"
aria-labelledby="undefined generated-id"
aria-selected={true}
className="euiSuperSelectControl euiSuperSelectControl--compressed"
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
role="option"

View file

@ -10,8 +10,13 @@ import PropTypes from 'prop-types';
import React, { FunctionComponent } from 'react';
import { fonts, FontValue } from '../../../common/lib/fonts';
interface DisplayedFont {
value: string;
label: string;
}
interface Props {
onSelect?: (value: FontValue) => void;
onSelect?: (value: DisplayedFont['value']) => void;
value?: FontValue;
}
@ -20,7 +25,7 @@ export const FontPicker: FunctionComponent<Props> = 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> = props => {
inputDisplay: <div style={{ fontFamily: font.value }}>{font.label}</div>,
}))}
valueOfSelected={value}
onChange={(newValue: FontValue) => onSelect && onSelect(newValue)}
onChange={(newValue: DisplayedFont['value']) => onSelect && onSelect(newValue)}
/>
);
};

View file

@ -2,7 +2,7 @@
exports[`Storyshots components/Tags/Tag as badge 1`] = `
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#666666",
@ -24,7 +24,7 @@ exports[`Storyshots components/Tags/Tag as badge 1`] = `
exports[`Storyshots components/Tags/Tag as badge with color 1`] = `
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#327b53",

View file

@ -5,7 +5,7 @@ exports[`Storyshots components/Tags/TagList empty list 1`] = `null`;
exports[`Storyshots components/Tags/TagList with badge tags 1`] = `
Array [
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#cc3b54",
@ -24,7 +24,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#5bc149",
@ -43,7 +43,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#fbc545",
@ -162,7 +162,7 @@ Array [
exports[`Storyshots components/Tags/TagList with lots of tags 1`] = `
Array [
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#cc3b54",
@ -181,7 +181,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#5bc149",
@ -200,7 +200,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#fbc545",
@ -219,7 +219,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#9b3067",
@ -238,7 +238,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#1819bd",
@ -257,7 +257,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#d41e93",
@ -276,7 +276,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#3486d2",
@ -295,7 +295,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#b870d8",
@ -314,7 +314,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#f4a4a7",
@ -333,7 +333,7 @@ Array [
</span>
</span>,
<span
className="euiBadge"
className="euiBadge euiBadge--iconLeft"
style={
Object {
"backgroundColor": "#072d6d",

View file

@ -20,7 +20,6 @@ import {
EuiModalHeaderTitle,
EuiOverlayMask,
EuiSpacer,
// @ts-ignore
EuiSuperSelect,
EuiText,
EuiTitle,

View file

@ -117,7 +117,6 @@ exports[`render correctly with empty query string 1`] = `
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
options={
@ -212,7 +211,6 @@ exports[`render correctly with empty query string 1`] = `
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
options={
@ -378,8 +376,8 @@ exports[`render correctly with empty query string 1`] = `
<button
aria-haspopup="true"
aria-labelledby="undefined 0.i"
aria-selected={true}
className="euiSuperSelectControl"
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
role="option"
@ -828,7 +826,6 @@ exports[`render correctly with input query string changed 1`] = `
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
options={
@ -923,7 +920,6 @@ exports[`render correctly with input query string changed 1`] = `
fullWidth={false}
isInvalid={false}
isLoading={false}
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
options={
@ -1089,8 +1085,8 @@ exports[`render correctly with input query string changed 1`] = `
<button
aria-haspopup="true"
aria-labelledby="undefined 0.i"
aria-selected={true}
className="euiSuperSelectControl"
onChange={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
role="option"

View file

@ -4,12 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import {
EuiIcon,
// @ts-ignore
EuiSuperSelect,
EuiText,
} from '@elastic/eui';
import { EuiIcon, EuiSuperSelect, EuiText } from '@elastic/eui';
import React, { Component } from 'react';
import { SearchScope } from '../../../../model';

View file

@ -1,3 +1,2 @@
@import './components/color_gradient';
@import './components/static_dynamic_style_row';
@import './components/vector/color/static_color_selection';

View file

@ -1 +0,0 @@
@import './static_color_selection';

View file

@ -1,7 +0,0 @@
.mapColorPicker {
padding-top: 9px;
.euiColorPickerPopUp {
z-index: $euiZLevel3;
}
}

View file

@ -7,8 +7,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {
EuiColorPicker,
EuiFormControlLayout
EuiColorPicker
} from '@elastic/eui';
import { staticColorShape } from '../style_option_shapes';
@ -18,13 +17,10 @@ export function StaticColorSelection({ onChange, styleOptions }) {
};
return (
<EuiFormControlLayout>
<EuiColorPicker
onChange={onColorChange}
color={styleOptions.color}
className="mapColorPicker euiFieldText"
/>
</EuiFormControlLayout>
<EuiColorPicker
onChange={onColorChange}
color={styleOptions.color}
/>
);
}

View file

@ -9,7 +9,6 @@ import {
// @ts-ignore
EuiDescribedFormGroup,
EuiFormRow,
// @ts-ignore
EuiSuperSelect,
EuiText,
} from '@elastic/eui';

View file

@ -18,7 +18,6 @@ import {
EuiFormRow,
EuiOverlayMask,
EuiSpacer,
// @ts-ignore
EuiSuperSelect,
EuiText,
EuiTitle,
@ -261,10 +260,7 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
},
]}
hasDividers
valueOfSelected={`basePrivilege_${this.getDisplayedBasePrivilege(
allowedPrivileges,
baseExplanation
)}`}
valueOfSelected={this.getDisplayedBasePrivilege(allowedPrivileges, baseExplanation)}
disabled={!hasSelectedSpaces}
/>
</EuiFormRow>
@ -486,6 +482,8 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
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<Props, State> {
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 = (

View file

@ -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';

View file

@ -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<Props>(({ checkState, timelineId }) => {
itemClassName="eventsSelectItem"
onChange={noop}
options={getEventsSelectOptions()}
valueOfSelected={''}
/>
<CheckboxContainer data-test-subj="timeline-events-select-checkbox-container">
<PositionedCheckbox data-test-subj="timeline-events-select-positioned-checkbox">

View file

@ -141,7 +141,7 @@ describe('Providers', () => {
</TestProviders>
);
wrapper
.find('[data-test-subj="providerBadge"]')
.find('button[data-test-subj="providerBadge"]')
.first()
.simulate('click');
@ -176,7 +176,7 @@ describe('Providers', () => {
</TestProviders>
);
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();

View file

@ -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';

View file

@ -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';

View file

@ -263,7 +263,7 @@ describe('Timeline', () => {
</TestProviders>
);
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();

View file

@ -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: Props) => {
const spaceName = space.name ? space.name.trim() : '';
const spaceColor = getSpaceColor(space);
return (
<EuiAvatar
type="space"
@ -34,7 +36,7 @@ export const SpaceAvatar: SFC<Props> = (props: Props) => {
size={size || 'm'}
initialsLength={MAX_SPACE_INITIALS}
initials={getSpaceInitials(space)}
color={getSpaceColor(space)}
color={isValidHex(spaceColor) ? spaceColor : ''}
{...rest}
/>
);

View file

@ -32,14 +32,14 @@ exports[`renders without crashing 1`] = `
describedByIds={Array []}
fullWidth={false}
hasEmptyLabelSpace={false}
isInvalid={false}
label="Color"
labelType="label"
>
<EuiColorPicker
aria-label="Select a color"
color="#BFA180"
isInvalid={false}
onChange={[Function]}
showColorLabel={true}
/>
</EuiFormRow>
</EuiFlexItem>

View file

@ -5,7 +5,6 @@
*/
import {
// @ts-ignore
EuiDescribedFormGroup,
EuiFieldText,
EuiFlexGroup,

View file

@ -25,7 +25,7 @@ test('shows customization fields', () => {
const wrapper = mountWithIntl(<CustomizeSpaceAvatar space={space} onChange={jest.fn()} />);
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' } });

View file

@ -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<Props, State> {
const { initialsHasFocus, pendingInitials } = this.state;
const spaceColor = getSpaceColor(space);
const isInvalidSpaceColor = !isValidHex(spaceColor) && spaceColor !== '';
return (
<form onSubmit={() => false}>
<EuiFlexItem grow={false}>
@ -62,8 +65,13 @@ class CustomizeSpaceAvatarUI extends Component<Props, State> {
id: 'xpack.spaces.management.customizeSpaceAvatar.colorFormRowLabel',
defaultMessage: 'Color',
})}
isInvalid={isInvalidSpaceColor}
>
<EuiColorPicker color={getSpaceColor(space)} onChange={this.onColorChange} />
<EuiColorPicker
color={spaceColor}
onChange={this.onColorChange}
isInvalid={isInvalidSpaceColor}
/>
</EuiFormRow>
</EuiFlexItem>
</form>

View file

@ -779,8 +779,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} を押してください。",

View file

@ -785,8 +785,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": "按 {key} 键将 {searchValue} 添加为自定义选项",
@ -9982,4 +9980,4 @@
"xpack.watcher.watchActionsTitle": "满足后将执行 {watchActionsCount, plural, one{# 个操作} other {# 个操作}}",
"xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
}
}
}

View file

@ -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';

View file

@ -1591,10 +1591,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"
@ -1609,7 +1609,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"