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 varients of buttons and form components #383

Merged
merged 5 commits into from
Aug 2, 2024
Merged

Use smaller and compressed varients of buttons and form components #383

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e60195a
Use EuiCompressedFormRow
AMoo-Miki Jul 11, 2024
77e7a99
Use EuiCompressedField*
AMoo-Miki Jul 11, 2024
ee92b80
Use EuiCompressedSelect and EuiCompressedSuperSelect
AMoo-Miki Jul 11, 2024
11aa1d6
Use EuiCompressedSwitch
AMoo-Miki Jul 11, 2024
b08b796
Update snapshots
AMoo-Miki Aug 2, 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
30 changes: 15 additions & 15 deletions public/components/gantt_chart_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
*/

import {
EuiFieldNumber,
EuiFormRow,
EuiCompressedFieldNumber,
EuiCompressedFormRow,
EuiPanel,
EuiSpacer,
EuiSuperSelect,
EuiCompressedSuperSelect,
EuiTitle,
} from '@elastic/eui';
import React from 'react';
Expand All @@ -30,39 +30,39 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
<h3>Metrics</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFormRow
<EuiCompressedFormRow
label="Event"
helpText="Gantt chart allows you to compare schedules of the selected field."
>
<EuiSuperSelect
<EuiCompressedSuperSelect
data-test-subj="gantt-chart-editor-label-field"
options={fieldOptions}
valueOfSelected={stateParams.labelField || 'select'}
onChange={(value) => setValue('labelField', value)}
/>
</EuiFormRow>
<EuiFormRow
</EuiCompressedFormRow>
<EuiCompressedFormRow
label="Start time"
helpText="Select a timestamp field to represent the beginning of a schedule."
>
<EuiSuperSelect
<EuiCompressedSuperSelect
data-test-subj="gantt-chart-editor-start-time-field"
options={fieldOptions}
valueOfSelected={stateParams.startTimeField}
onChange={(value) => setValue('startTimeField', value)}
/>
</EuiFormRow>
<EuiFormRow
</EuiCompressedFormRow>
<EuiCompressedFormRow
label="Duration"
helpText="Value of duration field must be a time interval that can be added to the start timestamp field."
>
<EuiSuperSelect
<EuiCompressedSuperSelect
data-test-subj="gantt-chart-editor-duration-field"
options={fieldOptions}
valueOfSelected={stateParams.durationField}
onChange={(value) => setValue('durationField', value)}
/>
</EuiFormRow>
</EuiCompressedFormRow>
</EuiPanel>

<EuiSpacer size="s" />
Expand All @@ -72,16 +72,16 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
<h3>Results</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiFormRow
<EuiCompressedFormRow
label="View number of results"
helpText="Results ordered by descending start time."
>
<EuiFieldNumber
<EuiCompressedFieldNumber
data-test-subj="gantt-chart-editor-size-field"
value={stateParams.size}
onChange={(e) => setValue('size', parseInt(e.target.value, 10))}
/>
</EuiFormRow>
</EuiCompressedFormRow>
</EuiPanel>
</>
);
Expand Down
96 changes: 48 additions & 48 deletions public/components/options_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@

import {
EuiColorPicker,
EuiFieldText,
EuiFormRow,
EuiCompressedFieldText,
EuiCompressedFormRow,
EuiPanel,
EuiSelect,
EuiCompressedSelect,
EuiSpacer,
EuiSwitch,
EuiCompressedSwitch,
EuiTitle,
} from '@elastic/eui';
import React from 'react';
Expand All @@ -22,7 +22,7 @@
VisOptionsProps,
} from '../gantt_vis_type';

export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<GanttParams>) {

Check failure on line 25 in public/components/options_editor.tsx

View workflow job for this annotation

GitHub Actions / Lint 

'aggs' is defined but never used. Allowed unused args must match /^_/u
const legendOrientationOptions: Array<{ value: PlotlyLegendOrientation; text: string }> = [
{ value: 'v', text: 'Vertical' },
{ value: 'h', text: 'Horizontal' },
Expand All @@ -36,18 +36,18 @@
</EuiTitle>
<EuiSpacer size="s" />

<EuiFormRow>
<EuiSwitch
<EuiCompressedFormRow>
<EuiCompressedSwitch
data-test-subj="options-editor-legend-switch"
label="Show legend"
checked={stateParams.showLegend}
onChange={(e) => setValue('showLegend', e.target.checked)}
/>
</EuiFormRow>
</EuiCompressedFormRow>

{stateParams.showLegend && (
<EuiFormRow label="Orientation">
<EuiSelect
<EuiCompressedFormRow label="Orientation">
<EuiCompressedSelect
data-test-subj="options-editor-legend-orientation-select"
options={legendOrientationOptions}
value={stateParams.legendOrientation}
Expand All @@ -56,7 +56,7 @@
}
disabled={!stateParams.showLegend}
/>
</EuiFormRow>
</EuiCompressedFormRow>
)}
</EuiPanel>
);
Expand All @@ -70,22 +70,22 @@
</EuiTitle>
<EuiSpacer size="s" />

