Skip to content

Commit 3203e43

Browse files
AMoo-MikiAMoo-Miki
authored
[Look&Feel] Use smaller and compressed varients of buttons and form components (#826)
1 parent 7940942 commit 3203e43

File tree

92 files changed

+702
-701
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

92 files changed

+702
-701
lines changed

‎public/components/ConfigCell/ConfigCell.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
* GitHub history for details.
1010
*/
1111

12-
import { EuiText, EuiFormRow, EuiFormRowProps } from '@elastic/eui';
12+
import { EuiText, EuiCompressedFormRow, EuiFormRowProps } from '@elastic/eui';
1313
import React from 'react';
1414

1515
export const FixedWidthRow = (props: EuiFormRowProps) => (
16-
<EuiFormRow {...props} style={{ width: '250px' }} />
16+
<EuiCompressedFormRow {...props} style={{ width: '250px' }} />
1717
);
1818

1919
interface ConfigCellProps {

‎public/components/CreateDetectorButtons/CreateDetectorButtons.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* GitHub history for details.
1010
*/
1111

12-
import { EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
12+
import { EuiFlexGroup, EuiFlexItem, EuiSmallButton } from '@elastic/eui';
1313
import React from 'react';
1414
import { APP_PATH, PLUGIN_NAME } from '../../utils/constants';
1515
import { useLocation } from 'react-router-dom';
@@ -23,27 +23,27 @@ export const CreateDetectorButtons = () => {
2323
const createDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.CREATE_DETECTOR}`, dataSourceId, false);
2424

2525
const sampleDetectorUrl = `${PLUGIN_NAME}#` + constructHrefWithDataSourceId(`${APP_PATH.OVERVIEW}`, dataSourceId, false);
26-
26+
2727
return (
2828
<EuiFlexGroup direction="row" gutterSize="m" justifyContent="center">
2929
<EuiFlexItem grow={false}>
30-
<EuiButton
30+
<EuiSmallButton
3131
style={{ width: '200px' }}
3232
href={sampleDetectorUrl}
3333
data-test-subj="sampleDetectorButton"
3434
>
3535
Try a sample detector
36-
</EuiButton>
36+
</EuiSmallButton>
3737
</EuiFlexItem>
3838
<EuiFlexItem grow={false}>
39-
<EuiButton
39+
<EuiSmallButton
4040
style={{ width: '200px' }}
4141
fill
4242
href={createDetectorUrl}
4343
data-test-subj="createDetectorButton"
4444
>
4545
Create detector
46-
</EuiButton>
46+
</EuiSmallButton>
4747
</EuiFlexItem>
4848
</EuiFlexGroup>
4949
);

‎public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import React, { useState } from 'react';
77
import {
88
EuiText,
99
EuiOverlayMask,
10-
EuiButton,
11-
EuiButtonEmpty,
10+
EuiSmallButton,
11+
EuiSmallButtonEmpty,
1212
EuiModal,
1313
EuiModalHeader,
1414
EuiModalFooter,
@@ -51,14 +51,14 @@ export const ConfirmUnlinkDetectorModal = (
5151
</EuiModalBody>
5252
<EuiModalFooter>
5353
{isLoading ? null : (
54-
<EuiButtonEmpty
54+
<EuiSmallButtonEmpty
5555
data-test-subj="cancelUnlinkButton"
5656
onClick={props.onHide}
5757
>
5858
Cancel
59-
</EuiButtonEmpty>
59+
</EuiSmallButtonEmpty>
6060
)}
61-
<EuiButton
61+
<EuiSmallButton
6262
data-test-subj="confirmUnlinkButton"
6363
color="primary"
6464
fill
@@ -70,7 +70,7 @@ export const ConfirmUnlinkDetectorModal = (
7070
}}
7171
>
7272
{'Remove association'}
73-
</EuiButton>
73+
</EuiSmallButton>
7474
</EuiModalFooter>
7575
</EuiModal>
7676
</EuiOverlayMask>

‎public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
EuiSpacer,
1111
EuiInMemoryTable,
1212
EuiFlyoutBody,
13-
EuiButton,
13+
EuiSmallButton,
1414
EuiFlyout,
1515
EuiFlexItem,
1616
EuiFlexGroup,
@@ -85,7 +85,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
8585
const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
8686
const refs = indexPattern.references as References[];
8787
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
88-
setDataSourceId(foundDataSourceId);
88+
setDataSourceId(foundDataSourceId);
8989
} catch (error) {
9090
console.error("Error fetching index pattern:", error);
9191
}
@@ -270,7 +270,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
270270
getDetectorList(
271271
getAllDetectorsQueryParamsWithDataSourceId(dataSourceId)
272272
)
273-
);
273+
);
274274
};
275275

