Skip to content

Commit

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

* Use EuiSmallButton

Signed-off-by: Miki <miki@amazon.com>
  • Loading branch information
@AMoo-Miki
AMoo-Miki authored Aug 5, 2024
1 parent c742818 commit 7e742dc
Show file tree
Hide file tree
Showing 18 changed files with 200 additions and 183 deletions.
20 changes: 10 additions & 10 deletions public/components/__snapshots__/vector_upload_options.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@ Object {
/>
<div
aria-label="form-row-for-file-picker"
class="euiFormRow"
class="euiFormRow euiFormRow--compressed"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
>
<div
class="euiFilePicker euiFilePicker--large"
class="euiFilePicker euiFilePicker--large euiFilePicker--compressed"
>
<div
class="euiFilePicker__wrap"
Expand Down Expand Up @@ -135,14 +135,14 @@ Object {
class="euiSpacer euiSpacer--m"
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
aria-label="map-name-text-field"
class="euiFieldText"
class="euiFieldText euiFieldText--compressed"
data-test-subj="customIndex"
data-testid="customIndex"
id="customIndex"
Expand Down Expand Up @@ -206,7 +206,7 @@ Object {
>
<button
aria-label="import-file-button"
class="euiButton euiButton--primary euiButton--fill"
class="euiButton euiButton--primary euiButton--small euiButton--fill"
id="submitButton"
type="button"
>
Expand Down Expand Up @@ -262,14 +262,14 @@ Object {
/>
<div
aria-label="form-row-for-file-picker"
class="euiFormRow"
class="euiFormRow euiFormRow--compressed"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
>
<div
class="euiFilePicker euiFilePicker--large"
class="euiFilePicker euiFilePicker--large euiFilePicker--compressed"
>
<div
class="euiFilePicker__wrap"
Expand Down Expand Up @@ -358,14 +358,14 @@ Object {
class="euiSpacer euiSpacer--m"
/>
<div
class="euiFormControlLayout"
class="euiFormControlLayout euiFormControlLayout--compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
aria-label="map-name-text-field"
class="euiFieldText"
class="euiFieldText euiFieldText--compressed"
data-test-subj="customIndex"
data-testid="customIndex"
id="customIndex"
Expand Down Expand Up @@ -429,7 +429,7 @@ Object {
>
<button
aria-label="import-file-button"
class="euiButton euiButton--primary euiButton--fill"
class="euiButton euiButton--primary euiButton--small euiButton--fill"
id="submitButton"
type="button"
>
Expand Down
22 changes: 11 additions & 11 deletions public/components/filter_bar/__snapshots__/filter_editor.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ exports[`renders one filter inside filter bar 1`] = `
className="globalFilterItem__editorForm"
>
<EuiForm>
<EuiFormRow
<EuiCompressedFormRow
describedByIds={Array []}
display="row"
display="rowCompressed"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
Expand All @@ -33,26 +33,26 @@ exports[`renders one filter inside filter bar 1`] = `
value="\\"{}\\""
width="100%"
/>
</EuiFormRow>
</EuiCompressedFormRow>
<div>
<EuiSpacer
size="m"
/>
<EuiFormRow
<EuiCompressedFormRow
describedByIds={Array []}
display="row"
display="rowCompressed"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label="Custom label"
labelType="label"
>
<EuiFieldText
<EuiCompressedFieldText
fullWidth={true}
onChange={[Function]}
value="mylabel"
/>
</EuiFormRow>
</EuiCompressedFormRow>
</div>
<EuiSpacer
size="m"
Expand All @@ -65,25 +65,25 @@ exports[`renders one filter inside filter bar 1`] = `
<EuiFlexItem
grow={false}
>
<EuiButton
<EuiSmallButton
data-test-subj="saveFilter"
fill={true}
isDisabled={false}
onClick={[Function]}
>
Save
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiButtonEmpty
<EuiSmallButtonEmpty
data-test-subj="cancelSaveFilter"
flush="right"
onClick={[MockFunction]}
>
Cancel
</EuiButtonEmpty>
</EuiSmallButtonEmpty>
</EuiFlexItem>
<EuiFlexItem />
</EuiFlexGroup>
Expand Down
26 changes: 13 additions & 13 deletions public/components/filter_bar/filter_editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
*/

import {
EuiButton,
EuiButtonEmpty,
EuiSmallButton,
EuiSmallButtonEmpty,
EuiCodeEditor,
EuiFieldText,
EuiCompressedFieldText,
EuiFlexGroup,
EuiFlexItem,
EuiForm,
EuiFormRow,
EuiCompressedFormRow,
EuiPopoverTitle,
EuiSpacer,
} from '@elastic/eui';
Expand Down Expand Up @@ -39,7 +39,7 @@ export const FilterEditor = ({ content, label, onSubmit, onCancel }: Props) => {

const renderEditor = () => {
return (
<EuiFormRow
<EuiCompressedFormRow
label={i18n.translate('maps.filter.filterEditor.parameters', {
defaultMessage: 'Spatial filter parameters',
})}
Expand All @@ -52,7 +52,7 @@ export const FilterEditor = ({ content, label, onSubmit, onCancel }: Props) => {
width="100%"
height="250px"
/>
</EuiFormRow>
</EuiCompressedFormRow>
);
};
return (
Expand All @@ -68,35 +68,35 @@ export const FilterEditor = ({ content, label, onSubmit, onCancel }: Props) => {
{renderEditor()}
<div>
<EuiSpacer size="m" />
<EuiFormRow
<EuiCompressedFormRow
fullWidth={true}
label={i18n.translate('maps.filter.filterEditor.createCustomLabelInputLabel', {
defaultMessage: 'Custom label',
})}
>
<EuiFieldText
<EuiCompressedFieldText
fullWidth={true}
value={filterLabel}
onChange={(event) => setFilterLabel(event.target.value)}
/>
</EuiFormRow>
</EuiCompressedFormRow>
</div>
<EuiSpacer size="m" />
<EuiFlexGroup direction="rowReverse" alignItems="center" responsive={false}>
<EuiFlexItem grow={false}>
<EuiButton
<EuiSmallButton
fill
onClick={() => onSubmit(filterContent, filterLabel)}
isDisabled={!isFilterValid(filterContent)}
data-test-subj="saveFilter"
>
{'Save'}
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty flush="right" onClick={onCancel} data-test-subj="cancelSaveFilter">
<EuiSmallButtonEmpty flush="right" onClick={onCancel} data-test-subj="cancelSaveFilter">
{'Cancel'}
</EuiButtonEmpty>
</EuiSmallButtonEmpty>
</EuiFlexItem>
<EuiFlexItem />
</EuiFlexGroup>
Expand Down
4 changes: 2 additions & 2 deletions public/components/filter_bar/filter_options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiButtonIcon, EuiContextMenu, EuiPopover, EuiPopoverTitle } from '@elastic/eui';
import { EuiSmallButtonIcon, EuiContextMenu, EuiPopover, EuiPopoverTitle } from '@elastic/eui';
import React, { useState } from 'react';
import { i18n } from '@osd/i18n';

Expand Down Expand Up @@ -99,7 +99,7 @@ export const FilterOptions = ({
isOpen={isPopoverOpen}
closePopover={closePopover}
button={
<EuiButtonIcon
<EuiSmallButtonIcon
onClick={togglePopover}
iconType="filter"
aria-label={i18n.translate('maps.filter.options.changeAllFiltersButtonLabel', {
Expand Down
Loading

0 comments on commit 7e742dc

Please sign in to comment.