<EuiFormRow>
<EuiSwitch
<EuiCompressedFormRow>
<EuiCompressedSwitch
data-test-subj="options-editor-grid-y-switch"
label="Show Y-axis grids"
checked={stateParams.yAxisShowGrid}
onChange={(e) => setValue('yAxisShowGrid', e.target.checked)}
/>
</EuiFormRow>
<EuiFormRow>
<EuiSwitch
</EuiCompressedFormRow>
<EuiCompressedFormRow>
<EuiCompressedSwitch
data-test-subj="options-editor-grid-x-switch"
label="Show X-axis grids"
checked={stateParams.xAxisShowGrid}
onChange={(e) => setValue('xAxisShowGrid', e.target.checked)}
/>
</EuiFormRow>
</EuiCompressedFormRow>
</EuiPanel>
);
};
Expand All @@ -98,9 +98,9 @@
</EuiTitle>
<EuiSpacer size="s" />

<EuiFormRow label="Color">
<EuiCompressedFormRow label="Color">
<EuiColorPicker color={stateParams.colors} onChange={(e) => setValue('colors', e)} />
</EuiFormRow>
</EuiCompressedFormRow>
</EuiPanel>
);
};
Expand Down Expand Up @@ -138,41 +138,41 @@
</EuiTitle>
<EuiSpacer size="s" />

<EuiFormRow label="Position">
<EuiSelect
<EuiCompressedFormRow label="Position">
<EuiCompressedSelect
data-test-subj="options-editor-y-axis-position-select"
options={yAxisPositionOptions}
value={stateParams.yAxisPosition}
onChange={(e) => setValue('yAxisPosition', e.target.value as PlotlyAxisPosition)}
/>
</EuiFormRow>
</EuiCompressedFormRow>

<EuiFormRow>
<EuiSwitch
<EuiCompressedFormRow>
<EuiCompressedSwitch
data-test-subj="options-editor-y-axis-switch"
label="Show Y-axis line"
checked={stateParams.yAxisShowLine}
onChange={(e) => setValue('yAxisShowLine', e.target.checked)}
/>
</EuiFormRow>
<EuiFormRow>
<EuiSwitch
</EuiCompressedFormRow>
<EuiCompressedFormRow>
<EuiCompressedSwitch
data-test-subj="options-editor-y-axis-label-switch"
label="Show Y-axis label"
checked={stateParams.yAxisShowTitle}
onChange={(e) => setValue('yAxisShowTitle', e.target.checked)}
/>
</EuiFormRow>
</EuiCompressedFormRow>

{stateParams.yAxisShowTitle ? (
<EuiFormRow label="Label">
<EuiFieldText
<EuiCompressedFormRow label="Label">
<EuiCompressedFieldText
data-test-subj="options-editor-y-axis-label-input"
placeholder="Label"
value={stateParams.yAxisTitle}
onChange={(e) => setValue('yAxisTitle', e.target.value)}
/>
</EuiFormRow>
</EuiCompressedFormRow>
) : null}
</EuiPanel>
);
Expand All @@ -186,57 +186,57 @@
</EuiTitle>
<EuiSpacer size="s" />

<EuiFormRow label="Position">
<EuiSelect
<EuiCompressedFormRow label="Position">
<EuiCompressedSelect
data-test-subj="options-editor-x-axis-position-select"
options={xAxisPositionOptions}
value={stateParams.xAxisPosition}
onChange={(e) => setValue('xAxisPosition', e.target.value as PlotlyAxisPosition)}
/>
</EuiFormRow>
<EuiFormRow label="Scale type">
<EuiSelect
</EuiCompressedFormRow>
<EuiCompressedFormRow label="Scale type">
<EuiCompressedSelect
data-test-subj="options-editor-x-axis-scale-type-select"
options={axisTypeOptions}
value={stateParams.xAxisType}
onChange={(e) => setValue('xAxisType', e.target.value as PlotlyAxisType)}
/>
</EuiFormRow>
<EuiFormRow label="Time format">
<EuiSelect
</EuiCompressedFormRow>
<EuiCompressedFormRow label="Time format">
<EuiCompressedSelect
data-test-subj="options-editor-x-axis-time-format-select"
options={timeFormatOptions}
value={stateParams.timeFormat}
onChange={(e) => setValue('timeFormat', e.target.value)}
/>
</EuiFormRow>
</EuiCompressedFormRow>

<EuiFormRow>
<EuiSwitch
<EuiCompressedFormRow>
<EuiCompressedSwitch
data-test-subj="options-editor-x-axis-switch"
label="Show X-axis line"
checked={stateParams.xAxisShowLine}
onChange={(e) => setValue('xAxisShowLine', e.target.checked)}
/>
</EuiFormRow>
<EuiFormRow>
<EuiSwitch
</EuiCompressedFormRow>
<EuiCompressedFormRow>
<EuiCompressedSwitch
data-test-subj="options-editor-x-axis-label-switch"
label="Show X-axis label"
checked={stateParams.xAxisShowTitle}
onChange={(e) => setValue('xAxisShowTitle', e.target.checked)}
/>
</EuiFormRow>
</EuiCompressedFormRow>

{stateParams.xAxisShowTitle ? (
<EuiFormRow label="Label">
<EuiFieldText
<EuiCompressedFormRow label="Label">
<EuiCompressedFieldText
data-test-subj="options-editor-x-axis-label-input"
placeholder="Label"
value={stateParams.xAxisTitle}
onChange={(e) => setValue('xAxisTitle', e.target.value)}
/>
</EuiFormRow>
</EuiCompressedFormRow>
) : null}
</EuiPanel>
);
Expand Down
Loading