276276
const handleUnlinkDetectorAction = (detector: DetectorListItem) => {
@@ -371,7 +371,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
371371
</EuiFlexItem>
372372
<EuiFlexItem grow={false}>
373373
<div>
374-
<EuiButton
374+
<EuiSmallButton
375375
data-test-subj="associateDetectorButton"
376376
fill
377377
disabled={associationLimitReached}
@@ -381,7 +381,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
381381
}}
382382
>
383383
Associate a detector
384-
</EuiButton>
384+
</EuiSmallButton>
385385
</div>
386386
</EuiFlexItem>
387387
</EuiFlexGroup>

‎public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AddAnomalyDetector.tsx

+27-27
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,21 @@ import {
99
EuiFlyoutBody,
1010
EuiFlyoutFooter,
1111
EuiTitle,
12-
EuiButton,
12+
EuiSmallButton,
1313
EuiFormFieldset,
1414
EuiCheckableCard,
1515
EuiSpacer,
1616
EuiIcon,
1717
EuiText,
18-
EuiSwitch,
19-
EuiFormRow,
20-
EuiFieldText,
21-
EuiCheckbox,
18+
EuiCompressedSwitch,
19+
EuiCompressedFormRow,
20+
EuiCompressedFieldText,
21+
EuiCompressedCheckbox,
2222
EuiFlexItem,
2323
EuiFlexGroup,
24-
EuiFieldNumber,
24+
EuiCompressedFieldNumber,
2525
EuiCallOut,
26-
EuiButtonEmpty,
26+
EuiSmallButtonEmpty,
2727
EuiPanel,
2828
} from '@elastic/eui';
2929
import './styles.scss';
@@ -141,7 +141,7 @@ function AddAnomalyDetector({
141141
const indexPattern = await getSavedObjectsClient().get('index-pattern', indexPatternId);
142142
const refs = indexPattern.references as References[];
143143
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
144-
setDataSourceId(foundDataSourceId);
144+
setDataSourceId(foundDataSourceId);
145145
} catch (error) {
146146
console.error("Error fetching index pattern:", error);
147147
}
@@ -167,7 +167,7 @@ function AddAnomalyDetector({
167167
}
168168
fetchData();
169169
createEmbeddable();
170-
}, [dataSourceId]);
170+
}, [dataSourceId]);
171171

172172
const [isShowVis, setIsShowVis] = useState(false);
173173
const [accordionsOpen, setAccordionsOpen] = useState({ modelFeatures: true });
@@ -311,7 +311,7 @@ function AddAnomalyDetector({
311311
{title}
312312
</h4>
313313
</EuiTitle>
314-
<EuiSwitch
314+
<EuiCompressedSwitch
315315
label="Show visualization"
316316
checked={isShowVis}
317317
onChange={() => setIsShowVis(!isShowVis)}
@@ -478,9 +478,9 @@ function AddAnomalyDetector({
478478
</EuiFlexItem>
479479
<EuiFlexItem grow={false}>
480480
<div>
481-
<EuiButton onClick={() => openAlerting(detectorId)}>
481+
<EuiSmallButton onClick={() => openAlerting(detectorId)}>
482482
Set up alerts
483-
</EuiButton>
483+
</EuiSmallButton>
484484
</div>
485485
</EuiFlexItem>
486486
</EuiFlexGroup>
@@ -684,7 +684,7 @@ function AddAnomalyDetector({
684684
isInvalid={isInvalid(field.name, form)}
685685
error={getError(field.name, form)}
686686
>
687-
<EuiFieldText
687+
<EuiCompressedFieldText
688688
data-test-subj="detectorNameTextInputFlyout"
689689
isInvalid={isInvalid(field.name, form)}
690690
{...field}
@@ -713,7 +713,7 @@ function AddAnomalyDetector({
713713
alignItems="center"
714714
>
715715
<EuiFlexItem grow={false}>
716-
<EuiFieldNumber
716+
<EuiCompressedFieldNumber
717717
id="detectionInterval"
718718
placeholder="Detector interval"
719719
data-test-subj="detectionInterval"
@@ -750,7 +750,7 @@ function AddAnomalyDetector({
750750
>
751751
<EuiFlexGroup gutterSize="s" alignItems="center">
752752
<EuiFlexItem grow={false}>
753-
<EuiFieldNumber
753+
<EuiCompressedFieldNumber
754754
id="windowDelay"
755755
placeholder="Window delay"
756756
data-test-subj="windowDelay"
@@ -829,7 +829,7 @@ function AddAnomalyDetector({
829829
alignItems="center"
830830
>
831831
<EuiFlexItem grow={false}>
832-
<EuiFieldNumber
832+
<EuiCompressedFieldNumber
833833
id="shingleSize"
834834
placeholder="Shingle size"
835835
data-test-subj="shingleSize"
@@ -857,7 +857,7 @@ function AddAnomalyDetector({
857857
{({ field, form }: FieldProps) => (
858858
<EuiFlexGroup direction="column">
859859
<EuiFlexItem>
860-
<EuiCheckbox
860+
<EuiCompressedCheckbox
861861
id={'resultIndexCheckbox'}
862862
label="Enable custom result index"
863863
checked={enabled}
@@ -884,18 +884,18 @@ function AddAnomalyDetector({
884884

885885
{enabled ? (
886886
<EuiFlexItem>
887-
<EuiFormRow
887+
<EuiCompressedFormRow
888888
label="Field"
889889
isInvalid={isInvalid(field.name, form)}
890890
helpText={`Custom result index name must contain less than 255 characters including the prefix "opensearch-ad-plugin-result-". Valid characters are a-z, 0-9, -(hyphen) and _(underscore).`}
891891
>
892-
<EuiFieldText
892+
<EuiCompressedFieldText
893893
id="resultIndex"
894894
placeholder="Enter result index name"
895895
prepend={CUSTOM_AD_RESULT_INDEX_PREFIX}
896896
{...field}
897897
/>
898-
</EuiFormRow>
898+
</EuiCompressedFormRow>
899899
</EuiFlexItem>
900900
) : null}
901901
</EuiFlexGroup>
@@ -960,7 +960,7 @@ function AddAnomalyDetector({
960960

961961
<EuiSpacer size="m" />
962962
<EuiPanel paddingSize="none">
963-
<EuiButton
963+
<EuiSmallButton
964964
className="featureButton"
965965
data-test-subj="addFeature"
966966
isDisabled={
@@ -972,7 +972,7 @@ function AddAnomalyDetector({
972972
}}
973973
>
974974
Add another feature
975-
</EuiButton>
975+
</EuiSmallButton>
976976
</EuiPanel>
977977
<EuiSpacer size="s" />
978978
<EuiText className="content-panel-subTitle">
@@ -1000,20 +1000,20 @@ function AddAnomalyDetector({
10001000
<EuiFlyoutFooter>
10011001
<EuiFlexGroup justifyContent="spaceBetween">
10021002
<EuiFlexItem grow={false}>
1003-
<EuiButtonEmpty onClick={closeFlyout}>Cancel</EuiButtonEmpty>
1003+
<EuiSmallButtonEmpty onClick={closeFlyout}>Cancel</EuiSmallButtonEmpty>
10041004
</EuiFlexItem>
10051005
<EuiFlexItem grow={false}>
10061006
{mode === FLYOUT_MODES.existing ? (
1007-
<EuiButton
1007+
<EuiSmallButton
10081008
fill={true}
10091009
data-test-subj="adAnywhereAssociateDetectorButton"
10101010
isLoading={formikProps.isSubmitting}
10111011
onClick={() => handleAssociate(selectedDetector)}
10121012
>
10131013
Associate detector
1014-
</EuiButton>
1014+
</EuiSmallButton>
10151015
) : (
1016-
<EuiButton
1016+
<EuiSmallButton
10171017
fill={true}
10181018
disabled={associationLimitReached}
10191019
data-test-subj="adAnywhereCreateDetectorButton"
@@ -1023,7 +1023,7 @@ function AddAnomalyDetector({
10231023
}}
10241024
>
10251025
Create detector
1026-
</EuiButton>
1026+
</EuiSmallButton>
10271027
)}
10281028
</EuiFlexItem>
10291029
</EuiFlexGroup>

‎public/components/FeatureAnywhereContextMenu/CreateAnomalyDetector/AssociateExisting/containers/AssociateExisting.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
EuiSpacer,
1010
EuiIcon,
1111
EuiText,
12-
EuiComboBox,
12+
EuiCompressedComboBox,
1313
EuiLoadingSpinner,
1414
EuiLink,
1515
EuiFlexGroup,
@@ -78,7 +78,7 @@ export function AssociateExisting(
7878
const indexPattern = await getSavedObjectsClient().get('index-pattern', associateExistingProps.indexPatternId);
7979
const refs = indexPattern.references as References[];
8080
const foundDataSourceId = refs.find(ref => ref.type === 'data-source')?.id;
81-
setDataSourceId(foundDataSourceId);
81+
setDataSourceId(foundDataSourceId);
8282
} catch (error) {
8383
console.error("Error fetching index pattern:", error);
8484
}
@@ -228,7 +228,7 @@ export function AssociateExisting(
228228
Eligible detectors don't include high-cardinality detectors.
229229
</EuiText>
230230
{existingDetectorsAvailableToAssociate ? (
231-
<EuiComboBox
231+
<EuiCompressedComboBox
232232
isLoading={isLoading}
233233
id="associate-existing__select"
234234
options={options}

‎public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import React from 'react';
66
import {
77
EuiTitle,
88
EuiSpacer,
9-
EuiButtonIcon,
10-
EuiButtonEmpty,
9+
EuiSmallButtonIcon,
10+
EuiSmallButtonEmpty,
1111
EuiAccordion,
1212
EuiPanel,
1313
} from '@elastic/eui';
@@ -27,7 +27,7 @@ const EnhancedAccordion = ({
2727
}) => (
2828
<div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard">
2929
<div className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner">
30-
<EuiButtonIcon
30+
<EuiSmallButtonIcon
3131
color="text"
3232
iconType="arrowRight"
3333
aria-label="Expand"
@@ -76,10 +76,10 @@ const EnhancedAccordion = ({
7676
</EuiAccordion>
7777
)}
7878
{isButton && (
79-
<EuiButtonEmpty
79+
<EuiSmallButtonEmpty
8080
iconType={iconType}
8181
className="enhanced-accordion__button"
82-
></EuiButtonEmpty>
82+
></EuiSmallButtonEmpty>
8383
)}
8484
</div>
8585
</div>

0 commit comments

Comments
 (0)