Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix various EuiFormControlLayout usages #192779

Merged
merged 18 commits into from
Sep 24, 2024
Merged

Fix various EuiFormControlLayout usages #192779

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
a7e19bf
[EuiFormControlLayout/Delimited] Fix nested inputs missing `controlOn…
cee-chen Sep 12, 2024
bfbe13c
[examples] remove incorrect usage of `EuiFormControlLayout`
cee-chen Sep 12, 2024
7a3e9a0
[EuiDatePicker] Remove unnecessary `EuiFormControlLayout` wrappers
cee-chen Sep 12, 2024
839f756
[EuiFieldText] Remove unnecessary usages of `EuiFormControlLayout`
cee-chen Sep 12, 2024
417782f
[EuiFieldNumber] Remove unnecessary usages of `EuiFormControlLayout`
cee-chen Sep 12, 2024
ae960fd
[Triggers Actions UI] Remove unnecessary EuiFormControlLayout wrapper…
cee-chen Sep 12, 2024
98def99
[EuiFieldSearch] Remove unnecessary `EuiFormControlLayout.onClear` wr…
cee-chen Sep 12, 2024
50ef939
Update snapshots
cee-chen Sep 12, 2024
0bd64d7
Fix API token field missing append/prepend
cee-chen Sep 13, 2024
399ac09
Merge branch 'main' into eui-form-layout-fixes
cee-chen Sep 16, 2024
c46ddf2
Merge branch 'main' into eui-form-layout-fixes
cee-chen Sep 18, 2024
def4600
[PR feeedback] Fix defend workflows UX regression
cee-chen Sep 18, 2024
b0418cd
[PR feedback] Fix security rule schedule append+select styling
cee-chen Sep 18, 2024
661273c
[bonus] Fix incorrect selection state on API key format dropdown
cee-chen Sep 18, 2024
a9bc7a3
Merge branch 'main' into eui-form-layout-fixes
cee-chen Sep 20, 2024
4217d01
Merge branch 'main' into eui-form-layout-fixes
cee-chen Sep 24, 2024
c420e0d
Merge branch 'main' into eui-form-layout-fixes
cee-chen Sep 24, 2024
0b85603
Clean up Lens annotation datepicker UI further
cee-chen Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 40 additions & 43 deletions examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
EuiFlyoutBody,
EuiFlyoutFooter,
EuiFlyoutHeader,
EuiFormControlLayout,
EuiFormRow,
EuiSwitch,
EuiTextArea,
Expand Down Expand Up @@ -128,48 +127,46 @@ export const SavedBookEditor = ({
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiFormControlLayout>
<EuiFormRow
label={i18n.translate('embeddableExamples.savedBook.editor.authorLabel', {
defaultMessage: 'Author',
})}
>
<EuiFieldText
value={authorName ?? ''}
onChange={(e) => attributesManager.authorName.next(e.target.value)}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate('embeddableExamples.savedBook.editor.titleLabel', {
defaultMessage: 'Title',
})}
>
<EuiFieldText
value={bookTitle ?? ''}
onChange={(e) => attributesManager.bookTitle.next(e.target.value)}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate('embeddableExamples.savedBook.editor.pagesLabel', {
defaultMessage: 'Number of pages',
})}
>
<EuiFieldNumber
value={numberOfPages ?? ''}
onChange={(e) => attributesManager.numberOfPages.next(+e.target.value)}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate('embeddableExamples.savedBook.editor.synopsisLabel', {
defaultMessage: 'Synopsis',
})}
>
<EuiTextArea
value={synopsis ?? ''}
onChange={(e) => attributesManager.bookSynopsis.next(e.target.value)}
/>
</EuiFormRow>
</EuiFormControlLayout>
<EuiFormRow
label={i18n.translate('embeddableExamples.savedBook.editor.authorLabel', {
defaultMessage: 'Author',
})}
>
<EuiFieldText
value={authorName ?? ''}
onChange={(e) => attributesManager.authorName.next(e.target.value)}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate('embeddableExamples.savedBook.editor.titleLabel', {
defaultMessage: 'Title',
})}
>
<EuiFieldText
value={bookTitle ?? ''}
onChange={(e) => attributesManager.bookTitle.next(e.target.value)}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate('embeddableExamples.savedBook.editor.pagesLabel', {
defaultMessage: 'Number of pages',
})}
>
<EuiFieldNumber
value={numberOfPages ?? ''}
onChange={(e) => attributesManager.numberOfPages.next(+e.target.value)}
/>
</EuiFormRow>
<EuiFormRow
label={i18n.translate('embeddableExamples.savedBook.editor.synopsisLabel', {
defaultMessage: 'Synopsis',
})}
>
<EuiTextArea
value={synopsis ?? ''}
onChange={(e) => attributesManager.bookSynopsis.next(e.target.value)}
/>
</EuiFormRow>
</EuiFlyoutBody>
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
Expand Down
4 changes: 0 additions & 4 deletions packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
margin-top: $euiSizeS;
}

.lnsConfigPanelNoPadding {
padding: 0;
}

.lnsConfigPanelDate__label {
min-width: 56px; // makes both labels ("from" and "to") the same width
}
Expand Down
50 changes: 14 additions & 36 deletions ...nt-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,7 @@

import { i18n } from '@kbn/i18n';
import React from 'react';
import {
EuiFormRow,
EuiSwitch,
EuiText,
EuiFormControlLayout,
EuiFormLabel,
EuiDatePicker,
} from '@elastic/eui';
import { EuiFormRow, EuiSwitch, EuiText, EuiFormLabel, EuiDatePicker } from '@elastic/eui';
import moment from 'moment';
import type {
PointInTimeEventAnnotationConfig,
Expand Down Expand Up @@ -108,35 +101,20 @@ export const ConfigPanelRangeDatePicker = ({
}) => {
return (
<EuiFormRow display="rowCompressed" fullWidth label={label} className="lnsRowCompressedMargin">
{prependLabel ? (
<EuiFormControlLayout
fullWidth
className="lnsConfigPanelNoPadding"
prepend={
<EuiDatePicker
calendarClassName={calendarClassName}
fullWidth
showTimeSelect
selected={value}
onChange={onChange}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
data-test-subj={dataTestSubj}
prepend={
prependLabel ? (
<EuiFormLabel className="lnsConfigPanelDate__label">{prependLabel}</EuiFormLabel>
}
>
<EuiDatePicker
calendarClassName={calendarClassName}
fullWidth
showTimeSelect
selected={value}
onChange={onChange}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
data-test-subj={dataTestSubj}
/>
</EuiFormControlLayout>
) : (
<EuiDatePicker
calendarClassName={calendarClassName}
fullWidth
showTimeSelect
selected={value}
onChange={onChange}
dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
data-test-subj={dataTestSubj}
/>
)}
) : undefined
}
/>
</EuiFormRow>
);
};
39 changes: 16 additions & 23 deletions x-pack/packages/security/api_key_management/src/components/token_field.tsx
View file
Open in desktop
Copy link
Contributor

@jeramysoucy jeramysoucy Sep 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not look like it is working as expected. The copy icon button is no longer rendering and it's missing the drop-down.

This PR:
Screenshot 2024-09-13 at 6 05 36 PM

Main:
Screenshot 2024-09-13 at 6 13 27 PM

Copy link
Member Author

@cee-chen cee-chen Sep 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me know if this is working now with the latest commit! Thank you so much for catching this! 🙇

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The format drop-down and copy button now appear. The copy button is working, but the format selector is a bit strange. When "Encoded" is selected, it is highlighted in the list, but when "Beats" is selected, "Logstash" is highlighted in the list. When "Logstash" is selected, nothing is highlighted in the list. The format of the key for Beats and Logstash are identical, not sure if that is correct.

I have confirmed the exact same behavior in Main, so I will approve. Not sure if this is an issue with our code or the EUI components. I'll open an issue to look more closely.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issue: #193127

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I poked into this a bit locally and was able to fix the issue! Thankfully just a small oneliner. 661273c

Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
EuiContextMenuPanel,
EuiCopy,
EuiFieldText,
EuiFormControlLayout,
EuiHorizontalRule,
EuiPopover,
EuiSpacer,
Expand All @@ -29,12 +28,24 @@ export interface TokenFieldProps extends Omit<EuiFieldTextProps, 'append'> {
value: string;
}

export const TokenField: FunctionComponent<TokenFieldProps> = (props) => {
export const TokenField: FunctionComponent<TokenFieldProps> = ({ value, ...props }) => {
return (
<EuiFormControlLayout
<EuiFieldText
data-test-subj="apiKeyTokenField"
aria-label={i18n.translate('xpack.security.copyTokenField.tokenLabel', {
defaultMessage: 'Token',
})}
value={value}
style={{
fontFamily: euiThemeVars.euiCodeFontFamily,
fontSize: euiThemeVars.euiFontSizeXS,
backgroundColor: 'transparent',
}}
onFocus={(event) => event.currentTarget.select()}
readOnly
{...props}
append={
<EuiCopy textToCopy={props.value}>
<EuiCopy textToCopy={value}>
{(copyText) => (
<EuiButtonIcon
aria-label={i18n.translate('xpack.security.copyTokenField.copyButton', {
Expand All @@ -48,25 +59,7 @@ export const TokenField: FunctionComponent<TokenFieldProps> = (props) => {
)}
</EuiCopy>
}
style={{ backgroundColor: 'transparent' }}
readOnly
>
<EuiFieldText
data-test-subj="apiKeyTokenField"
controlOnly
aria-label={i18n.translate('xpack.security.copyTokenField.tokenLabel', {
defaultMessage: 'Token',
})}
value={props.value}
style={{
fontFamily: euiThemeVars.euiCodeFontFamily,
fontSize: euiThemeVars.euiFontSizeXS,
backgroundColor: 'transparent',
}}
onFocus={(event) => event.currentTarget.select()}
readOnly
/>
</EuiFormControlLayout>
/>
);
};

Expand Down
1 change: 1 addition & 0 deletions ..._content/components/search_index/crawler/domain_management/add_domain/add_domain_form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export const AddDomainForm: React.FC = () => {
fullWidth
>
<EuiFieldText
controlOnly
autoFocus
value={addDomainFormInputValue}
onChange={(e) => setAddDomainFormInputValue(e.target.value)}
Expand Down
60 changes: 23 additions & 37 deletions ...aps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

38 changes: 15 additions & 23 deletions x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
import React, { Component, Fragment } from 'react';
import {
EuiButton,
EuiFormControlLayout,
EuiFieldText,
EuiPopover,
EuiPopoverTitle,
Expand Down Expand Up @@ -109,32 +108,25 @@ export class IconSelect extends Component {
_renderPopoverButton() {
const { value, svg, label } = this.props.icon;
return (
<EuiFormControlLayout
<EuiFieldText
icon={{ type: 'arrowDown', side: 'right' }}
onClick={this._togglePopover}
onKeyDown={this._handleKeyboardActivity}
value={label || value}
compressed
readOnly
fullWidth
compressed
onKeyDown={this._handleKeyboardActivity}
prepend={
<SymbolIcon
key={value}
className="mapIconSelectSymbol__inputButton"
symbolId={value}
svg={svg}
fill={getIsDarkMode() ? 'rgb(223, 229, 239)' : 'rgb(52, 55, 65)'}
/>
}
append={this.props.append}
>
<EuiFieldText
onClick={this._togglePopover}
onKeyDown={this._handleKeyboardActivity}
value={label || value}
compressed
readOnly
fullWidth
prepend={
<SymbolIcon
key={value}
className="mapIconSelectSymbol__inputButton"
symbolId={value}
svg={svg}
fill={getIsDarkMode() ? 'rgb(223, 229, 239)' : 'rgb(52, 55, 65)'}
/>
}
/>
</EuiFormControlLayout>
/>
);
}

Expand Down
1 change: 1 addition & 0 deletions ...rvability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export function ServiceGroupsList() {
clear={!isEmpty(filter) ? { onClick: clearFilterCallback } : undefined}
>
<EuiFieldText
controlOnly
data-test-subj="apmServiceGroupsListFieldText"
icon="search"
fullWidth
Expand Down
Loading