Skip to content

Commit

Permalink
Use smaller and compressed varients of buttons and form components (#…
Browse files Browse the repository at this point in the history 
…2068) (#2080)

* Use EuiSmallButton



* Use EuiSmallButtonIcon



* Use EuiSmallButtonEmpty



* Use EuiCompressedFormRow



* Use EuiCompressedField*



* Use EuiCompressedSelect and EuiCompressedSuperSelect



* Use EuiCompressedFilePicker



* Use EuiCompressedRadio and EuiCompressedRadioGroup



* Use EuiCompressedSwitch



* Use EuiCompressedEuiTextArea



* Use EuiCompressedComboBox



* Use EuiSmallFilterButton



* Undo unnecessary EuiSmallButton* uses



* Use EuiCompressedSuperDatePicker



* Fix tests and snapshots



* Fix tests and snapshots



---------

cherry-picked 69d12ce

Signed-off-by: Miki <[email protected]>
  • Loading branch information
@AMoo-Miki
AMoo-Miki authored Aug 21, 2024
1 parent 86647ee commit d543458
Show file tree
Hide file tree
Showing 196 changed files with 8,672 additions and 7,188 deletions.
800 changes: 400 additions & 400 deletions public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
View file

Large diffs are not rendered by default.

214 changes: 138 additions & 76 deletions public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
View file

Large diffs are not rendered by default.

112 changes: 56 additions & 56 deletions public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
View file

Large diffs are not rendered by default.

68 changes: 34 additions & 34 deletions public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,9 +403,9 @@ exports[`Trace Config component renders empty trace config 1`] = `
<div
className="euiAccordion__padding--l"
>
<EuiFormRow
<EuiCompressedFormRow
describedByIds={Array []}
display="row"
display="rowCompressed"
fullWidth={false}
hasChildLabel={true}
hasEmptyLabelSpace={false}
Expand All @@ -414,7 +414,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
labelType="label"
>
<div
className="euiFormRow"
className="euiFormRow euiFormRow--compressed"
id="random_html_id-row"
>
<div
Expand All @@ -437,11 +437,11 @@ exports[`Trace Config component renders empty trace config 1`] = `
<div
className="euiFormRow__fieldWrapper"
>
<EuiComboBox
<EuiCompressedComboBox
aria-describedby="random_html_id-help-0"
aria-label="Select trace groups"
async={false}
compressed={false}
compressed={true}
data-test-subj="traceGroupsComboBox"
fullWidth={false}
id="random_html_id"
Expand All @@ -461,14 +461,14 @@ exports[`Trace Config component renders empty trace config 1`] = `
aria-expanded={false}
aria-haspopup="listbox"
aria-label="Select trace groups"
className="euiComboBox"
className="euiComboBox euiComboBox--compressed"
data-test-subj="traceGroupsComboBox"
onKeyDown={[Function]}
role="combobox"
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
compressed={false}
compressed={true}
fullWidth={false}
hasSelectedOptions={false}
id="random_html_id"
Expand All @@ -491,7 +491,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
value=""
>
<EuiFormControlLayout
compressed={false}
compressed={true}
fullWidth={false}
icon={
Object {
Expand All @@ -506,13 +506,13 @@ exports[`Trace Config component renders empty trace config 1`] = `
}
>
<div
className="euiFormControlLayout"
className="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<div
className="euiComboBox__inputWrap"
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
data-test-subj="comboBoxInput"
onClick={[Function]}
tabIndex={-1}
Expand Down Expand Up @@ -583,7 +583,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
</AutosizeInput>
</div>
<EuiFormControlLayoutIcons
compressed={false}
compressed={true}
icon={
Object {
"aria-label": "Open list of options",
Expand All @@ -604,7 +604,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
data-test-subj="comboBoxToggleListButton"
iconRef={[Function]}
onClick={[Function]}
size="m"
size="s"
type="arrowDown"
>
<button
Expand All @@ -617,19 +617,19 @@ exports[`Trace Config component renders empty trace config 1`] = `
<EuiIcon
aria-hidden="true"
className="euiFormControlLayoutCustomIcon__icon"
size="m"
size="s"
type="arrowDown"
>
<EuiIconBeaker
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
role="img"
style={null}
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height={16}
role="img"
Expand All @@ -653,7 +653,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
</EuiFormControlLayout>
</EuiComboBoxInput>
</div>
</EuiComboBox>
</EuiCompressedComboBox>
<EuiFormHelpText
className="euiFormRow__text"
id="random_html_id-help-0"
Expand All @@ -668,7 +668,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
</EuiFormHelpText>
</div>
</div>
</EuiFormRow>
</EuiCompressedFormRow>
<EuiSpacer>
<div
className="euiSpacer euiSpacer--l"
Expand Down Expand Up @@ -1336,9 +1336,9 @@ exports[`Trace Config component renders with one trace selected 1`] = `
<div
className="euiAccordion__padding--l"
>
<EuiFormRow
<EuiCompressedFormRow
describedByIds={Array []}
display="row"
display="rowCompressed"
fullWidth={false}
hasChildLabel={true}
hasEmptyLabelSpace={false}
Expand All @@ -1347,7 +1347,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
labelType="label"
>
<div
className="euiFormRow"
className="euiFormRow euiFormRow--compressed"
id="random_html_id-row"
>
<div
Expand All @@ -1370,11 +1370,11 @@ exports[`Trace Config component renders with one trace selected 1`] = `
<div
className="euiFormRow__fieldWrapper"
>
<EuiComboBox
<EuiCompressedComboBox
aria-describedby="random_html_id-help-0"
aria-label="Select trace groups"
async={false}
compressed={false}
compressed={true}
data-test-subj="traceGroupsComboBox"
fullWidth={false}
id="random_html_id"
Expand All @@ -1394,14 +1394,14 @@ exports[`Trace Config component renders with one trace selected 1`] = `
aria-expanded={false}
aria-haspopup="listbox"
aria-label="Select trace groups"
className="euiComboBox"
className="euiComboBox euiComboBox--compressed"
data-test-subj="traceGroupsComboBox"
onKeyDown={[Function]}
role="combobox"
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
compressed={false}
compressed={true}
fullWidth={false}
hasSelectedOptions={false}
id="random_html_id"
Expand All @@ -1424,7 +1424,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
value=""
>
<EuiFormControlLayout
compressed={false}
compressed={true}
fullWidth={false}
icon={
Object {
Expand All @@ -1439,13 +1439,13 @@ exports[`Trace Config component renders with one trace selected 1`] = `
}
>
<div
className="euiFormControlLayout"
className="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<div
className="euiComboBox__inputWrap"
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
data-test-subj="comboBoxInput"
onClick={[Function]}
tabIndex={-1}
Expand Down Expand Up @@ -1516,7 +1516,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
</AutosizeInput>
</div>
<EuiFormControlLayoutIcons
compressed={false}
compressed={true}
icon={
Object {
"aria-label": "Open list of options",
Expand All @@ -1537,7 +1537,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
data-test-subj="comboBoxToggleListButton"
iconRef={[Function]}
onClick={[Function]}
size="m"
size="s"
type="arrowDown"
>
<button
Expand All @@ -1550,19 +1550,19 @@ exports[`Trace Config component renders with one trace selected 1`] = `
<EuiIcon
aria-hidden="true"
className="euiFormControlLayoutCustomIcon__icon"
size="m"
size="s"
type="arrowDown"
>
<EuiIconArrowDown
aria-hidden={true}
className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
focusable="false"
role="img"
style={null}
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
focusable="false"
height={16}
role="img"
Expand All @@ -1587,7 +1587,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
</EuiFormControlLayout>
</EuiComboBoxInput>
</div>
</EuiComboBox>
</EuiCompressedComboBox>
<EuiFormHelpText
className="euiFormRow__text"
id="random_html_id-help-0"
Expand All @@ -1602,7 +1602,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
</EuiFormHelpText>
</div>
</div>
</EuiFormRow>
</EuiCompressedFormRow>
<EuiSpacer>
<div
className="euiSpacer euiSpacer--l"
Expand Down
16 changes: 8 additions & 8 deletions public/components/application_analytics/components/app_table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import '../app_analytics.scss';
import {
EuiBadge,
EuiButton,
EuiSmallButton,
EuiContextMenuItem,
EuiContextMenuPanel,
EuiFlexGroup,
Expand Down Expand Up @@ -141,14 +141,14 @@ export function AppTable(props: AppTableProps) {
};

const popoverButton = (
<EuiButton
<EuiSmallButton
data-test-subj="appAnalyticsActionsButton"
iconType="arrowDown"
iconSide="right"
onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
>
Actions
</EuiButton>
</EuiSmallButton>
);

const popoverItems: ReactElement[] = [
Expand Down Expand Up @@ -283,9 +283,9 @@ export function AppTable(props: AppTableProps) {
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem>
<EuiButton fill href="#/create">
<EuiSmallButton fill href="#/create">
{createButtonText}
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageContentHeaderSection>
Expand Down Expand Up @@ -323,12 +323,12 @@ export function AppTable(props: AppTableProps) {
<EuiSpacer size="m" />
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiButton fullWidth={false} href={`#/create`}>
<EuiSmallButton fullWidth={false} href={`#/create`}>
{createButtonText}
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
{/* <EuiFlexItem grow={false}>
<EuiButton fullWidth={false}>Add sample applications</EuiButton>
<EuiSmallButton fullWidth={false}>Add sample applications</EuiSmallButton>
</EuiFlexItem> */}
</EuiFlexGroup>
<EuiSpacer size="xxl" />
Expand Down
6 changes: 3 additions & 3 deletions public/components/application_analytics/components/config_components/log_config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
EuiText,
EuiSpacer,
EuiButton,
EuiFormRow,
EuiCompressedFormRow,
EuiFlexItem,
EuiBadge,
EuiOverlayMask,
Expand Down Expand Up @@ -127,7 +127,7 @@ export const LogConfig = (props: LogConfigProps) => {
</EuiCallOut>
</EuiFlexItem>
<EuiFlexItem>
<EuiFormRow
<EuiCompressedFormRow
label="Base Query"
helpText="The default logs view in the application will be filtered by this query."
>
Expand Down Expand Up @@ -157,7 +157,7 @@ export const LogConfig = (props: LogConfigProps) => {
PPL
</EuiBadge>
</EuiFlexItem>
</EuiFormRow>
</EuiCompressedFormRow>
</EuiFlexItem>
</EuiFlexGroup>
</EuiAccordion>
Expand Down
10 changes: 5 additions & 5 deletions public/components/application_analytics/components/config_components/service_config.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import {
EuiAccordion,
EuiBadge,
EuiButton,
EuiComboBox,
EuiFormRow,
EuiCompressedComboBox,
EuiCompressedFormRow,
EuiOverlayMask,
EuiSpacer,
EuiText,
Expand Down Expand Up @@ -167,8 +167,8 @@ export const ServiceConfig = (props: ServiceConfigProps) => {
}}
paddingSize="l"
>
<EuiFormRow label="Services & entities">
<EuiComboBox
<EuiCompressedFormRow label="Services & entities">
<EuiCompressedComboBox
aria-label="Select services and entities"
placeholder="Select services and entities"
options={services}
Expand All @@ -177,7 +177,7 @@ export const ServiceConfig = (props: ServiceConfigProps) => {
isClearable={false}
data-test-subj="servicesEntitiesComboBox"
/>
</EuiFormRow>
</EuiCompressedFormRow>
<EuiSpacer />
<ServiceMap
serviceMap={serviceMap}
Expand Down
Loading

0 comments on commit d543458

Please sign in to comment.