github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade EUI to v30.1.1 (#81499)

Browse source 
* eui to v30.0.0

* removed unused RecentLinks component

* update compressed -> display prop

* euiformrow compressed -> display

* euipopover remove withtitle

* euibuttongroup prop updates

* remove euibuttontoggle

* src snapshot updates

* tutorial euibuttongroup update

* x-pack snapshot updates

* euibuttongroup test updates

* TODO

* misc. js file updates

* remove euinavdrawer scss references

* translation removals

* more x-pack snapshot updates

* update data-test-subj lookup

* icons logoAMP -> logoObservability

* cypress selector updates

* update euibuttontoggle onchange, test interaction

* Fix auto-update toggle in Visualize

* some more change -> click test updates

* idtoselectedmap change

* Fix feature table button group

* Remove empty SASS file

* Fix feature table button group II

* Using `compressed` to also dictate dual range row

* Fix a few security labels

* An ML fix

* Apply suggestions from code review

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* remove unused translation

* update view_type_toggle snapshot

* more snapshot updates

* eui to 30.1.0

* undo temp ts-ignore

* more x-pack snapshot updates

* eui to 30.1.1

* update feature privilege text

* Update x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/feature_table/sub_feature_form.tsx

Co-authored-by: Joe Portner <5295965+jportner@users.noreply.github.com>

* reuse i18n token

* Adapt log entry action button to new `minWidth` prop

* clean up label

* Combine auto apply strings into one

* ternary fix

* cases status useCallback

Co-authored-by: cchaos <caroline.horn@elastic.co>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Co-authored-by: Joe Portner <5295965+jportner@users.noreply.github.com>
Co-authored-by: Felix Stürmer <stuermer@weltenwort.de>
This commit is contained in:
Greg Thompson 2020-10-30 16:18:27 -06:00 • committed by GitHub
parent 2985def251
commit 6fdc7eb1fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
208 changed files with 1259 additions and 1120 deletions
Download patch file Download diff file Expand all files Collapse all files

6
package.json
View file

@ -110,14 +110,16 @@
"**/grunt-*/**",
"x-pack/typescript",
"@elastic/eui/rehype-react",
"@elastic/eui/remark-parse",
"@elastic/eui/remark-rehype",
"@elastic/eui/remark-rehype/**"
"@elastic/eui/remark-rehype/**",
"@elastic/eui/unified"
]
},
"dependencies": {
"@elastic/datemath": "5.0.3",
"@elastic/elasticsearch": "7.10.0-rc.1",
"@elastic/eui": "29.5.0",
"@elastic/eui": "30.1.1",
"@elastic/good": "8.1.1-kibana2",
"@elastic/numeral": "^2.5.0",
"@elastic/request-crypto": "1.1.4",

2
packages/kbn-ui-framework/package.json
View file

@ -31,7 +31,7 @@
},
"devDependencies": {
"@babel/core": "^7.11.6",
"@elastic/eui": "29.5.0",
"@elastic/eui": "30.1.1",
"@kbn/babel-preset": "1.0.0",
"@kbn/optimizer": "1.0.0",
"babel-loader": "^8.0.6",

2
packages/kbn-ui-shared-deps/package.json
View file

@ -10,7 +10,7 @@
},
"dependencies": {
"@elastic/charts": "24.0.0",
"@elastic/eui": "29.5.0",
"@elastic/eui": "30.1.1",
"@elastic/numeral": "^2.5.0",
"@kbn/i18n": "1.0.0",
"@kbn/monaco": "1.0.0",

52
src/core/public/chrome/ui/header/recent_links.tsx
View file

@ -1,52 +0,0 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiNavDrawerGroup } from '@elastic/eui';
import { RecentNavLink } from './nav_link';
interface Props {
recentNavLinks: RecentNavLink[];
}
export function RecentLinks({ recentNavLinks }: Props) {
return (
<EuiNavDrawerGroup
listItems={[
{
label: i18n.translate('core.ui.chrome.sideGlobalNav.viewRecentItemsLabel', {
defaultMessage: 'Recently viewed',
}),
iconType: 'recentlyViewedApp',
isDisabled: recentNavLinks.length === 0,
flyoutMenu: {
title: i18n.translate('core.ui.chrome.sideGlobalNav.viewRecentItemsFlyoutTitle', {
defaultMessage: 'Recent items',
}),
listItems: recentNavLinks,
},
},
]}
aria-label={i18n.translate('core.ui.recentLinks.screenReaderLabel', {
defaultMessage: 'Recently viewed links, navigation',
})}
/>
);
}

2
src/plugins/charts/public/static/components/number_input.tsx
View file

