Skip to content

Commit

Permalink
Use smaller and compressed varients of buttons and form components (#421
Browse files Browse the repository at this point in the history 
)

* Use EuiSmallButton

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonIcon

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonEmpty

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedFormRow

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedField*

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedSelect and EuiCompressedSuperSelect

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedComboBox

Signed-off-by: Miki <miki@amazon.com>

* Update snapshots and tests

Signed-off-by: Miki <miki@amazon.com>

---------

Signed-off-by: Miki <miki@amazon.com>
  • Loading branch information
@AMoo-Miki
AMoo-Miki committed Aug 9, 2024
1 parent 8744214 commit 1a3157b
Show file tree
Hide file tree
Showing 9 changed files with 2,047 additions and 1,727 deletions.
1,520 changes: 840 additions & 680 deletions ...are/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
View file

Large diffs are not rendered by default.

720 changes: 400 additions & 320 deletions ..._compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions public/components/query_compare/search_result/result_components/result_grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@


import {
EuiButtonIcon,
EuiSmallButtonIcon,
EuiDescriptionList,
EuiDescriptionListDescription,
EuiDescriptionListTitle,
Expand Down Expand Up @@ -53,7 +53,7 @@ export const ResultGridComponent = ({
<td className="osdDocTableCell__toggleDetails" key={uniqueId('grid-td-')}>
<EuiPopover
button={
<EuiButtonIcon
<EuiSmallButtonIcon
aria-label="Toggle details"
className="euiButtonIcon euiButtonIcon--text"
iconType={isResultDetailOpen ? 'minimize' : 'expand'}
Expand Down
90 changes: 49 additions & 41 deletions ..._compare/search_result/search_components/__tests__/__snapshots__/search_bar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ exports[`Search bar component Renders search bar component 1`] = `
<div
className="euiFlexItem"
>
<EuiFieldSearch
<EuiCompressedFieldSearch
aria-label="Enter your Search query"
compressed={false}
compressed={true}
fullWidth={true}
id="searchRelevance-searchBar"
incremental={false}
Expand All @@ -42,21 +42,21 @@ exports[`Search bar component Renders search bar component 1`] = `
"onClick": [Function],
}
}
compressed={false}
compressed={true}
fullWidth={true}
icon="search"
isLoading={false}
>
<div
className="euiFormControlLayout euiFormControlLayout--fullWidth"
className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<EuiValidatableControl>
<input
aria-label="Enter your Search query"
className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
id="searchRelevance-searchBar"
onChange={[Function]}
onKeyUp={[Function]}
Expand All @@ -71,15 +71,15 @@ exports[`Search bar component Renders search bar component 1`] = `
"onClick": [Function],
}
}
compressed={false}
compressed={true}
icon="search"
isLoading={false}
>
<div
className="euiFormControlLayoutIcons"
>
<EuiFormControlLayoutCustomIcon
size="m"
size="s"
type="search"
>
<span
Expand All @@ -88,19 +88,19 @@ exports[`Search bar component Renders search bar component 1`] = `
<EuiIcon
aria-hidden="true"
className="euiFormControlLayoutCustomIcon__icon"
size="m"
size="s"
type="search"
>
<EuiIconBeaker
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
role="img"
style={null}
>
<svg
aria-hidden={true}
className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height={16}
role="img"
Expand All @@ -123,15 +123,15 @@ exports[`Search bar component Renders search bar component 1`] = `
>
<EuiFormControlLayoutClearButton
onClick={[Function]}
size="m"
size="s"
>
<EuiI18n
default="Clear input"
token="euiFormControlLayoutClearButton.label"
>
<button
aria-label="Clear input"
className="euiFormControlLayoutClearButton"
className="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
onClick={[Function]}
type="button"
>
Expand Down Expand Up @@ -171,7 +171,7 @@ exports[`Search bar component Renders search bar component 1`] = `
</div>
</div>
</EuiFormControlLayout>
</EuiFieldSearch>
</EuiCompressedFieldSearch>
</div>
</EuiFlexItem>
<EuiFlexItem
Expand All @@ -180,55 +180,63 @@ exports[`Search bar component Renders search bar component 1`] = `
<div
className="euiFlexItem euiFlexItem--flexGrowZero"
>
<EuiButton
<EuiSmallButton
aria-label="searchRelevance-searchButton"
fill={true}
onClick={[Function]}
>
<EuiButtonDisplay
<EuiButton
aria-label="searchRelevance-searchButton"
baseClassName="euiButton"
disabled={false}
element="button"
fill={true}
isDisabled={false}
onClick={[Function]}
type="button"
size="s"
>
<button
<EuiButtonDisplay
aria-label="searchRelevance-searchButton"
className="euiButton euiButton--primary euiButton--fill"
baseClassName="euiButton"
disabled={false}
element="button"
fill={true}
isDisabled={false}
onClick={[Function]}
style={
Object {
"minWidth": undefined,
}
}
size="s"
type="button"
>
<EuiButtonContent
className="euiButton__content"
iconSide="left"
textProps={
<button
aria-label="searchRelevance-searchButton"
className="euiButton euiButton--primary euiButton--small euiButton--fill"
disabled={false}
onClick={[Function]}
style={
Object {
"className": "euiButton__text",
"minWidth": undefined,
}
}
type="button"
>
<span
className="euiButtonContent euiButton__content"
<EuiButtonContent
className="euiButton__content"
iconSide="left"
textProps={
Object {
"className": "euiButton__text",
}
}
>
<span
className="euiButton__text"
className="euiButtonContent euiButton__content"
>
Search
<span
className="euiButton__text"
>
Search
</span>
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonDisplay>
</EuiButton>
</EuiButtonContent>
</button>
</EuiButtonDisplay>
</EuiButton>
</EuiSmallButton>
</div>
</EuiFlexItem>
</div>
Expand Down
Loading

0 comments on commit 1a3157b

Please sign in to comment.