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

Use smaller and compressed variants of buttons and form components #336

Merged
merged 2 commits into from
Sep 3, 2024
Merged

Use smaller and compressed variants of buttons and form components #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2453c4
Use smaller and compressed varients of buttons and form components
saimedhi Sep 3, 2024
8c81422
Merge branch 'main' into compress-buttons
saimedhi Sep 3, 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
2 changes: 1 addition & 1 deletion public/pages/workflow_detail/tools/tools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export function Tools(props: ToolsProps) {
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiTabs size="m" expand={false}>
<EuiTabs size="s" expand={false}>
{inputTabs.map((tab, idx) => {
return (
<EuiTab
Expand Down
6 changes: 3 additions & 3 deletions public/pages/workflow_detail/workflow_detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useSelector } from 'react-redux';
import { ReactFlowProvider } from 'reactflow';
import { escape } from 'lodash';
import {
EuiButton,
EuiSmallButton,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand Down Expand Up @@ -115,13 +115,13 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
/>
</EuiFlexItem>
<EuiFlexItem grow={7}>
<EuiButton
<EuiSmallButton
style={{ width: '200px' }}
fill={false}
href={constructHrefWithDataSourceId(APP_PATH.WORKFLOWS, dataSourceId)}
>
Return to home
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
) : (
Expand Down
6 changes: 2 additions & 4 deletions public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import React, { useEffect, useState } from 'react';
import { useFormikContext } from 'formik';
import {
EuiButton,
EuiSmallButton,
EuiCompressedFilePicker,
EuiFlexGroup,
Expand Down Expand Up @@ -109,14 +108,13 @@ export function SourceData(props: SourceDataProps) {
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
<EuiSmallButton
fill={false}
style={{ width: '100px' }}
size="s"
onClick={() => setIsEditModalOpen(true)}
>
Edit
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<JsonField
Expand Down
6 changes: 3 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/input_fields/map_array_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
EuiButtonIcon,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiCompressedFormRow,
EuiLink,
EuiPanel,
EuiSmallButton,
Expand Down Expand Up @@ -87,7 +87,7 @@ export function MapArrayField(props: MapArrayFieldProps) {
field.value[0].length > 0;

return (
<EuiFormRow
<EuiCompressedFormRow
fullWidth={true}
key={props.fieldPath}
label={props.label}
Expand Down Expand Up @@ -188,7 +188,7 @@ export function MapArrayField(props: MapArrayFieldProps) {
</div>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFormRow>
</EuiCompressedFormRow>
);
}}
</Field>
Expand Down
5 changes: 2 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/input_fields/number_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
EuiCompressedFormRow,
EuiLink,
EuiText,
EuiFieldNumber,
EuiCompressedFieldNumber,
} from '@elastic/eui';
import { WorkspaceFormValues } from '../../../../../common';
import { camelCaseToTitleString, getInitialValue } from '../../../../utils';
Expand Down Expand Up @@ -49,10 +49,9 @@ export function NumberField(props: NumberFieldProps) {
error={props.showError && getIn(errors, field.name)}
isInvalid={getIn(errors, field.name) && getIn(touched, field.name)}
>
<EuiFieldNumber
<EuiCompressedFieldNumber
{...field}
placeholder={props.placeholder || ''}
compressed={false}
value={field.value || getInitialValue('number')}
onChange={(e) => {
form.setFieldValue(props.fieldPath, e.target.value);
Expand Down
6 changes: 3 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/input_fields/select_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import React from 'react';
import { Field, FieldProps, getIn, useFormikContext } from 'formik';
import {
EuiFormRow,
EuiCompressedFormRow,
EuiSuperSelect,
EuiSuperSelectOption,
EuiText,
Expand All @@ -30,7 +30,7 @@ export function SelectField(props: SelectFieldProps) {
<Field name={props.fieldPath}>
{({ field, form }: FieldProps) => {
return (
<EuiFormRow label={camelCaseToTitleString(props.field.id)}>
<EuiCompressedFormRow label={camelCaseToTitleString(props.field.id)}>
<EuiSuperSelect
options={
props.field.selectOptions
Expand Down Expand Up @@ -63,7 +63,7 @@ export function SelectField(props: SelectFieldProps) {
: undefined
}
/>
</EuiFormRow>
</EuiCompressedFormRow>
);
}}
</Field>
Expand Down
5 changes: 2 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/input_fields/text_field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import React from 'react';
import { Field, FieldProps, getIn, useFormikContext } from 'formik';
import {
EuiFieldText,
EuiCompressedFieldText,
EuiCompressedFormRow,
EuiLink,
EuiText,
Expand Down Expand Up @@ -50,11 +50,10 @@ export function TextField(props: TextFieldProps) {
error={props.showError && getIn(errors, field.name)}
isInvalid={getIn(errors, field.name) && getIn(touched, field.name)}
>
<EuiFieldText
<EuiCompressedFieldText
fullWidth={props.fullWidth}
{...field}
placeholder={props.placeholder || ''}
compressed={false}
value={field.value || getInitialValue('string')}
onChange={(e) => {
form.setFieldValue(props.fieldPath, e.target.value);
Expand Down
5 changes: 2 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiSelect,
EuiCompressedSelect,
EuiSelectOption,
EuiSmallButton,
EuiSpacer,
Expand Down Expand Up @@ -274,9 +274,8 @@ export function InputTransformModal(props: InputTransformModalProps) {
</EuiFlexItem>
<EuiFlexItem>
<>
<EuiSelect
<EuiCompressedSelect
prepend={<EuiText>Expected output for</EuiText>}
compressed={true}
options={outputOptions}
value={selectedOutputOption}
onChange={(e) => {
Expand Down
12 changes: 5 additions & 7 deletions public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { getIn, useFormikContext } from 'formik';
import { useSelector } from 'react-redux';
import {
EuiAccordion,
EuiButtonEmpty,
EuiSmallButtonEmpty,
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
Expand Down Expand Up @@ -199,16 +199,15 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
: 'Preview is unavailable for multiple search request processors'
}
>
<EuiButtonEmpty
<EuiSmallButtonEmpty
disabled={!isInputPreviewAvailable}
style={{ width: '100px', paddingTop: '8px' }}
size="s"
onClick={() => {
setIsInputTransformModalOpen(true);
}}
>
Preview
</EuiButtonEmpty>
</EuiSmallButtonEmpty>
</EuiToolTip>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down Expand Up @@ -249,16 +248,15 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
: 'Preview of model outputs is unavailable for search request processors'
}
>
<EuiButtonEmpty
<EuiSmallButtonEmpty
disabled={!isOutputPreviewAvailable}
style={{ width: '100px', paddingTop: '8px' }}
size="s"
onClick={() => {
setIsOutputTransformModalOpen(true);
}}
>
Preview
</EuiButtonEmpty>
</EuiSmallButtonEmpty>
</EuiToolTip>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
5 changes: 2 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiSelect,
EuiCompressedSelect,
EuiSelectOption,
EuiSmallButton,
EuiSpacer,
Expand Down Expand Up @@ -257,9 +257,8 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
</EuiFlexItem>
<EuiFlexItem>
<>
<EuiSelect
<EuiCompressedSelect
prepend={<EuiText>Expected output for</EuiText>}
compressed={true}
options={outputOptions}
value={selectedOutputOption}
onChange={(e) => {
Expand Down
18 changes: 8 additions & 10 deletions public/pages/workflow_detail/workflow_inputs/search_inputs/configure_search_request.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,11 @@ import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { useFormikContext } from 'formik';
import {
EuiButton,
EuiFieldText,
EuiSmallButton,
EuiCompressedFieldText,
EuiFlexGroup,
EuiFlexItem,
EuiFormRow,
EuiSmallButton,
EuiCompressedFormRow,
EuiSuperSelect,
EuiSuperSelectOption,
EuiText,
Expand Down Expand Up @@ -98,9 +97,9 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiFormRow label="Retrieval index">
<EuiCompressedFormRow label="Retrieval index">
{ingestEnabled ? (
<EuiFieldText
<EuiCompressedFieldText
value={values?.ingest?.index?.name}
readOnly={true}
/>
Expand All @@ -123,17 +122,16 @@ export function ConfigureSearchRequest(props: ConfigureSearchRequestProps) {
isInvalid={selectedIndex === undefined}
/>
)}
</EuiFormRow>
</EuiCompressedFormRow>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
<EuiSmallButton
fill={false}
style={{ width: '100px' }}
size="s"
onClick={() => setIsEditModalOpen(true)}
>
Edit
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<JsonField
Expand Down
5 changes: 2 additions & 3 deletions public/pages/workflow_detail/workflow_inputs/search_inputs/edit_query_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import {
EuiSmallButton,
EuiButton,
EuiContextMenu,
EuiModal,
EuiModalBody,
Expand Down Expand Up @@ -87,13 +86,13 @@ export function EditQueryModal(props: EditQueryModalProps) {
/>
</EuiModalBody>
<EuiModalFooter>
<EuiButton
<EuiSmallButton
onClick={() => props.setModalOpen(false)}
fill={false}
color="primary"
>
Close
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
);
Expand Down
Loading
Loading