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

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

Merged
merged 10 commits into from
Aug 19, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6a47485
Use EuiSmallButton
AMoo-Miki Jul 11, 2024
fb45542
Use EuiSmallButtonEmpty
AMoo-Miki Jul 11, 2024
06b6714
Use EuiCompressedFormRow
AMoo-Miki Jul 11, 2024
cc7299e
Use EuiCompressedField*
AMoo-Miki Jul 11, 2024
49e55be
Use EuiCompressedSelect and EuiCompressedSuperSelect
AMoo-Miki Jul 11, 2024
ec482e7
Use EuiCompressedRadio and EuiCompressedRadioGroup
AMoo-Miki Jul 11, 2024
e26dec9
Use EuiCompressedEuiTextArea
AMoo-Miki Jul 11, 2024
124c9b2
Use EuiCompressedComboBox
AMoo-Miki Jul 11, 2024
48d33b4
Use EuiSmallFilterButton
AMoo-Miki Jul 12, 2024
0b45773
Update snapshots and tests
AMoo-Miki Aug 2, 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
10 changes: 5 additions & 5 deletions public/pages/Channels/Channels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

import {
EuiBasicTable,
EuiButton,
EuiSmallButton,
EuiEmptyPrompt,
EuiHealth,
EuiHorizontalRule,
Expand Down Expand Up @@ -238,9 +238,9 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
},
{
component: (
<EuiButton fill href={`#${ROUTES.CREATE_CHANNEL}`}>
<EuiSmallButton fill href={`#${ROUTES.CREATE_CHANNEL}`}>
Create channel
</EuiButton>
</EuiSmallButton>
),
},
]}
Expand Down Expand Up @@ -269,9 +269,9 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
title={<h2>No channels to display</h2>}
body="To send or receive notifications, you will need to create a notification channel."
actions={
<EuiButton href={`#${ROUTES.CREATE_CHANNEL}`}>
<EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
Create channel
</EuiButton>
</EuiSmallButton>
}
/>
}
Expand Down
8 changes: 4 additions & 4 deletions public/pages/Channels/__tests__/__snapshots__/ChannelActions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`<ChannelActions/> spec clicks in the popover 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary"
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
Expand Down Expand Up @@ -48,7 +48,7 @@ exports[`<ChannelActions/> spec renders the action button disabled by default 1`
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary"
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
Expand Down Expand Up @@ -87,7 +87,7 @@ exports[`<ChannelActions/> spec renders the popover 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary"
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
Expand Down Expand Up @@ -127,7 +127,7 @@ exports[`<ChannelActions/> spec renders the popover with multiple selected chann
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary"
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
Expand Down
10 changes: 5 additions & 5 deletions public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
class="euiFlexItem"
>
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
class="euiFieldSearch euiFieldSearch--fullWidth"
class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
placeholder="Search"
type="search"
/>
Expand All @@ -26,7 +26,7 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height="16"
role="img"
Expand Down Expand Up @@ -56,7 +56,7 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
type="button"
>
<span
Expand Down Expand Up @@ -98,7 +98,7 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
type="button"
>
<span
Expand Down
6 changes: 3 additions & 3 deletions public/pages/Channels/__tests__/__snapshots__/ChannelDetailsActions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`<ChannelDetailsActions /> spec clicks buttons in popover 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary"
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
Expand Down Expand Up @@ -48,7 +48,7 @@ exports[`<ChannelDetailsActions /> spec opens popover 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary"
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
Expand Down Expand Up @@ -88,7 +88,7 @@ exports[`<ChannelDetailsActions /> spec renders the component 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary"
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
Expand Down
16 changes: 8 additions & 8 deletions public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary euiButton-isDisabled"
class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
disabled=""
type="button"
>
Expand Down Expand Up @@ -79,7 +79,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<a
class="euiButton euiButton--primary euiButton--fill"
class="euiButton euiButton--primary euiButton--small euiButton--fill"
href="#/create-channel"
rel="noreferrer"
>
Expand Down Expand Up @@ -112,13 +112,13 @@ exports[`<Channels/> spec renders the empty component 1`] = `
class="euiFlexItem"
>
<div
class="euiFormControlLayout euiFormControlLayout--fullWidth"
class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
>
<div
class="euiFormControlLayout__childrenWrapper"
>
<input
class="euiFieldSearch euiFieldSearch--fullWidth"
class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
placeholder="Search"
type="search"
/>
Expand All @@ -130,7 +130,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
focusable="false"
height="16"
role="img"
Expand Down Expand Up @@ -160,7 +160,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
type="button"
>
<span
Expand Down Expand Up @@ -202,7 +202,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
class="euiPopover__anchor"
>
<button
class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton--hasIcon euiFilterButton--noGrow"
type="button"
>
<span
Expand Down Expand Up @@ -511,7 +511,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
class="euiSpacer euiSpacer--l"
/>
<a
class="euiButton euiButton--primary"
class="euiButton euiButton--primary euiButton--small"
href="#/create-channel"
rel="noreferrer"
>
Expand Down
73 changes: 40 additions & 33 deletions public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
class="euiModalFooter"
>
<button
class="euiButton euiButton--primary euiButton--fill"
class="euiButton euiButton--primary euiButton--small euiButton--fill"
type="button"
>
<span
Expand Down Expand Up @@ -397,7 +397,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
class="euiModalFooter"
>
<button
class="euiButton euiButton--primary euiButton--fill"
class="euiButton euiButton--primary euiButton--small euiButton--fill"
type="button"
>
<span
Expand Down Expand Up @@ -560,7 +560,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
class="euiModalFooter"
>
<button
class="euiButton euiButton--primary euiButton--fill"
class="euiButton euiButton--primary euiButton--small euiButton--fill"
type="button"
>
<span
Expand Down Expand Up @@ -723,7 +723,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
class="euiModalFooter"
>
<button
class="euiButton euiButton--primary euiButton--fill"
class="euiButton euiButton--primary euiButton--small euiButton--fill"
type="button"
>
<span
Expand Down Expand Up @@ -874,7 +874,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
class="euiModalFooter"
>
<button
class="euiButton euiButton--primary euiButton--fill"
class="euiButton euiButton--primary euiButton--small euiButton--fill"
type="button"
>
<span
Expand Down Expand Up @@ -1135,52 +1135,59 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
<div
className="euiModalFooter"
>
<EuiButton
<EuiSmallButton
fill={true}
onClick={[MockFunction]}
>
<EuiButtonDisplay
baseClassName="euiButton"
disabled={false}
element="button"
<EuiButton
fill={true}
isDisabled={false}
onClick={[MockFunction]}
type="button"
size="s"
>
<button
className="euiButton euiButton--primary euiButton--fill"
<EuiButtonDisplay
baseClassName="euiButton"
disabled={false}
element="button"
fill={true}
isDisabled={false}
onClick={[MockFunction]}
style={
Object {
"minWidth": undefined,
}
}
size="s"
type="button"
>
<EuiButtonContent
className="euiButton__content"
iconSide="left"
textProps={
<button
className="euiButton euiButton--primary euiButton--small euiButton--fill"
disabled={false}
onClick={[MockFunction]}
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"
>
Close
<span
className="euiButton__text"
>
Close
</span>
</span>
</span>
</EuiButtonContent>
</button>
</EuiButtonDisplay>
</EuiButton>
</EuiButtonContent>
</button>
</EuiButtonDisplay>
</EuiButton>
</EuiSmallButton>
</div>
</EuiModalFooter>
</div>
Expand Down
Loading
Loading