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

[Backport 2.x] Use smaller and compressed varients of buttons and form components #377

Merged
merged 1 commit into from
Aug 19, 2024
Merged

[Backport 2.x] Use smaller and compressed varients of buttons and form components #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 2 additions & 1 deletion common/utils/toast_helper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

import {
EuiSmallButton,
EuiButton,
EuiCodeBlock,
EuiModal,
Expand Down Expand Up @@ -61,7 +62,7 @@ const loadErrorModal = (errorDetailsMessage: string) => {
</EuiCodeBlock>
</EuiModalBody>
<EuiModalFooter>
<EuiButton onClick={() => modal.close()}>Close</EuiButton>
<EuiSmallButton onClick={() => modal.close()}>Close</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
)
Expand Down
72 changes: 36 additions & 36 deletions public/components/Main/__snapshots__/main.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions public/components/Main/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import {
EuiButton,
EuiSmallButton,
EuiButtonIcon,
EuiCallOut,
EuiComboBoxOptionOption,
Expand Down Expand Up @@ -62,8 +62,8 @@

interface ResponseData {
ok: boolean;
resp: any;

Check warning on line 65 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
body: any;

Check warning on line 66 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
}

export interface ResponseDetail<T> {
Expand All @@ -73,11 +73,11 @@
}

export interface TranslateResult {
[key: string]: any;

Check warning on line 76 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
}

export interface QueryMessage {
text: any;

Check warning on line 80 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
className: string;
}

Expand All @@ -97,13 +97,13 @@
[key: string]: {
nodes: Tree;
expandedRow?: {};
selectedNodes?: { [key: string]: any };

Check warning on line 100 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
};
}

export interface DataRow {
rowId: number;
data: { [key: string]: any };

Check warning on line 106 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
}

interface MainProps {
Expand Down Expand Up @@ -152,7 +152,7 @@
}

const SUCCESS_MESSAGE = 'Success';
const errorQueryResponse = (queryResultResponseDetail: any) => {

Check warning on line 155 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
const errorMessage =
queryResultResponseDetail.errorMessage +
', this query is not runnable. \n \n' +
Expand Down Expand Up @@ -180,7 +180,7 @@
const dataRows: DataRow[] = [];

const schema: object[] = _.get(responseObj, 'schema');
const datarows: any[][] = _.get(responseObj, 'datarows');

Check warning on line 183 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
let queryType = 'default';

for (const column of schema.values()) {
Expand All @@ -205,7 +205,7 @@
}

for (const [id, field] of datarows.entries()) {
const row: { [key: string]: any } = {};

Check warning on line 208 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
row.TABLE_NAME = field[index];
const dataRow: DataRow = {
rowId: id,
Expand All @@ -218,7 +218,7 @@
case 'describe':
case 'default':
for (const [id, field] of schema.entries()) {
let alias: any = null;

Check warning on line 221 in public/components/Main/main.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Unexpected any. Specify a different type
try {
alias = _.get(field, 'alias');
} catch (e) {
Expand Down Expand Up @@ -1132,9 +1132,9 @@
<EuiSpacer />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
<EuiSmallButton href={link} target="_blank" iconType="popout" iconSide="right">
{linkTitle}
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
</EuiFlexGroup>
<EuiPageContentBody>
Expand Down
31 changes: 16 additions & 15 deletions public/components/PPLPage/PPLPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/

import {
EuiButton,
EuiSmallButton,
EuiCodeBlock,
EuiCodeEditor,
EuiComboBoxOptionOption,
Expand Down Expand Up @@ -91,9 +91,9 @@
</EuiModalBody>

<EuiModalFooter>
<EuiButton onClick={closeModal} fill>
<EuiSmallButton onClick={closeModal} fill>
Close
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand Down Expand Up @@ -125,19 +125,16 @@
/>
<EuiSpacer />
<EuiFlexGroup className="action-container" gutterSize="m">
<EuiFlexItem
className="sql-editor-buttons"
grow={false}
>
<EuiButton
<EuiFlexItem className="sql-editor-buttons" grow={false}>

Check failure on line 128 in public/components/PPLPage/PPLPage.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Replace `⏎············className="sql-editor-buttons"⏎············grow={false}⏎··········` with `·className="sql-editor-buttons"·grow={false}`
<EuiSmallButton
fill={true}
data-test-subj="pplRunButton"
className="sql-editor-button"
isLoading={this.props.asyncLoading}
onClick={() => this.props.onRun(this.props.pplQuery)}
>
{this.props.asyncLoading ? 'Running' : 'Run'}
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
<EuiFlexItem
grow={false}
Expand All @@ -146,26 +143,30 @@
this.props.onClear();
}}
>
<EuiButton className="sql-editor-button" data-test-subj="pplClearButton" isDisabled={this.props.asyncLoading}>
<EuiSmallButton
className="sql-editor-button"
data-test-subj="pplClearButton"
isDisabled={this.props.asyncLoading}

Check failure on line 149 in public/components/PPLPage/PPLPage.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Replace `·className="sql-editor-button"··data-test-subj="pplClearButton"·isDisabled={this.props.asyncLoading}` with `⏎··············className="sql-editor-button"⏎··············data-test-subj="pplClearButton"⏎··············isDisabled={this.props.asyncLoading}⏎············`
>
Clear
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
{this.props.selectedDatasource &&
this.props.selectedDatasource[0].label === 'OpenSearch' ? (
<EuiFlexItem grow={false} onClick={() => this.props.onTranslate(this.props.pplQuery)}>
<EuiButton
<EuiSmallButton
className="sql-editor-button"
onClick={showModal}
isDisabled={this.props.asyncLoading}
>
Explain
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
) : (
<EuiFlexItem grow={false} onClick={() => this.props.updatePPLQueries(SAMPLE_PPL_QUERY)}>
<EuiButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
<EuiSmallButton className="sql-editor-button" isDisabled={this.props.asyncLoading}>
Sample Query
</EuiButton>
</EuiSmallButton>
</EuiFlexItem>
)}
</EuiFlexGroup>
Expand Down
30 changes: 15 additions & 15 deletions public/components/PPLPage/__snapshots__/PPLPage.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
>
<button
class="euiButton euiButton--primary euiButton--fill sql-editor-button"
class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
data-test-subj="pplRunButton"
type="button"
>
Expand All @@ -157,7 +157,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
data-test-subj="pplClearButton"
type="button"
>
Expand All @@ -176,7 +176,7 @@ exports[`<PPLPage /> spec renders the component 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
type="button"
>
<span
Expand Down Expand Up @@ -333,7 +333,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
>
<button
class="euiButton euiButton--primary euiButton--fill sql-editor-button"
class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
data-test-subj="pplRunButton"
type="button"
>
Expand All @@ -352,7 +352,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
data-test-subj="pplClearButton"
type="button"
>
Expand All @@ -371,7 +371,7 @@ exports[`<PPLPage /> spec tests the Sample query button 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
type="button"
>
<span
Expand Down Expand Up @@ -528,7 +528,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
>
<button
class="euiButton euiButton--primary euiButton--fill sql-editor-button"
class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
data-test-subj="pplRunButton"
type="button"
>
Expand All @@ -547,7 +547,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
data-test-subj="pplClearButton"
type="button"
>
Expand All @@ -566,7 +566,7 @@ exports[`<PPLPage /> spec tests the Sample query button 2`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
type="button"
>
<span
Expand Down Expand Up @@ -723,7 +723,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
>
<button
class="euiButton euiButton--primary euiButton--fill sql-editor-button"
class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
data-test-subj="pplRunButton"
type="button"
>
Expand All @@ -742,7 +742,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
data-test-subj="pplClearButton"
type="button"
>
Expand All @@ -761,7 +761,7 @@ exports[`<PPLPage /> spec tests the action buttons 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
type="button"
>
<span
Expand Down Expand Up @@ -921,7 +921,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
class="euiFlexItem euiFlexItem--flexGrowZero sql-editor-buttons"
>
<button
class="euiButton euiButton--primary euiButton--fill sql-editor-button"
class="euiButton euiButton--primary euiButton--small euiButton--fill sql-editor-button"
data-test-subj="pplRunButton"
type="button"
>
Expand All @@ -940,7 +940,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
data-test-subj="pplClearButton"
type="button"
>
Expand All @@ -959,7 +959,7 @@ exports[`<PPLPage /> spec tests the action buttons 2`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary sql-editor-button"
class="euiButton euiButton--primary euiButton--small sql-editor-button"
type="button"
>
<span
Expand Down
4 changes: 2 additions & 2 deletions public/components/QueryResults/QueryResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { SortableProperties, SortableProperty } from '@elastic/eui/lib/services'
import {
Comparators,
EuiButton,
EuiButtonIcon,
EuiSmallButtonIcon,
EuiComboBoxOptionOption,
EuiContextMenuItem,
EuiContextMenuPanel,
Expand Down Expand Up @@ -317,7 +317,7 @@ export class QueryResults extends React.Component<QueryResultsProps, QueryResult
<EuiFlexItem grow={false}>
{this.props.queryResults.length > 0 &&
(this.props.isResultFullScreen ? (
<EuiButtonIcon
<EuiSmallButtonIcon
iconType="cross"
color="text"
id="exit-fullscreen-button"
Expand Down
11 changes: 6 additions & 5 deletions public/components/QueryResults/QueryResultsBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ import { SortableProperties } from '@elastic/eui/lib/services';
// @ts-ignore
import {
Comparators,
EuiSmallButton,
EuiButton,
EuiButtonIcon,
EuiSmallButtonIcon,
EuiCodeEditor,
EuiComboBoxOptionOption,
EuiContextMenu,
Expand Down Expand Up @@ -190,9 +191,9 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
</EuiModalBody>

<EuiModalFooter>
<EuiButton onClick={closeModal} fill>
<EuiSmallButton onClick={closeModal} fill>
Close
</EuiButton>
</EuiSmallButton>
</EuiModalFooter>
</EuiModal>
</EuiOverlayMask>
Expand Down Expand Up @@ -404,7 +405,7 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul

addExpandingNodeIcon(node: Node, expandedRowMap: ItemIdToExpandedRowMap) {
return (
<EuiButtonIcon
<EuiSmallButtonIcon
style={{ marginLeft: -4 }}
onClick={() => this.toggleNodeData(node, expandedRowMap)}
aria-label={
Expand All @@ -426,7 +427,7 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
return;
}
return (
<EuiButtonIcon
<EuiSmallButtonIcon
onClick={() => this.updateExpandedRowMap(node, expandedRowMap)}
aria-label={
expandedRowMap[node.parent!.nodeId] &&
Expand Down
Loading
Loading