@ -54,7 +54,7 @@ function NumberInputOption<ParamName extends string>({
'data-test-subj': dataTestSubj,
}: NumberInputOptionProps<ParamName>) {
return (
<EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth compressed>
<EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth display="rowCompressed">
<EuiFieldNumber
data-test-subj={dataTestSubj}
disabled={disabled}

8
src/plugins/charts/public/static/components/range.tsx
View file

@ -65,7 +65,13 @@ function RangeOption<ParamName extends string>({
}
};
return (
<EuiFormRow label={label} fullWidth={true} isInvalid={!isValidState} error={error} compressed>
<EuiFormRow
label={label}
fullWidth={true}
isInvalid={!isValidState}
error={error}
display="rowCompressed"
>
<EuiRange
compressed
fullWidth

2
src/plugins/charts/public/static/components/required_number_input.tsx
View file

@ -70,7 +70,7 @@ function RequiredNumberInputOption<ParamName extends string>({
);
return (
<EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth compressed>
<EuiFormRow label={label} error={error} isInvalid={isInvalid} fullWidth display="rowCompressed">
<EuiFieldNumber
compressed
fullWidth

2
src/plugins/charts/public/static/components/select.tsx
View file

@ -51,7 +51,7 @@ function SelectOption<ParamName extends string, ValidParamValues extends string
return (
<EuiFormRow
compressed
display="rowCompressed"
fullWidth
helpText={helpText}
id={id}

2
src/plugins/charts/public/static/components/switch.tsx
View file

@ -41,7 +41,7 @@ function SwitchOption<ParamName extends string>({
setValue,
}: SwitchOptionProps<ParamName>) {
return (
<EuiFormRow fullWidth={true} compressed={true}>
<EuiFormRow fullWidth={true} display="rowCompressed">
<EuiToolTip content={tooltip} delay="long" position="right">
<EuiSwitch
compressed={true}

2
src/plugins/charts/public/static/components/text_input.tsx
View file

@ -40,7 +40,7 @@ function TextInputOption<ParamName extends string>({
setValue,
}: TextInputOptionProps<ParamName>) {
return (
<EuiFormRow helpText={helpText} label={label} fullWidth compressed>
<EuiFormRow helpText={helpText} label={label} fullWidth display="rowCompressed">
<EuiFieldText
compressed
fullWidth

6
src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap generated
View file

@ -673,6 +673,7 @@ exports[`DashboardEmptyScreen renders correctly with visualize paragraph 1`] = `
>
<EuiButtonDisplay
aria-label="Create new visualization button"
baseClassName="euiButton"
data-test-subj="addVisualizationButton"
element="button"
iconSide="left"
@ -684,6 +685,11 @@ exports[`DashboardEmptyScreen renders correctly with visualize paragraph 1`] = `
aria-label="Create new visualization button"
className="euiButton euiButton--primary euiButton--small"
data-test-subj="addVisualizationButton"
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<EuiButtonContent

1
src/plugins/data/public/ui/filter_bar/filter_bar.tsx
View file

@ -105,7 +105,6 @@ function FilterBarUI(props: Props) {
isOpen={isAddFilterPopoverOpen}
closePopover={() => setIsAddFilterPopoverOpen(false)}
anchorPosition="downLeft"
withTitle
panelPaddingSize="none"
ownFocus={true}
initialFocus=".filterEditor__hiddenItem"

1
src/plugins/data/public/ui/filter_bar/filter_item.tsx
View file

@ -358,7 +358,6 @@ export function FilterItem(props: Props) {
}}
button={badge}
anchorPosition="downLeft"
withTitle={true}
panelPaddingSize="none"
>
<EuiContextMenu initialPanelId={0} panels={getPanels()} />

1
src/plugins/data/public/ui/filter_bar/filter_options.tsx
View file

@ -166,7 +166,6 @@ class FilterOptionsUI extends Component<Props, State> {
}
anchorPosition="rightUp"
panelPaddingSize="none"
withTitle
repositionOnScroll
>
<EuiPopoverTitle>

1
src/plugins/data/public/ui/query_string_input/language_switcher.tsx
View file

@ -76,7 +76,6 @@ export function QueryLanguageSwitcher(props: Props) {
button={button}
isOpen={isPopoverOpen}
closePopover={() => setIsPopoverOpen(false)}
withTitle
repositionOnScroll
>
<EuiPopoverTitle>

2
src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.tsx
View file

@ -145,7 +145,7 @@ export function ActionBar({
</EuiFormRow>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow displayOnly>
<EuiFormRow display="center">
{isSuccessor ? (
<FormattedMessage
id="discover.context.olderDocumentsDescription"

2
src/plugins/discover/public/application/components/sidebar/discover_field_search.tsx
View file

@ -224,7 +224,7 @@ export function DiscoverFieldSearch({ onChange, value, types }: Props) {
legend={legend}
options={toggleButtons(id)}
idSelected={`${id}-${values[id]}`}
onChange={(optionId) => handleValueChange(id, optionId.replace(`${id}-`, ''))}
onChange={(optionId: string) => handleValueChange(id, optionId.replace(`${id}-`, ''))}
buttonSize="compressed"
isFullWidth
data-test-subj={`${id}ButtonGroup`}

1
src/plugins/embeddable/public/components/panel_options_menu/index.tsx
View file

@ -83,7 +83,6 @@ export const PanelOptionsMenu: React.FC<PanelOptionsMenuProps> = ({
panelPaddingSize="none"
anchorPosition="downRight"
data-test-subj={open ? 'embeddablePanelContextMenuOpen' : 'embeddablePanelContextMenuClosed'}
withTitle
>
<EuiContextMenu initialPanelId="mainMenu" panels={panelDescriptor ? [panelDescriptor] : []} />
</EuiPopover>

1
src/plugins/embeddable/public/lib/panel/panel_header/panel_options_menu.tsx
View file

@ -113,7 +113,6 @@ export class PanelOptionsMenu extends React.Component<PanelOptionsMenuProps, Sta
? 'embeddablePanelContextMenuOpen'
: 'embeddablePanelContextMenuClosed'
}
withTitle
>
<EuiContextMenu
initialPanelId="mainMenu"

111
src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap generated
View file

@ -175,29 +175,25 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
<div
className="euiStep__titleWrapper"
>
<EuiI18n
default={[Function]}
token="euiStep.ariaLabel"
values={
Object {
"status": "incomplete",
}
}
<EuiStepNumber
className="euiStep__circle"
isHollow={true}
number={1}
status="incomplete"
titleSize="s"
>
<EuiStepNumber
aria-label="Incomplete Step 1"
className="euiStep__circle"
isHollow={true}
number={1}
status="incomplete"
titleSize="s"
<span
className="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
>
<div
aria-label="Incomplete Step 1"
className="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
/>
</EuiStepNumber>
</EuiI18n>
<EuiScreenReaderOnly>
<span
className="euiScreenReaderOnly"
>
Step 1 is incomplete
</span>
</EuiScreenReaderOnly>
</span>
</EuiStepNumber>
<EuiTitle
className="euiStep__title"
size="s"
@ -246,6 +242,7 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
onClick={[Function]}
>
<EuiButtonDisplay
baseClassName="euiButton"
data-test-subj="loadSavedObjects"
element="button"
isLoading={false}
@ -256,6 +253,11 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
className="euiButton euiButton--primary"
data-test-subj="loadSavedObjects"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<EuiButtonContent
@ -495,48 +497,31 @@ exports[`bulkCreate should display success message when bulkCreate is successful
<div
className="euiStep__titleWrapper"
>
<EuiI18n
default={[Function]}
token="euiStep.ariaLabel"
values={
Object {
"status": "complete",
}
}
<EuiStepNumber
className="euiStep__circle"
isHollow={false}
number={1}
status="complete"
titleSize="s"
>
<EuiStepNumber
aria-label="Step 1"
className="euiStep__circle"
isHollow={false}
number={1}
status="complete"
titleSize="s"
<span
className="euiStepNumber euiStepNumber--complete euiStep__circle"
>
<div
aria-label="Step 1"
className="euiStepNumber euiStepNumber--complete euiStep__circle"
<EuiIcon
aria-label="Step 1 is complete"
className="euiStepNumber__icon"
size="m"
type="check"
>
<EuiI18n
default="complete"
token="euiStepNumber.isComplete"
>
<EuiIcon
aria-label="complete"
className="euiStepNumber__icon"
size="m"
type="check"
>
<span
aria-label="complete"
className="euiStepNumber__icon"
data-euiicon-type="check"
size="m"
/>
</EuiIcon>
</EuiI18n>
</div>
</EuiStepNumber>
</EuiI18n>
<span
aria-label="Step 1 is complete"
className="euiStepNumber__icon"
data-euiicon-type="check"
size="m"
/>
</EuiIcon>
</span>
</EuiStepNumber>
<EuiTitle
className="euiStep__title"
size="s"
@ -585,6 +570,7 @@ exports[`bulkCreate should display success message when bulkCreate is successful
onClick={[Function]}
>
<EuiButtonDisplay
baseClassName="euiButton"
data-test-subj="loadSavedObjects"
element="button"
isLoading={false}
@ -595,6 +581,11 @@ exports[`bulkCreate should display success message when bulkCreate is successful
className="euiButton euiButton--primary"
data-test-subj="loadSavedObjects"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<EuiButtonContent

1
src/plugins/home/public/application/components/tutorial/__snapshots__/tutorial.test.js.snap generated
View file

@ -70,6 +70,7 @@ exports[`isCloudEnabled is false should render ON_PREM instructions with instruc
<EuiButtonGroup
color="primary"
idSelected="onPrem"
legend="Deployment type"
onChange={[Function]}
options={
Array [

3
src/plugins/home/public/application/components/tutorial/tutorial.js
View file

@ -245,6 +245,9 @@ class TutorialUi extends React.Component {
idSelected={this.state.visibleInstructions}
onChange={this.setVisibleInstructions}
color="primary"
legend={i18n.translate('home.tutorial.selectionLegend', {
defaultMessage: 'Deployment type',
})}
/>
</EuiFlexItem>
</EuiFlexGroup>

2
src/plugins/home/public/application/components/tutorial/tutorial.test.js
View file

@ -133,7 +133,7 @@ describe('isCloudEnabled is false', () => {
);
await loadTutorialPromise;
component.update();
component.find('button#onPremElasticCloud').closest('div').find('input').simulate('change');
component.find('#onPremElasticCloud').first().simulate('click');
component.update();
expect(component.state('visibleInstructions')).toBe('onPremElasticCloud');
});

5
src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/__snapshots__/indices_list.test.tsx.snap generated
View file

@ -63,7 +63,6 @@ exports[`IndicesList should change pages 1`] = `
isOpen={false}
ownFocus={false}
panelPaddingSize="none"
withTitle={true}
>
<EuiContextMenuPanel
hasFocus={true}
@ -157,7 +156,6 @@ exports[`IndicesList should change per page 1`] = `
isOpen={false}
ownFocus={false}
panelPaddingSize="none"
withTitle={true}
>
<EuiContextMenuPanel
hasFocus={true}
@ -273,7 +271,6 @@ exports[`IndicesList should highlight the query in the matches 1`] = `
isOpen={false}
ownFocus={false}
panelPaddingSize="none"
withTitle={true}
>
<EuiContextMenuPanel
hasFocus={true}
@ -375,7 +372,6 @@ exports[`IndicesList should render normally 1`] = `
isOpen={false}
ownFocus={false}
panelPaddingSize="none"
withTitle={true}
>
<EuiContextMenuPanel
hasFocus={true}
@ -541,7 +537,6 @@ exports[`IndicesList updating props should render all new indices 1`] = `
isOpen={false}
ownFocus={false}
panelPaddingSize="none"
withTitle={true}
>
<EuiContextMenuPanel
hasFocus={true}

1
src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/indices_list/indices_list.tsx
View file

@ -144,7 +144,6 @@ export class IndicesList extends React.Component<IndicesListProps, IndicesListSt
isOpen={isPerPageControlOpen}
closePopover={this.closePerPageControl}
panelPaddingSize="none"
withTitle
>
<EuiContextMenuPanel items={items} />
</EuiPopover>

8
src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx
View file

@ -105,15 +105,19 @@ export class ValidatedDualRange extends Component<Props> {
allowEmptyRange,
...rest // TODO: Consider alternatives for spread operator in component
} = this.props;
// Ensure the form row is display as compressed if compressed is true
let evaluatedDisplay = formRowDisplay;
if (!evaluatedDisplay) {
evaluatedDisplay = compressed ? 'rowCompressed' : 'row';
}
return (
<EuiFormRow
compressed={compressed}
fullWidth={fullWidth}
isInvalid={!this.state.isValid}
error={this.state.errorMessage ? [this.state.errorMessage] : []}
label={label}
display={formRowDisplay}
display={evaluatedDisplay}
>
<EuiDualRange
compressed={compressed}

13
src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap generated
View file

@ -59,6 +59,7 @@ exports[`Intro component renders correctly 1`] = `
size="s"
>
<EuiButtonDisplay
baseClassName="euiButton"
data-test-subj="savedObjectEditViewInApp"
element="a"
href="/some-url"
@ -69,8 +70,14 @@ exports[`Intro component renders correctly 1`] = `
<a
className="euiButton euiButton--primary euiButton--small"
data-test-subj="savedObjectEditViewInApp"
disabled={false}
href="/some-url"
rel="noreferrer"
style={
Object {
"minWidth": undefined,
}
}
>
<EuiButtonContent
className="euiButton__content"
@ -132,6 +139,7 @@ exports[`Intro component renders correctly 1`] = `
size="s"
>
<EuiButtonDisplay
baseClassName="euiButton"
color="danger"
data-test-subj="savedObjectEditDelete"
element="button"
@ -144,6 +152,11 @@ exports[`Intro component renders correctly 1`] = `
className="euiButton euiButton--danger euiButton--small"
data-test-subj="savedObjectEditDelete"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<EuiButtonContent

1
src/plugins/share/public/services/share_menu_manager.tsx
View file

@ -89,7 +89,6 @@ export class ShareMenuManager {
isOpen={true}
closePopover={this.onClose}
panelPaddingSize="none"
withTitle
anchorPosition="downLeft"
>
<ShareContextMenu

1
src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
View file

@ -186,7 +186,6 @@ export function openContextMenu(
closePopover={onClose}
panelPaddingSize="none"
anchorPosition="downRight"
withTitle
ownFocus={true}
>
<EuiContextMenu

2
src/plugins/vis_default_editor/public/components/agg_select.tsx
View file

@ -141,7 +141,7 @@ function DefaultEditorAggSelect({
error={errors}
isInvalid={showValidation ? !isValid : false}
fullWidth={true}
compressed
display="rowCompressed"
>
<EuiComboBox
placeholder={i18n.translate('visDefaultEditor.aggSelect.selectAggPlaceholder', {

3
src/plugins/vis_default_editor/public/components/controls/__snapshots__/metric_agg.test.tsx.snap generated
View file

@ -2,9 +2,8 @@
exports[`MetricAggParamEditor should be rendered with default set of props 1`] = `
<EuiFormRow
compressed={true}
describedByIds={Array []}
display="row"
display="rowCompressed"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}

3
src/plugins/vis_default_editor/public/components/controls/__snapshots__/size.test.tsx.snap generated
View file

@ -2,9 +2,8 @@
exports[`SizeParamEditor should init with the default set of props 1`] = `
<EuiFormRow
compressed={true}
describedByIds={Array []}
display="row"
display="rowCompressed"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}

3
src/plugins/vis_default_editor/public/components/controls/__snapshots__/top_aggregate.test.tsx.snap generated
View file

@ -2,9 +2,8 @@
exports[`TopAggregateParamEditor should init with the default set of props 1`] = `
<EuiFormRow
compressed={true}
describedByIds={Array []}
display="row"
display="rowCompressed"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}

2
src/plugins/vis_default_editor/public/components/controls/auto_precision.tsx
View file

@ -29,7 +29,7 @@ function AutoPrecisionParamEditor({ value = false, setValue }: AggParamEditorPro
});
return (
<EuiFormRow compressed>
<EuiFormRow display="rowCompressed">
<EuiSwitch
compressed={true}
label={label}

2
src/plugins/vis_default_editor/public/components/controls/components/simple_number_list.tsx
View file

@ -104,7 +104,7 @@ function SimpleNumberList({
id={`${aggParam.name}-${agg.id}}`}
label={aggParam.displayName || aggParam.name}
fullWidth={true}
compressed
display="rowCompressed"
>
<>
{numbers.map((number, arrayIndex) => (

2
src/plugins/vis_default_editor/public/components/controls/date_ranges.tsx
View file

@ -125,7 +125,7 @@ function DateRangesParamEditor({
);
return (
<EuiFormRow compressed fullWidth>
<EuiFormRow display="rowCompressed" fullWidth>
<>
<EuiText size="xs">
<EuiLink href={services.docLinks.links.date.dateMath} target="_blank">

2
src/plugins/vis_default_editor/public/components/controls/field.tsx
View file

@ -108,7 +108,7 @@ function FieldParamEditor({
isInvalid={showErrorMessage}
fullWidth={true}
error={errors}
compressed
display="rowCompressed"
>
<EuiComboBox
compressed

2
src/plugins/vis_default_editor/public/components/controls/filter.tsx
View file

@ -130,7 +130,7 @@ function FilterRow({
},
})}
fullWidth={true}
compressed
display="rowCompressed"
>
<EuiFieldText
value={customLabel}

2
src/plugins/vis_default_editor/public/components/controls/ip_ranges.tsx
View file

@ -56,7 +56,7 @@ function IpRangesParamEditor({
);
return (
<EuiFormRow fullWidth={true} id={`visEditorIpRange${agg.id}`} compressed>
<EuiFormRow fullWidth={true} id={`visEditorIpRange${agg.id}`} display="rowCompressed">
{agg.params.ipRangeType === IpRangeTypes.MASK ? (
<MaskList
list={value.mask}

2
src/plugins/vis_default_editor/public/components/controls/max_bars.tsx
View file

@ -86,7 +86,7 @@ function MaxBarsParamEditor({
label={label}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
compressed
display="rowCompressed"
>
<EuiFieldNumber
value={value || ''}

7
src/plugins/vis_default_editor/public/components/controls/metric_agg.tsx
View file

@ -53,7 +53,12 @@ function MetricAggParamEditor({
const onChange = useCallback((ev) => setValue(ev.target.value), [setValue]);
return (
<EuiFormRow label={label} fullWidth isInvalid={showValidation && !isValid} compressed>
<EuiFormRow
label={label}
fullWidth
isInvalid={showValidation && !isValid}
display="rowCompressed"
>
<EuiSelect
compressed
fullWidth

2
src/plugins/vis_default_editor/public/components/controls/number_interval.tsx
View file

@ -110,7 +110,7 @@ function NumberIntervalParamEditor({
return (
<EuiFormRow
compressed
display="rowCompressed"
label={label}
fullWidth={true}
isInvalid={showValidation && !isValid}

2
src/plugins/vis_default_editor/public/components/controls/order.tsx
View file

@ -47,7 +47,7 @@ function OrderParamEditor({
label={label}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
compressed
display="rowCompressed"
>
<EuiSelect
options={aggParam.options}

7
src/plugins/vis_default_editor/public/components/controls/order_by.tsx
View file

@ -77,7 +77,12 @@ function OrderByParamEditor({
const options = useAvailableOptions(termsAggFilter, metricAggs, DEFAULT_OPTIONS);
return (
<EuiFormRow label={label} fullWidth isInvalid={showValidation && !isValid} compressed>
<EuiFormRow
label={label}
fullWidth
isInvalid={showValidation && !isValid}
display="rowCompressed"
>
<EuiSelect
options={options}
value={value}

2
src/plugins/vis_default_editor/public/components/controls/percentile_ranks.tsx
View file

@ -52,7 +52,7 @@ function PercentileRanksEditor({
fullWidth={true}
id={`visEditorPercentileRanksLabel${agg.id}`}
isInvalid={showValidation ? !isValid : false}
compressed
display="rowCompressed"
data-test-subj="visEditorPercentileRanks"
>
<NumberList

2
src/plugins/vis_default_editor/public/components/controls/percentiles.tsx
View file

@ -52,7 +52,7 @@ function PercentilesEditor({
fullWidth={true}
id={`visEditorPercentileLabel${agg.id}`}
isInvalid={showValidation ? !isValid : false}
compressed
display="rowCompressed"
>
<NumberList
labelledbyId={`visEditorPercentileLabel${agg.id}-legend`}

2
src/plugins/vis_default_editor/public/components/controls/precision.tsx
View file

@ -37,7 +37,7 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
}
return (
<EuiFormRow label={label} compressed>
<EuiFormRow label={label} display="rowCompressed">
<EuiRange
min={1}
max={services.uiSettings.get('visualization:tileMap:maxPrecision')}

2
src/plugins/vis_default_editor/public/components/controls/radius_ratio_option.tsx
View file

@ -59,7 +59,7 @@ function RadiusRatioOptionControl({ editorStateParams, setStateParamValue }: Agg
return (
<>
<EuiFormRow fullWidth={true} label={label} compressed>
<EuiFormRow fullWidth={true} label={label} display="rowCompressed">
<EuiRange
compressed
fullWidth={true}

2
src/plugins/vis_default_editor/public/components/controls/ranges.tsx
View file

@ -142,7 +142,7 @@ function RangesParamEditor({
}, [hasInvalidRange, setValidity]);
return (
<EuiFormRow compressed fullWidth>
<EuiFormRow display="rowCompressed" fullWidth>
<>
{ranges.map(({ from, to, id }, index) => {
const deleteBtnTitle = i18n.translate(

2
src/plugins/vis_default_editor/public/components/controls/raw_json.tsx
View file

@ -82,7 +82,7 @@ function RawJsonParamEditor({
label={label}
isInvalid={showValidation ? !isFieldValid : false}
fullWidth={true}
compressed
display="rowCompressed"
>
<>
<EuiCodeEditor

4
src/plugins/vis_default_editor/public/components/controls/rows_or_columns.tsx
View file

@ -39,12 +39,14 @@ function RowsOrColumnsControl({ editorStateParams, setStateParamValue }: AggCont
label: i18n.translate('visDefaultEditor.controls.rowsLabel', {
defaultMessage: 'Rows',
}),
'data-test-subj': 'visEditorSplitBy-Rows',
},
{
id: PARAMS.COLUMNS,
label: i18n.translate('visDefaultEditor.controls.columnsLabel', {
defaultMessage: 'Columns',
}),
'data-test-subj': 'visEditorSplitBy-Columns',
},
];
const onChange = useCallback(
@ -54,7 +56,7 @@ function RowsOrColumnsControl({ editorStateParams, setStateParamValue }: AggCont
return (
<>
<EuiFormRow compressed fullWidth={true}>
<EuiFormRow display="rowCompressed" fullWidth={true}>
<EuiButtonGroup
data-test-subj="visEditorSplitBy"
legend={i18n.translate('visDefaultEditor.controls.splitByLegend', {

2
src/plugins/vis_default_editor/public/components/controls/size.tsx
View file

@ -55,7 +55,7 @@ function SizeParamEditor({
label={label}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
compressed
display="rowCompressed"
>
<EuiFieldNumber
value={isUndefined(value) ? '' : value}

2
src/plugins/vis_default_editor/public/components/controls/string.tsx
View file

@ -44,7 +44,7 @@ function StringParamEditor({
className="visEditorAggParam__string"
label={aggParam.displayName || aggParam.name}
fullWidth={true}
compressed
display="rowCompressed"
isInvalid={showValidation ? !isValid : false}
>
<EuiFieldText

2
src/plugins/vis_default_editor/public/components/controls/time_interval.tsx
View file

@ -165,7 +165,7 @@ function TimeIntervalParamEditor({
return (
<EuiFormRow
compressed
display="rowCompressed"
error={error}
fullWidth={true}
helpText={helpText}

2
src/plugins/vis_default_editor/public/components/controls/top_aggregate.tsx
View file

@ -116,7 +116,7 @@ export function TopAggregateParamEditor({
label={label}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
compressed
display="rowCompressed"
>
<EuiSelect
options={options}

2
src/plugins/vis_default_editor/public/components/controls/use_geocentroid.tsx
View file

@ -28,7 +28,7 @@ function UseGeocentroidParamEditor({ value = false, setValue }: AggParamEditorPr
});
return (
<EuiFormRow compressed>
<EuiFormRow display="rowCompressed">
<EuiSwitch
compressed={true}
label={label}

46
src/plugins/vis_default_editor/public/components/sidebar/controls.tsx
View file

@ -18,14 +18,7 @@
*/
import React, { useCallback, useState } from 'react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiButton,
EuiButtonEmpty,
EuiButtonToggle,
EuiToolTip,
} from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiToolTip } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { useDebounce } from 'react-use';
@ -52,7 +45,10 @@ function DefaultEditorControls({
}: DefaultEditorControlsProps) {
const { enableAutoApply } = vis.type.editorConfig;
const [autoApplyEnabled, setAutoApplyEnabled] = useState(false);
const toggleAutoApply = useCallback((e) => setAutoApplyEnabled(e.target.checked), []);
const toggleAutoApply = useCallback(
(nextAutoApplyEnabled) => setAutoApplyEnabled(nextAutoApplyEnabled),
[]
);
const onClickDiscard = useCallback(() => dispatch(discardChanges(vis)), [dispatch, vis]);
useDebounce(
@ -131,19 +127,33 @@ function DefaultEditorControls({
defaultMessage: 'Auto updates the visualization on every change.',
})}
>
<EuiButtonToggle
label={i18n.translate('visDefaultEditor.sidebar.autoApplyChangesAriaLabel', {
defaultMessage: 'Auto apply editor changes',
})}
<EuiButton
className="visEditorSidebar__autoApplyButton"
data-test-subj="visualizeEditorAutoButton"
fill={autoApplyEnabled}
iconType="refresh"
isSelected={autoApplyEnabled}
onChange={toggleAutoApply}
color={autoApplyEnabled ? 'primary' : 'text'}
fill
onClick={() => toggleAutoApply(!autoApplyEnabled)}
size="s"
isIconOnly
/>
minWidth={80}
aria-label={
autoApplyEnabled
? i18n.translate('visDefaultEditor.sidebar.autoApplyChangesLabelOn', {
defaultMessage: 'Auto apply is on',
})
: i18n.translate('visDefaultEditor.sidebar.autoApplyChangesLabelOff', {
defaultMessage: 'Auto apply is off',
})
}
>
{autoApplyEnabled
? i18n.translate('visDefaultEditor.sidebar.autoApplyChangesOn', {
defaultMessage: 'On',
})
: i18n.translate('visDefaultEditor.sidebar.autoApplyChangesOff', {
defaultMessage: 'Off',
})}
</EuiButton>
</EuiToolTip>
)}
</div>

2
src/plugins/vis_type_metric/public/components/metric_vis_options.tsx
View file

@ -86,7 +86,7 @@ function MetricVisOptions({
);
const setColorMode: EuiButtonGroupProps['onChange'] = useCallback(
(id) => setMetricValue('metricColorMode', id as ColorModes),
(id: string) => setMetricValue('metricColorMode', id as ColorModes),
[setMetricValue]
);

2
src/plugins/vis_type_timelion/public/components/timelion_interval.tsx
View file

@ -108,7 +108,7 @@ function TimelionInterval({ value, setValue, setValidity }: TimelionIntervalProp
return (
<EuiFormRow
compressed
display="rowCompressed"
fullWidth
helpText={i18n.translate('timelion.vis.selectIntervalHelpText', {
defaultMessage:

2
src/plugins/vis_type_vislib/public/components/common/truncate_labels.tsx
View file

@ -37,7 +37,7 @@ function TruncateLabelsOption({ disabled, value = null, setValue }: TruncateLabe
defaultMessage: 'Truncate',
})}
fullWidth
compressed
display="rowCompressed"
>
<EuiFieldNumber
disabled={disabled}

3
src/plugins/vis_type_vislib/public/components/options/metrics_axes/__snapshots__/y_extents.test.tsx.snap generated
View file

@ -2,9 +2,8 @@
exports[`YExtents component should init with the default set of props 1`] = `
<EuiFormRow
compressed={true}
describedByIds={Array []}
display="row"
display="rowCompressed"
error={Array []}
fullWidth={true}
hasChildLabel={true}

2
src/plugins/vis_type_vislib/public/components/options/metrics_axes/y_extents.tsx
View file

@ -79,7 +79,7 @@ function YExtents({ scale, setScale, setMultipleValidity }: YExtentsProps) {
}, [isValid, setMultipleValidity]);
return (
<EuiFormRow error={errors} isInvalid={!!errors.length} fullWidth compressed>
<EuiFormRow error={errors} isInvalid={!!errors.length} fullWidth display="rowCompressed">
<>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>

2
src/plugins/vis_type_vislib/public/components/options/point_series/threshold_panel.tsx
View file

@ -114,7 +114,7 @@ function ThresholdPanel({
defaultMessage: 'Line color',
})}
fullWidth
compressed
display="rowCompressed"
>
<EuiColorPicker
compressed

9
src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
View file

@ -17,7 +17,7 @@
* under the License.
*/
import React, { memo, BaseSyntheticEvent, KeyboardEvent } from 'react';
import React, { memo, useState, BaseSyntheticEvent, KeyboardEvent } from 'react';
import classNames from 'classnames';
import { i18n } from '@kbn/i18n';
@ -30,7 +30,7 @@ import {
EuiButtonEmpty,
EuiPopoverProps,
EuiButtonGroup,
EuiButtonGroupOption,
EuiButtonGroupOptionProps,
} from '@elastic/eui';
import { legendColors, LegendItem } from './models';
@ -62,6 +62,7 @@ const VisLegendItemComponent = ({
setColor,
getColor,
}: Props) => {
const [idToSelectedMap, setIdToSelectedMap] = useState({});
/**
* Keydown listener for a legend entry.
* This will close the details panel of this legend entry when pressing Escape.
@ -74,7 +75,7 @@ const VisLegendItemComponent = ({
}
};
const filterOptions: EuiButtonGroupOption[] = [
const filterOptions: EuiButtonGroupOptionProps[] = [
{
id: 'filterIn',
label: i18n.translate('visTypeVislib.vislib.legend.filterForValueButtonAriaLabel', {
@ -96,6 +97,7 @@ const VisLegendItemComponent = ({
];
const handleFilterChange = (id: string) => {
setIdToSelectedMap({ filterIn: id === 'filterIn', filterOut: id === 'filterOut' });
onFilter(item, id !== 'filterIn');
};
@ -112,6 +114,7 @@ const VisLegendItemComponent = ({
options={filterOptions}
onChange={handleFilterChange}
data-test-subj={`legend-${item.label}-filters`}
idToSelectedMap={idToSelectedMap}
/>
<EuiSpacer size="s" />
</>

12
src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap generated
View file

@ -1032,6 +1032,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
size="s"
>
<EuiButtonDisplay
baseClassName="euiButton"
element="button"
fill={true}
iconSide="right"
@ -1043,6 +1044,11 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
<button
className="euiButton euiButton--primary euiButton--small euiButton--fill"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<EuiButtonContent
@ -2062,6 +2068,7 @@ exports[`NewVisModal should render as expected 1`] = `
size="s"
>
<EuiButtonDisplay
baseClassName="euiButton"
element="button"
fill={true}
iconSide="right"
@ -2073,6 +2080,11 @@ exports[`NewVisModal should render as expected 1`] = `
<button
className="euiButton euiButton--primary euiButton--small euiButton--fill"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<EuiButtonContent

9
test/functional/page_objects/visualize_editor_page.ts
View file

@ -97,9 +97,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
}
public async clickSplitDirection(direction: string) {
const radioBtn = await find.byCssSelector(
`[data-test-subj="visEditorSplitBy"][title="${direction}"]`
);
const radioBtn = await find.byCssSelector(`[data-test-subj="visEditorSplitBy-${direction}"]`);
await radioBtn.click();
}
@ -334,10 +332,7 @@ export function VisualizeEditorPageProvider({ getService, getPageObjects }: FtrP
}
public async toggleAutoMode() {
// this is a temporary solution, should be replaced with initial after fixing the EuiToggleButton
// passing the data-test-subj attribute to a checkbox
await find.clickByCssSelector('.visEditorSidebar__controls input[type="checkbox"]');
// await testSubjects.click('visualizeEditorAutoButton');
await testSubjects.click('visualizeEditorAutoButton');
}
public async isApplyEnabled() {

2
test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
View file

@ -12,7 +12,7 @@
"build": "rm -rf './target' && tsc"
},
"devDependencies": {
"@elastic/eui": "29.5.0",
"@elastic/eui": "30.1.1",
"@kbn/plugin-helpers": "1.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",

2
test/plugin_functional/plugins/kbn_sample_panel_action/package.json
View file

@ -12,7 +12,7 @@
"build": "rm -rf './target' && tsc"
},
"devDependencies": {
"@elastic/eui": "29.5.0",
"@elastic/eui": "30.1.1",
"react": "^16.12.0",
"typescript": "4.0.2"
}

2
test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
View file

@ -12,7 +12,7 @@
"build": "rm -rf './target' && tsc"
},
"devDependencies": {
"@elastic/eui": "29.5.0",
"@elastic/eui": "30.1.1",
"@kbn/plugin-helpers": "1.0.0",
"react": "^16.12.0",
"typescript": "4.0.2"

1
x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_with_embeddable_example/drilldowns_with_embeddable_example.tsx
View file

@ -89,7 +89,6 @@ export const DrilldownsWithEmbeddableExample: React.FC = () => {
isOpen={openPopup}
closePopover={() => setOpenPopup(false)}
panelPaddingSize="none"
withTitle
anchorPosition="downLeft"
>
<EuiContextMenu initialPanelId={0} panels={panels} />

1
x-pack/examples/ui_actions_enhanced_examples/public/containers/drilldowns_without_embeddable_example/drilldowns_without_embeddable_example.tsx
View file

@ -77,7 +77,6 @@ export const DrilldownsWithoutEmbeddableExample: React.FC = () => {
isOpen={openPopup}
closePopover={() => setOpenPopup(false)}
panelPaddingSize="none"
withTitle
anchorPosition="downLeft"
>
<EuiContextMenu initialPanelId={0} panels={panels} />

2
x-pack/package.json
View file

@ -267,7 +267,7 @@
"@babel/runtime": "^7.11.2",
"@elastic/datemath": "5.0.3",
"@elastic/ems-client": "7.10.0",
"@elastic/eui": "29.5.0",
"@elastic/eui": "30.1.1",
"@elastic/filesaver": "1.1.2",
"@elastic/node-crypto": "1.2.1",
"@elastic/numeral": "^2.5.0",

1
x-pack/plugins/apm/public/components/alerting/ServiceAlertTrigger/PopoverExpression/index.tsx
View file

@ -20,7 +20,6 @@ export function PopoverExpression(props: Props) {
return (
<EuiPopover
isOpen={popoverOpen}
withTitle
anchorPosition="downLeft"
closePopover={() => setPopoverOpen(false)}
button={

1
x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
View file

@ -131,6 +131,7 @@ class ImageUpload extends React.Component {
onChange={this.changeUrlType}
isFullWidth
className="canvasSidebar__buttonGroup"
legend={strings.getUrlTypeChangeLegend()}
/>
</EuiFormRow>
);

12
x-pack/plugins/canvas/i18n/components.ts
View file

@ -870,6 +870,10 @@ export const ComponentStrings = {
i18n.translate('xpack.canvas.textStylePicker.alignRightOption', {
defaultMessage: 'Align right',
}),
getAlignmentOptionsControlLegend: () =>
i18n.translate('xpack.canvas.textStylePicker.alignmentOptionsControl', {
defaultMessage: 'Alignment options',
}),
getFontColorLabel: () =>
i18n.translate('xpack.canvas.textStylePicker.fontColorLabel', {
defaultMessage: 'Font Color',
@ -886,6 +890,10 @@ export const ComponentStrings = {
i18n.translate('xpack.canvas.textStylePicker.styleUnderlineOption', {
defaultMessage: 'Underline',
}),
getStyleOptionsControlLegend: () =>
i18n.translate('xpack.canvas.textStylePicker.styleOptionsControl', {
defaultMessage: 'Style options',
}),
},
TimePicker: {
getApplyButtonLabel: () =>
@ -1061,6 +1069,10 @@ export const ComponentStrings = {
}),
},
VarConfigVarValueField: {
getBooleanOptionsLegend: () =>
i18n.translate('xpack.canvas.varConfigVarValueField.booleanOptionsLegend', {
defaultMessage: 'Boolean value',
}),
getFalseOption: () =>
i18n.translate('xpack.canvas.varConfigVarValueField.falseOption', {
defaultMessage: 'False',

4
x-pack/plugins/canvas/i18n/ui.ts
View file

@ -181,6 +181,10 @@ export const ArgumentStrings = {
url: URL,
},
}),
getUrlTypeChangeLegend: () =>
i18n.translate('xpack.canvas.uis.arguments.imageUpload.urlTypes.changeLegend', {
defaultMessage: 'Image upload type',
}),
},
Number: {
getDisplayName: () =>

12
x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot generated
View file

@ -146,6 +146,7 @@ exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
aria-labelledby="CanvasAssetManagerLabel"
className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
max={25000}
style={null}
value={0}
/>
</div>
@ -163,6 +164,11 @@ exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
<button
className="euiButton euiButton--primary euiButton--small"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -637,6 +643,7 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
aria-labelledby="CanvasAssetManagerLabel"
className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
max={25000}
style={null}
value={2}
/>
</div>
@ -654,6 +661,11 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
<button
className="euiButton euiButton--primary euiButton--small"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span

20
x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot generated
View file

@ -281,6 +281,11 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
className="euiButton euiButton--primary euiButton--fill"
data-test-subj="canvasCustomElementForm-submit"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -585,6 +590,11 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
className="euiButton euiButton--primary euiButton--fill"
data-test-subj="canvasCustomElementForm-submit"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -887,6 +897,11 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
className="euiButton euiButton--primary euiButton--fill"
data-test-subj="canvasCustomElementForm-submit"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -1187,6 +1202,11 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
className="euiButton euiButton--primary euiButton--fill"
data-test-subj="canvasCustomElementForm-submit"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span

4
x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx
View file

@ -129,7 +129,7 @@ export class CustomElementModal extends PureComponent<Props, State> {
<EuiFormRow
label={strings.getNameInputLabel()}
helpText={strings.getCharactersRemainingDescription(MAX_NAME_LENGTH - name.length)}
compressed
display="rowCompressed"
>
<EuiFieldText
value={name}
@ -161,7 +161,7 @@ export class CustomElementModal extends PureComponent<Props, State> {
<EuiFormRow
className="canvasCustomElementForm__thumbnail"
label={strings.getImageInputLabel()}
compressed
display="rowCompressed"
>
<EuiFilePicker
initialPromptText={strings.getImageFilePickerPlaceholder()}

5
x-pack/plugins/canvas/public/components/datasource/__stories__/__snapshots__/datasource_component.stories.storyshot generated
View file

@ -111,6 +111,11 @@ exports[`Storyshots components/datasource/DatasourceComponent simple datasource
className="euiButton euiButton--secondary euiButton--small euiButton--fill"
disabled={false}
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span

15
x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot generated
View file

@ -122,6 +122,11 @@ exports[`Storyshots components/SavedElementsModal no custom elements 1`] = `
className="euiButton euiButton--primary euiButton--small"
data-test-subj="saved-elements-modal-close-button"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -553,6 +558,11 @@ exports[`Storyshots components/SavedElementsModal with custom elements 1`] = `
className="euiButton euiButton--primary euiButton--small"
data-test-subj="saved-elements-modal-close-button"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -787,6 +797,11 @@ exports[`Storyshots components/SavedElementsModal with text filter 1`] = `
className="euiButton euiButton--primary euiButton--small"
data-test-subj="saved-elements-modal-close-button"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span

684
x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot generated
View file

@ -255,110 +255,98 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<fieldset
className="euiButtonGroup__fieldset"
className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text canvasSidebar__buttonGroup"
disabled={false}
>
<div
className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
<legend
className="euiScreenReaderOnly"
>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
Style options
</legend>
<div
className="euiButtonGroup__buttons"
>
<button
aria-pressed={false}
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
id="bold"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Bold"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Bold"
type="checkbox"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="bold"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorBold"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorBold"
size="m"
/>
<span
className="euiButton__text"
>
</span>
Bold
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</button>
<button
aria-pressed={false}
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
id="italic"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Italic"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Italic"
type="checkbox"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="italic"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorItalic"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorItalic"
size="m"
/>
<span
className="euiButton__text"
>
</span>
Italic
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</button>
<button
aria-pressed={false}
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
id="underline"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Underline"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Underline"
type="checkbox"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="underline"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorUnderline"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorUnderline"
size="m"
/>
<span
className="euiButton__text"
>
</span>
Underline
</span>
</button>
</div>
</span>
</button>
</div>
</fieldset>
</div>
@ -366,110 +354,122 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<fieldset
className="euiButtonGroup__fieldset"
className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text canvasSidebar__buttonGroup"
disabled={false}
>
<div
className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
<legend
className="euiScreenReaderOnly"
>
<div
className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
Alignment options
</legend>
<div
className="euiButtonGroup__buttons"
>
<label
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected euiButtonGroupButton-isIconOnly"
disabled={false}
htmlFor="left"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Align left"
checked={true}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Align left"
type="radio"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button euiButtonGroup__button--selected"
id="left"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorAlignLeft"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorAlignLeft"
size="m"
<input
checked={true}
className="euiScreenReaderOnly"
disabled={false}
id="left"
name="generated-id"
onChange={[Function]}
type="radio"
/>
<span
className="euiButton__text"
>
</span>
Align left
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</label>
<label
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
htmlFor="center"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Align center"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Align center"
type="radio"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="center"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorAlignCenter"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorAlignCenter"
size="m"
<input
checked={false}
className="euiScreenReaderOnly"
disabled={false}
id="center"
name="generated-id"
onChange={[Function]}
type="radio"
/>
<span
className="euiButton__text"
>
</span>
Align center
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</label>
<label
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
htmlFor="right"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Align right"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Align right"
type="radio"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="right"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorAlignRight"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorAlignRight"
size="m"
<input
checked={false}
className="euiScreenReaderOnly"
disabled={false}
id="right"
name="generated-id"
onChange={[Function]}
type="radio"
/>
<span
className="euiButton__text"
>
</span>
Align right
</span>
</button>
</div>
</span>
</label>
</div>
</fieldset>
</div>
@ -733,110 +733,98 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<fieldset
className="euiButtonGroup__fieldset"
className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text canvasSidebar__buttonGroup"
disabled={false}
>
<div
className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
<legend
className="euiScreenReaderOnly"
>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
Style options
</legend>
<div
className="euiButtonGroup__buttons"
>
<button
aria-pressed={false}
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
id="bold"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Bold"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Bold"
type="checkbox"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="bold"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorBold"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorBold"
size="m"
/>
<span
className="euiButton__text"
>
</span>
Bold
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</button>
<button
aria-pressed={false}
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
id="italic"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Italic"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Italic"
type="checkbox"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="italic"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorItalic"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorItalic"
size="m"
/>
<span
className="euiButton__text"
>
</span>
Italic
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</button>
<button
aria-pressed={false}
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
id="underline"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Underline"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Underline"
type="checkbox"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="underline"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorUnderline"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorUnderline"
size="m"
/>
<span
className="euiButton__text"
>
</span>
Underline
</span>
</button>
</div>
</span>
</button>
</div>
</fieldset>
</div>
@ -844,110 +832,122 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<fieldset
className="euiButtonGroup__fieldset"
className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text canvasSidebar__buttonGroup"
disabled={false}
>
<div
className="euiButtonGroup euiButtonGroup--compressed canvasSidebar__buttonGroup"
<legend
className="euiScreenReaderOnly"
>
<div
className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
Alignment options
</legend>
<div
className="euiButtonGroup__buttons"
>
<label
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected euiButtonGroupButton-isIconOnly"
disabled={false}
htmlFor="left"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Align left"
checked={true}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Align left"
type="radio"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button euiButtonGroup__button--selected"
id="left"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorAlignLeft"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorAlignLeft"
size="m"
<input
checked={true}
className="euiScreenReaderOnly"
disabled={false}
id="left"
name="generated-id"
onChange={[Function]}
type="radio"
/>
<span
className="euiButton__text"
>
</span>
Align left
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</label>
<label
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
htmlFor="center"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Align center"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Align center"
type="radio"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="center"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorAlignCenter"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorAlignCenter"
size="m"
<input
checked={false}
className="euiScreenReaderOnly"
disabled={false}
id="center"
name="generated-id"
onChange={[Function]}
type="radio"
/>
<span
className="euiButton__text"
>
</span>
Align center
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</label>
<label
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
disabled={false}
htmlFor="right"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="Align right"
checked={false}
className="euiToggle__input euiButtonToggle__input"
onChange={[Function]}
title="Align right"
type="radio"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonToggle--isIconOnly euiButtonGroup__button"
id="right"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButtonContent__icon"
data-euiicon-type="editorAlignRight"
size="m"
/>
<span
className="euiButton__text euiScreenReaderOnly"
>
<span
className="euiButtonContent__icon"
data-euiicon-type="editorAlignRight"
size="m"
<input
checked={false}
className="euiScreenReaderOnly"
disabled={false}
id="right"
name="generated-id"
onChange={[Function]}
type="radio"
/>
<span
className="euiButton__text"
>
</span>
Align right
</span>
</button>
</div>
</span>
</label>
</div>
</fieldset>
</div>

2
x-pack/plugins/canvas/public/components/text_style_picker/text_style_picker.tsx
View file

@ -162,6 +162,7 @@ export const TextStylePicker: FC<Props> = ({
type="multi"
isIconOnly
className="canvasSidebar__buttonGroup"
legend={strings.getStyleOptionsControlLegend()}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
@ -172,6 +173,7 @@ export const TextStylePicker: FC<Props> = ({
idSelected={align}
onChange={(optionId: string) => doChange('align', optionId)}
className="canvasSidebar__buttonGroup"
legend={strings.getAlignmentOptionsControlLegend()}
/>
</EuiFlexItem>
</EuiFlexGroup>

5
x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/delete_var.stories.storyshot generated
View file

@ -64,6 +64,11 @@ Array [
<button
className="euiButton euiButton--danger euiButton--small euiButton--fill"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span

130
x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot generated
View file

@ -227,69 +227,77 @@ Array [
className="euiFormRow__fieldWrapper"
>
<fieldset
className="euiButtonGroup__fieldset euiButtonGroup__fieldset--fullWidth"
className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text euiButtonGroup--fullWidth"
disabled={false}
>
<div
className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--fullWidth"
<legend
className="euiScreenReaderOnly"
>
<div
className="euiToggle euiToggle--checked euiButtonToggle__wrapper euiButtonGroup__toggle"
Boolean value
</legend>
<div
className="euiButtonGroup__buttons"
>
<label
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
disabled={false}
htmlFor="generated-id-true"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="True"
checked={true}
className="euiToggle__input euiButtonToggle__input"
name="value"
onChange={[Function]}
title="True"
type="radio"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button euiButtonGroup__button--selected"
id="generated-id-true"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButton__text euiButtonGroupButton__textShift"
>
<span
className="euiButton__text"
>
True
</span>
<input
checked={true}
className="euiScreenReaderOnly"
disabled={false}
id="generated-id-true"
name="value"
onChange={[Function]}
type="radio"
/>
True
</span>
</button>
</div>
<div
className="euiToggle euiButtonToggle__wrapper euiButtonGroup__toggle"
</span>
</label>
<label
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
disabled={false}
htmlFor="generated-id-false"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
>
<input
aria-label="False"
checked={false}
className="euiToggle__input euiButtonToggle__input"
name="value"
onChange={[Function]}
title="False"
type="radio"
/>
<button
className="euiButton euiButton--text euiButton--small euiButtonToggle euiButtonGroup__button"
id="generated-id-false"
tabIndex={-1}
type="button"
<span
className="euiButtonContent euiButton__content"
>
<span
className="euiButtonContent euiButton__content"
className="euiButton__text euiButtonGroupButton__textShift"
>
<span
className="euiButton__text"
>
False
</span>
<input
checked={false}
className="euiScreenReaderOnly"
disabled={false}
id="generated-id-false"
name="value"
onChange={[Function]}
type="radio"
/>
False
</span>
</button>
</div>
</span>
</label>
</div>
</fieldset>
</div>
@ -307,6 +315,11 @@ Array [
className="euiButton euiButton--secondary euiButton--small euiButton--fill"
disabled={false}
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -606,6 +619,11 @@ Array [
className="euiButton euiButton--secondary euiButton--small euiButton--fill"
disabled={false}
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -905,6 +923,11 @@ Array [
className="euiButton euiButton--secondary euiButton--small euiButton--fill"
disabled={false}
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span
@ -1180,6 +1203,11 @@ Array [
className="euiButton euiButton--secondary euiButton--small euiButton--fill euiButton-isDisabled"
disabled={true}
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span

1
x-pack/plugins/canvas/public/components/var_config/var_value_field.tsx
View file

@ -54,6 +54,7 @@ export const VarValueField: FC<Props> = ({ type, value, onChange }) => {
}}
buttonSize="compressed"
isFullWidth
legend={strings.getBooleanOptionsLegend()}
/>
);
}

7
x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot generated
View file

@ -14,9 +14,14 @@ exports[`Storyshots components/WorkpadHeader/ElementMenu default 1`] = `
>
<button
aria-label="Add an element"
className="euiButton euiButton--primary euiButton--small canvasElementMenu__popoverButton euiButton--fill"
className="euiButton euiButton--primary euiButton--small euiButton--fill canvasElementMenu__popoverButton"
data-test-subj="add-element-button"
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
type="button"
>
<span

2
x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/pdf_panel.stories.storyshot generated
View file

@ -22,6 +22,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
onClick={[Function]}
style={
Object {
"minWidth": undefined,
"width": "100%",
}
}
@ -62,6 +63,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
className="euiButton euiButton--primary euiButton--small"
style={
Object {
"minWidth": undefined,
"width": "100%",
}
}

4
x-pack/plugins/canvas/public/components/workpad_header/view_menu/custom_interval.tsx
View file

@ -42,7 +42,7 @@ export const CustomInterval = ({ gutterSize, buttonSize, onSubmit, defaultValue
<EuiFormRow
label={strings.getFormLabel()}
helpText={strings.getFormDescription()}
compressed
display="rowCompressed"
>
<EuiFieldText
isInvalid={isInvalid}
@ -54,7 +54,7 @@ export const CustomInterval = ({ gutterSize, buttonSize, onSubmit, defaultValue
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow hasEmptyLabelSpace={true} compressed>
<EuiFormRow hasEmptyLabelSpace={true} display="rowCompressed">
<EuiButton
disabled={isInvalid}
size={buttonSize}

10
x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap generated
View file

@ -9,7 +9,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
font-size: 150px; text-align: center; color: #d3d3d3;
}
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
`;
exports[`Canvas Shareable Workpad API Placed successfully with height specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-height=\\"350\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@ -21,7 +21,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
font-size: 150px; text-align: center; color: #d3d3d3;
}
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
`;
exports[`Canvas Shareable Workpad API Placed successfully with page specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-page=\\"0\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@ -33,7 +33,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
font-size: 150px; text-align: center; color: #d3d3d3;
}
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
`;
exports[`Canvas Shareable Workpad API Placed successfully with width and height specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-width=\\"350\\" kbn-canvas-height=\\"350\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@ -45,7 +45,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
font-size: 150px; text-align: center; color: #d3d3d3;
}
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
`;
exports[`Canvas Shareable Workpad API Placed successfully with width specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-width=\\"400\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@ -57,5 +57,5 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
font-size: 150px; text-align: center; color: #d3d3d3;
}
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
`;

6
x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot generated
View file

@ -1445,7 +1445,7 @@ exports[`Storyshots shareables/Canvas component 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
className="euiPopover euiPopover--anchorUpRight"
id="settings"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -2927,7 +2927,7 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
className="euiPopover euiPopover--anchorUpRight"
id="settings"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -3224,7 +3224,7 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
className="euiPopover euiPopover--anchorUpRight"
id="settings"
onKeyDown={[Function]}
onMouseDown={[Function]}

2
x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap generated
View file

@ -7,5 +7,5 @@ exports[`<App /> App renders properly 1`] = `
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
font-size: 150px; text-align: center; color: #d3d3d3;
}
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div>"
</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><span data-euiicon-type=\\"logoElastic\\"></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></span></button></div></div></div></div></div></div></div></div></div></div>"
`;

4
x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot generated
View file

@ -1398,7 +1398,7 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
className="euiPopover euiPopover--anchorUpRight"
id="settings"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -1649,7 +1649,7 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
className="euiPopover euiPopover--anchorUpRight"
id="settings"
onKeyDown={[Function]}
onMouseDown={[Function]}

6
x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/autoplay_settings.stories.storyshot generated
View file

@ -139,7 +139,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
onFocus={[Function]}
style={
Object {
"minWidth": "auto",
"minWidth": undefined,
}
}
type="submit"
@ -302,7 +302,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
onFocus={[Function]}
style={
Object {
"minWidth": "auto",
"minWidth": undefined,
}
}
type="submit"
@ -465,7 +465,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
onFocus={[Function]}
style={
Object {
"minWidth": "auto",
"minWidth": undefined,
}
}
type="submit"

4
x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/settings.stories.storyshot generated
View file

@ -21,7 +21,7 @@ exports[`Storyshots shareables/Footer/Settings component 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
className="euiPopover euiPopover--anchorUpRight"
id="settings"
onKeyDown={[Function]}
onMouseDown={[Function]}
@ -73,7 +73,7 @@ exports[`Storyshots shareables/Footer/Settings contextual 1`] = `
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
className="euiPopover euiPopover--anchorUpRight"
id="settings"
onKeyDown={[Function]}
onMouseDown={[Function]}

19
x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap generated
View file

@ -8,7 +8,7 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
<div
aria-live="assertive"
aria-modal="true"
class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle"
class="euiPanel euiPopover__panel euiPopover__panel--top"
role="dialog"
style="top: -16px; left: -22px; z-index: 2000;"
>
@ -26,7 +26,7 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
tabindex="0"
>
<div
class="euiPopoverTitle"
class="euiContextMenuPanelTitle"
>
<span
class="euiContextMenu__itemLayout"
@ -98,7 +98,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
<div
aria-live="assertive"
aria-modal="true"
class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen euiPopover__panel-withTitle"
class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen"
role="dialog"
style="top: -16px; left: -22px; z-index: 2000;"
>
@ -116,7 +116,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
tabindex="0"
>
<div
class="euiPopoverTitle"
class="euiContextMenuPanelTitle"
>
<span
class="euiContextMenu__itemLayout"
@ -304,7 +304,6 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
<button
class="euiButton euiButton--primary euiButton--small"
id="generated-id"
style="min-width: auto;"
type="submit"
>
<span
@ -341,7 +340,7 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
<div
aria-live="assertive"
aria-modal="true"
class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle"
class="euiPanel euiPopover__panel euiPopover__panel--top"
role="dialog"
style="top: -16px; left: -22px; z-index: 2000;"
>
@ -359,7 +358,7 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
tabindex="0"
>
<div
class="euiPopoverTitle"
class="euiContextMenuPanelTitle"
>
<span
class="euiContextMenu__itemLayout"
@ -431,7 +430,7 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
<div
aria-live="assertive"
aria-modal="true"
class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen euiPopover__panel-withTitle"
class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen"
role="dialog"
style="top: -16px; left: -22px; z-index: 2000;"
>
@ -449,7 +448,7 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
tabindex="0"
>
<div
class="euiPopoverTitle"
class="euiContextMenuPanelTitle"
>
<span
class="euiContextMenu__itemLayout"
@ -601,4 +600,4 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
</div>
`;
exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle\\" aria-live=\\"assertive\\" role=\\"dialog\\" aria-modal=\\"true\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiPopoverTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;
exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPopover__panel euiPopover__panel--top\\" aria-live=\\"assertive\\" role=\\"dialog\\" aria-modal=\\"true\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;

1
x-pack/plugins/canvas/shareable_runtime/components/footer/settings/settings.tsx
View file

@ -81,7 +81,6 @@ export const SettingsComponent: FC<Props> = ({ refs }) => {
isOpen={isPopoverOpen}
button={button}
panelPaddingSize="none"
withTitle
anchorPosition="upRight"
insert={
refs.stage.current ? { sibling: refs.stage.current, position: 'after' } : undefined

1
x-pack/plugins/cross_cluster_replication/public/app/components/auto_follow_pattern_action_menu/auto_follow_pattern_action_menu.tsx
View file

@ -143,7 +143,6 @@ const AutoFollowPatternActionMenuUI: FunctionComponent<Props> = ({
closePopover={() => setShowPopover(false)}
button={button}
panelPaddingSize="none"
withTitle
repositionOnScroll
>
<EuiContextMenu

1
x-pack/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/context_menu/context_menu.js
View file

@ -93,7 +93,6 @@ export class ContextMenu extends PureComponent {
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover}
panelPaddingSize="none"
withTitle
anchorPosition={anchorPosition}
repositionOnScroll
>

1
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/filterable_users_popover.tsx
View file

@ -45,7 +45,6 @@ export const FilterableUsersPopover: React.FC<IIFilterableUsersPopoverProps> = (
isOpen={isPopoverOpen}
closePopover={closePopover}
panelPaddingSize="none"
withTitle={true}
>
<FilterableUsersList
users={users}

Some files were not shown because too many files have changed in this diff Show more