mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
* 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:
parent
5d441123e4
commit
0ca094b416
45 changed files with 219 additions and 182 deletions
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
},
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@elastic/eui": "11.0.1",
|
||||
"@elastic/eui": "11.3.2",
|
||||
"react": "^16.8.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
},
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@elastic/eui": "11.0.1",
|
||||
"@elastic/eui": "11.3.2",
|
||||
"react": "^16.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
},
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@elastic/eui": "11.0.1",
|
||||
"@elastic/eui": "11.3.2",
|
||||
"react": "^16.8.0"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -8,7 +8,6 @@ import {
|
|||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiFormRow,
|
||||
// @ts-ignore
|
||||
EuiSuperSelect,
|
||||
EuiText
|
||||
} from '@elastic/eui';
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -20,7 +20,6 @@ import {
|
|||
EuiModalHeaderTitle,
|
||||
EuiOverlayMask,
|
||||
EuiSpacer,
|
||||
// @ts-ignore
|
||||
EuiSuperSelect,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -1,3 +1,2 @@
|
|||
@import './components/color_gradient';
|
||||
@import './components/static_dynamic_style_row';
|
||||
@import './components/vector/color/static_color_selection';
|
||||
|
|
|
@ -1 +0,0 @@
|
|||
@import './static_color_selection';
|
|
@ -1,7 +0,0 @@
|
|||
.mapColorPicker {
|
||||
padding-top: 9px;
|
||||
|
||||
.euiColorPickerPopUp {
|
||||
z-index: $euiZLevel3;
|
||||
}
|
||||
}
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -9,7 +9,6 @@ import {
|
|||
// @ts-ignore
|
||||
EuiDescribedFormGroup,
|
||||
EuiFormRow,
|
||||
// @ts-ignore
|
||||
EuiSuperSelect,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
|
|
|
@ -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 = (
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
*/
|
||||
|
||||
import {
|
||||
// @ts-ignore
|
||||
EuiDescribedFormGroup,
|
||||
EuiFieldText,
|
||||
EuiFlexGroup,
|
||||
|
|
|
@ -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' } });
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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} を押してください。",
|
||||
|
|
|
@ -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": "通过创建、管理和监测警报来检测数据中的更改。"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue