Skip to content

Commit

Permalink
Chore/decouple button content (elastic#3730)
Browse files Browse the repository at this point in the history 
* [New] EuiButtonContent

For rendering the contents of buttons, icon (loading spinner) and text wrapper for children

* Use EuiButtonContent in EuiButtonEmpty

* Fixing classNames and disabled states

* Create EuiButtonDisplay for internal usage

* Fix snaps

* ts gymnastics

* Added tests for EuiButtonContent

* More optimization

- Extend EuiButtonContentProps
- Content styles are in button_content.scss

* Restricted list of `element`s
  • Loading branch information
@cchaos @anishagg17
cchaos authored and anishagg17 committed Jul 20, 2020
1 parent 41aa872 commit 0a9cb7a
Show file tree
Hide file tree
Showing 34 changed files with 1,115 additions and 553 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ No public interface changes since `27.1.0`.
- Added `index.d.ts` file to `lib/test` and `es/test` ([#3715](https://github.com/elastic/eui/pull/3715))
- Added `descriptionFlexItemProps` and `fieldFlexItemProps` props to `EuiDescribedFormGroup` ([#3717](https://github.com/elastic/eui/pull/3717))
- Expanded `EuiBasicTable`'s default action's name configuration to accept a function that returns a React node ([#3739](https://github.com/elastic/eui/pull/3739))
- Added internal use only button building blocks for reusability in other button components ([#3730](https://github.com/elastic/eui/pull/3730))

## [`27.0.0`](https://github.com/elastic/eui/tree/v27.0.0)
- Added `paddingSize` prop to `EuiCard` ([#3638](https://github.com/elastic/eui/pull/3638))
Expand Down
12 changes: 6 additions & 6 deletions src/components/accessibility/__snapshots__/skip_link.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`EuiSkipLink is rendered 1`] = `
rel="noreferrer"
>
<span
class="euiButton__content"
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
Expand All @@ -27,7 +27,7 @@ exports[`EuiSkipLink props onClick is rendered 1`] = `
rel="noreferrer"
>
<span
class="euiButton__content"
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
Expand All @@ -43,7 +43,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
rel="noreferrer"
>
<span
class="euiButton__content"
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
Expand All @@ -60,7 +60,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
tabindex="0"
>
<span
class="euiButton__content"
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
Expand All @@ -76,7 +76,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
rel="noreferrer"
>
<span
class="euiButton__content"
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
Expand All @@ -93,7 +93,7 @@ exports[`EuiSkipLink props tabIndex is rendered 1`] = `
tabindex="-1"
>
<span
class="euiButton__content"
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
Expand Down
95 changes: 62 additions & 33 deletions src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -383,40 +383,49 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
size="xs"
>
<button
className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--iconRight"
className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
data-test-subj="tablePaginationPopoverButton"
onClick={[Function]}
type="button"
>
<span
<EuiButtonContent
className="euiButtonEmpty__content"
iconSide="right"
iconType="arrowDown"
textProps={
Object {
"className": "euiButtonEmpty__text",
}
}
>
<EuiIcon
aria-hidden="true"
className="euiButtonEmpty__icon"
size="m"
type="arrowDown"
>
<div
aria-hidden="true"
className="euiButtonEmpty__icon"
data-euiicon-type="arrowDown"
size="m"
/>
</EuiIcon>
<span
className="euiButtonEmpty__text"
className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
>
<EuiI18n
default="Rows per page"
token="euiTablePagination.rowsPerPage"
<EuiIcon
className="euiButtonContent__icon"
size="m"
type="arrowDown"
>
Rows per page
</EuiI18n>
:
2
<div
className="euiButtonContent__icon"
data-euiicon-type="arrowDown"
size="m"
/>
</EuiIcon>
<span
className="euiButtonEmpty__text"
>
<EuiI18n
default="Rows per page"
token="euiTablePagination.rowsPerPage"
>
Rows per page
</EuiI18n>
:
2
</span>
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonEmpty>
</div>
Expand Down Expand Up @@ -545,15 +554,25 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
onClick={[Function]}
rel="noreferrer"
>
<span
<EuiButtonContent
className="euiButtonEmpty__content"
iconSide="left"
textProps={
Object {
"className": "euiButtonEmpty__text",
}
}
>
<span
className="euiButtonEmpty__text"
className="euiButtonContent euiButtonEmpty__content"
>
1
<span
className="euiButtonEmpty__text"
>
1
</span>
</span>
</span>
</EuiButtonContent>
</a>
</EuiButtonEmpty>
</EuiI18n>
Expand Down Expand Up @@ -611,21 +630,31 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
aria-controls="generated-id"
aria-current={true}
aria-label="Page 2 of 2"
className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
data-test-subj="pagination-button-1"
disabled={true}
onClick={[Function]}
type="button"
>
<span
<EuiButtonContent
className="euiButtonEmpty__content"
iconSide="left"
textProps={
Object {
"className": "euiButtonEmpty__text",
}
}
>
<span
className="euiButtonEmpty__text"
className="euiButtonContent euiButtonEmpty__content"
>
2
<span
className="euiButtonEmpty__text"
>
2
</span>
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonEmpty>
</EuiI18n>
Expand Down
Loading

0 comments on commit 0a9cb7a

Please sign in to comment.