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

Jump to bottom

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

Merged
merged 14 commits into from
Jul 23, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6992cba
Use EuiSmallButton
AMoo-Miki Jul 11, 2024
60b3f57
Use EuiSmallButtonIcon
AMoo-Miki Jul 11, 2024
718bb7d
Use EuiSmallButtonEmpty
AMoo-Miki Jul 11, 2024
42ba0d5
Use EuiCompressedFormRow
AMoo-Miki Jul 11, 2024
9145218
Use EuiCompressedField*
AMoo-Miki Jul 11, 2024
a527200
Use EuiCompressedSelect and EuiCompressedSuperSelect
AMoo-Miki Jul 11, 2024
dcb6fbc
Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup
AMoo-Miki Jul 11, 2024
957f7cf
Use EuiCompressedRadio and EuiCompressedRadioGroup
AMoo-Miki Jul 11, 2024
db0a84d
Use EuiCompressedSwitch
AMoo-Miki Jul 11, 2024
069ad27
Use EuiCompressedEuiTextArea
AMoo-Miki Jul 11, 2024
b4afe2a
Use EuiCompressedComboBox
AMoo-Miki Jul 11, 2024
0fc1b9d
Undo unnecessary EuiSmallButton* uses
AMoo-Miki Jul 18, 2024
88f51c5
Introduce `compressed` FrequencyPicker` and `DateRangePicker`
AMoo-Miki Jul 22, 2024
3341b6a
Update snapshots and fix errors
AMoo-Miki Jul 22, 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
34 changes: 17 additions & 17 deletions public/components/Comments/AlertCommentsFlyout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@

import React, { useCallback, useEffect, useState } from "react";
import { Comment } from "../../models/Comments";
import {
EuiFlyout,
EuiFlyoutHeader,
EuiFlyoutBody,
EuiCommentList,
EuiText,
EuiButtonIcon,
EuiContextMenuItem,
import {
EuiFlyout,
EuiFlyoutHeader,
EuiFlyoutBody,
EuiCommentList,
EuiText,
EuiButtonIcon,
EuiContextMenuItem,
EuiContextMenuPanel,
EuiPopover,
EuiTitle,
EuiPopover,
EuiTitle,
EuiSpacer,
EuiCallOut,
EuiLink
Expand Down Expand Up @@ -77,7 +77,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI

const createComment = async () => {
setCreatePending(true);
await httpClient.post(`../api/alerting/comments/${alertId}`, { body: JSON.stringify({
await httpClient.post(`../api/alerting/comments/${alertId}`, { body: JSON.stringify({
content: draftCommentContent
})});

Expand Down Expand Up @@ -150,7 +150,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
onCancel={() => onEditCancel(comment, idx)}
/>
);

const customActions = comment.state === 'readonly' && (
<EuiPopover
button={
Expand Down Expand Up @@ -186,7 +186,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
/>
</EuiPopover>
);

return {
username: comment.user || 'Unknown',
event: `${comment.last_updated_time ? 'edited' : 'added'} comment on`,
Expand All @@ -204,12 +204,12 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiCallOut
<EuiCallOut
iconType='iInCircle'
title='Experimental'>
<span>The feature is experimental and should not be used in a production environment.
<span>The feature is experimental and should not be used in a production environment.
The posted comments will be impacted if the feature is deactivated.
For more information see <EuiLink href="https://opensearch.org/docs/latest/observing-your-data/alerting/index/" target="_blank">Documentation.</EuiLink>
For more information see <EuiLink href="https://opensearch.org/docs/latest/observing-your-data/alerting/index/" target="_blank">Documentation.</EuiLink>
To leave feedback, visit <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues/6999" target="_blank">github.com</EuiLink>.
</span>
</EuiCallOut>
Expand All @@ -236,4 +236,4 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
</EuiFlyoutBody>
</EuiFlyout>
)
}
}
26 changes: 13 additions & 13 deletions public/components/Comments/CommentEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
*/

import React from "react";
import {
EuiFlexGroup,
EuiFlexItem,
EuiButton
import {
EuiFlexGroup,
EuiFlexItem,
EuiSmallButton
} from "@elastic/eui";

export interface CommentEditorProps {
Expand All @@ -19,13 +19,13 @@ export interface CommentEditorProps {
onContentChange: React.ChangeEventHandler<HTMLTextAreaElement>;
}

export const CommentEditor: React.FC<CommentEditorProps> = ({
isLoading,
export const CommentEditor: React.FC<CommentEditorProps> = ({
isLoading,
draftCommentContent,
saveDisabled,
onSave,
onSave,
onCancel,
onContentChange,
onContentChange,
}) => (
<EuiFlexGroup gutterSize="s" direction="column" >
<EuiFlexItem>
Expand All @@ -35,17 +35,17 @@ export const CommentEditor: React.FC<CommentEditorProps> = ({
<EuiFlexGroup gutterSize="s">
{onCancel && (
<EuiFlexItem grow={false}>
<EuiButton onClick={onCancel}>
<EuiSmallButton onClick={onCancel}>
Cancel
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
<EuiButton onClick={onSave} color="primary" isLoading={isLoading} disabled={saveDisabled} fill>
<EuiSmallButton onClick={onSave} color="primary" isLoading={isLoading} disabled={saveDisabled} fill>
Save
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
)
)
12 changes: 6 additions & 6 deletions public/components/Comments/ShowAlertComments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import React, { useCallback, useEffect, useState } from "react";
import { Comment } from "../../models/Comments";
import { EuiButtonIcon, EuiToolTip } from "@elastic/eui";
import { EuiSmallButtonIcon, EuiToolTip } from "@elastic/eui";
import { AlertCommentsFlyout } from "./AlertCommentsFlyout";

export interface ShowAlertCommentsProps {
Expand All @@ -15,19 +15,19 @@ export interface ShowAlertCommentsProps {

export const ShowAlertComments: React.FC<ShowAlertCommentsProps> = ({ alert, httpClient }) => {
const [commentsFlyout, setCommentsFlyout] = useState<React.ReactNode | null>(null);
const showCommentsFlyout = useCallback(() => {

const showCommentsFlyout = useCallback(() => {
setCommentsFlyout(<AlertCommentsFlyout
alertId={alert.id}
httpClient={httpClient}
closeFlyout={() => setCommentsFlyout(null)}
closeFlyout={() => setCommentsFlyout(null)}
/>);
}, [setCommentsFlyout]);

return (
<>
<EuiToolTip content={'Show comments'}>
<EuiButtonIcon
<EuiSmallButtonIcon
aria-label={'Show comments'}
data-test-subj={`show-comments-icon`}
iconType={'editorComment'}
Expand All @@ -37,4 +37,4 @@ export const ShowAlertComments: React.FC<ShowAlertCommentsProps> = ({ alert, htt
{commentsFlyout}
</>
)
}
}
10 changes: 5 additions & 5 deletions public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import {
EuiFlyoutFooter,
EuiTitle,
EuiSpacer,
EuiButton,
EuiButtonEmpty,
EuiSmallButton,
EuiSmallButtonEmpty,
EuiFormFieldset,
EuiCheckableCard,
EuiText
Expand Down Expand Up @@ -225,17 +225,17 @@ function AddAlertingMonitor({
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiButtonEmpty onClick={closeFlyout}>Cancel</EuiButtonEmpty>
<EuiSmallButtonEmpty onClick={closeFlyout}>Cancel</EuiSmallButtonEmpty>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
<EuiSmallButton
onClick={() => onSubmit({ handleSubmit, validateForm })}
fill
isLoading={isLoading}
disabled={!isAssociateAllowed}
>
{flyoutMode === 'existing' ? 'Associate' : 'Create'} monitor
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutFooter>
Expand Down
4 changes: 2 additions & 2 deletions ...ents/FeatureAnywhereContextMenu/AddAlertingMonitor/AssociateExisting/AssociateExisting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
EuiSpacer,
EuiIcon,
EuiText,
EuiComboBox,
EuiCompressedComboBox,
EuiLoadingSpinner,
EuiLink,
EuiFlexGroup,
Expand Down Expand Up @@ -94,7 +94,7 @@ function AssociateExisting({ monitors, selectedMonitorId, setSelectedMonitorId }
<EuiSpacer size="m" />
{!monitors && <EuiLoadingSpinner size="l" />}
{monitors && (
<EuiComboBox
<EuiCompressedComboBox
id="associate-existing__select"
options={options}
selectedOptions={selectedOptions}
Expand Down
4 changes: 2 additions & 2 deletions public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import React, { useEffect, useMemo, useState } from 'react';
import { EuiCallOut, EuiIcon, EuiSpacer, EuiSwitch, EuiText, EuiTitle } from '@elastic/eui';
import { EuiCallOut, EuiIcon, EuiSpacer, EuiCompressedSwitch, EuiText, EuiTitle } from '@elastic/eui';
import _ from 'lodash';
import { FieldArray } from 'formik';
import { EmbeddableRenderer, ErrorEmbeddable } from '../../../../../../../src/plugins/embeddable/public';
Expand Down Expand Up @@ -123,7 +123,7 @@ function CreateNew({ embeddable, flyoutMode, formikProps, history, setFlyout, de
{title}
</h4>
</EuiTitle>
<EuiSwitch
<EuiCompressedSwitch
label="Show visualization"
checked={isShowVis}
onChange={() => setIsShowVis(!isShowVis)}
Expand Down
2 changes: 1 addition & 1 deletion ...tureAnywhereContextMenu/AddAlertingMonitor/CreateNew/__snapshots__/CreateNew.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ exports[`CreateNew renders 1`] = `
/>
</h4>
</EuiTitle>
<EuiSwitch
<EuiCompressedSwitch
checked={false}
label="Show visualization"
onChange={[Function]}
Expand Down
6 changes: 3 additions & 3 deletions public/components/FeatureAnywhereContextMenu/AssociatedMonitors/AssociatedMonitors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import React, { useCallback, useState } from 'react';
import {
EuiButton,
EuiSmallButton,
EuiEmptyPrompt,
EuiFlexGroup,
EuiFlexItem,
Expand Down Expand Up @@ -125,9 +125,9 @@ const AssociatedMonitors = ({ embeddable, closeFlyout, setFlyoutMode, monitors,
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton iconType="link" isDisabled={!isAssociateAllowed} fill onClick={() => setFlyoutMode('existing')}>
<EuiSmallButton iconType="link" isDisabled={!isAssociateAllowed} fill onClick={() => setFlyoutMode('existing')}>
Associate a monitor
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="l" />
Expand Down
12 changes: 6 additions & 6 deletions public/components/FeatureAnywhereContextMenu/AssociatedMonitors/ConfirmUnlinkModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@

import React, { useState } from 'react';
import {
EuiButton,
EuiButtonEmpty,
EuiSmallButton,
EuiSmallButtonEmpty,
EuiModal,
EuiModalBody,
EuiModalFooter,
Expand Down Expand Up @@ -35,11 +35,11 @@ export const ConfirmUnlinkDetectorModal = (props) => {
</EuiModalBody>
<EuiModalFooter>
{isLoading ? null : (
<EuiButtonEmpty data-test-subj="cancelButton" onClick={props.onHide}>
<EuiSmallButtonEmpty data-test-subj="cancelButton" onClick={props.onHide}>
Cancel
</EuiButtonEmpty>
</EuiSmallButtonEmpty>
)}
<EuiButton
<EuiSmallButton
data-test-subj="confirmButton"
color="primary"
fill
Expand All @@ -50,7 +50,7 @@ export const ConfirmUnlinkDetectorModal = (props) => {
}}
>
{'Remove association'}
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand Down
4 changes: 2 additions & 2 deletions ...atureAnywhereContextMenu/AssociatedMonitors/__snapshots__/AssociatedMonitors.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ exports[`AssociatedMonitors renders 1`] = `
<EuiFlexItem
grow={false}
>
<EuiButton
<EuiSmallButton
fill={true}
iconType="link"
isDisabled={true}
onClick={[Function]}
>
Associate a monitor
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer
Expand Down
10 changes: 5 additions & 5 deletions public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import React from 'react';
import {
EuiTitle,
EuiSpacer,
EuiButtonIcon,
EuiButtonEmpty,
EuiSmallButtonIcon,
EuiSmallButtonEmpty,
EuiAccordion,
EuiPanel,
} from '@elastic/eui';
Expand All @@ -27,7 +27,7 @@ const EnhancedAccordion = ({
}) => (
<div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard">
<div className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner">
<EuiButtonIcon
<EuiSmallButtonIcon
color="text"
onClick={onToggle}
iconType="arrowRight"
Expand Down Expand Up @@ -72,13 +72,13 @@ const EnhancedAccordion = ({
</EuiAccordion>
)}
{isButton && (
<EuiButtonEmpty
<EuiSmallButtonEmpty
onClick={onToggle}
iconType={iconType}
className="enhanced-accordion__button"
>
Add trigger
</EuiButtonEmpty>
</EuiSmallButtonEmpty>
)}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ...FeatureAnywhereContextMenu/EnhancedAccordion/__snapshots__/EnhancedAccordion.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`EnhancedAccordion renders 1`] = `
<div
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner"
>
<EuiButtonIcon
<EuiSmallButtonIcon
aria-label="Expand"
className="enhanced-accordion__arrow "
color="text"
Expand Down
2 changes: 1 addition & 1 deletion public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Object {
<EuiFlexItem
grow={false}
>
<EuiButtonIcon
<EuiSmallButtonIcon
data-test-subj="alertsDashboardFlyout_closeButton_undefined"
display="empty"
iconSize="m"
Expand Down
4 changes: 2 additions & 2 deletions public/components/Flyout/flyouts/alertsDashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import React from 'react';
import { EuiFlexGroup, EuiButtonIcon, EuiText, EuiFlexItem } from '@elastic/eui';
import { EuiFlexGroup, EuiSmallButtonIcon, EuiText, EuiFlexItem } from '@elastic/eui';
import AlertsDashboardFlyoutComponent from './components/AlertsDashboardFlyoutComponent';

const alertsDashboard = (payload) => {
Expand All @@ -29,7 +29,7 @@ const alertsDashboard = (payload) => {
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonIcon
<EuiSmallButtonIcon
data-test-subj={`alertsDashboardFlyout_closeButton_${trigger_name}`}
iconType="cross"
display="empty"
Expand Down
Loading
Loading