Skip to content

Commit

Permalink
[Fit & Finish] Updated Fit and Finish guidelines (#256)
Browse files Browse the repository at this point in the history 
* Updated Fit and Finish guidelines

Signed-off-by: Dan Dong <[email protected]>

* Updated Snapshot Tests
Signed-off-by: Dan Dong <[email protected]>

---------

Signed-off-by: Dan Dong <[email protected]>
  • Loading branch information
@danieldong51
danieldong51 authored Sep 6, 2024
1 parent 9645673 commit 68316a0
Show file tree
Hide file tree
Showing 38 changed files with 476 additions and 222 deletions.
14 changes: 7 additions & 7 deletions public/components/ContentPanel/ContentPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import {
EuiFlexItem,
EuiHorizontalRule,
EuiPanel,
EuiTitle,
EuiText,
} from '@elastic/eui';
import React from 'react';

interface ContentPanelProps {
title?: string;
titleSize?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l';
titleSize?: 'xs' | 's' | 'm';
total?: number;
bodyStyles?: object;
panelStyles?: object;
Expand All @@ -25,7 +25,7 @@ interface ContentPanelProps {

const ContentPanel: React.SFC<ContentPanelProps> = ({
title = '',
titleSize = 'l',
titleSize = 's',
total = undefined,
bodyStyles = {},
panelStyles = {},
Expand All @@ -40,16 +40,16 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
alignItems="center"
>
<EuiFlexItem>
<EuiTitle size={titleSize}>
<h3>
<EuiText size={titleSize}>
<h2>
{title}
{total !== undefined ? (
<span
style={{ color: '#9f9f9f', fontWeight: 300 }}
>{` (${total})`}</span>
) : null}
</h3>
</EuiTitle>
</h2>
</EuiText>
</EuiFlexItem>
{actions ? (
<EuiFlexItem grow={false}>
Expand Down
20 changes: 12 additions & 8 deletions public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
Testing
</h3>
<h2>
Testing
</h2>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down Expand Up @@ -57,11 +59,13 @@ exports[`<ContentPanel /> spec renders with empty actions 1`] = `
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
Testing
</h3>
<h2>
Testing
</h2>
</div>
</div>
</div>
<hr
Expand Down
9 changes: 5 additions & 4 deletions public/pages/Channels/Channels.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
EuiTableSortingType,
EuiTitle,
SortDirection,
EuiText,
} from '@elastic/eui';
import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
import { Pagination } from '@elastic/eui/src/components/basic_table/pagination_bar';
Expand Down Expand Up @@ -257,8 +258,8 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
isSelectable={true}
selection={selection}
noItemsMessage={<EuiEmptyPrompt
title={<h2>No channels to display</h2>}
body="To send or receive notifications, you will need to create a notification channel."
title={<EuiText size="s"><h2>No channels to display</h2></EuiText>}
body={<EuiText size="s">"To send or receive notifications, you will need to create a notification channel."</EuiText>}
actions={<EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
Create channel
</EuiSmallButton>} />}
Expand Down Expand Up @@ -309,7 +310,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
}
bodyStyles={{ padding: 'initial' }}
title="Channels"
titleSize="m"
titleSize="s"
total={this.state.total}
>
{channelControlsComponent}
Expand All @@ -318,7 +319,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
</ContentPanel>
)}
</>

);
}
};
Expand Down
70 changes: 42 additions & 28 deletions public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,13 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
-
</h1>
<h1>
-
</h1>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down Expand Up @@ -55,11 +57,13 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Name and description
</h3>
<h2>
Name and description
</h2>
</div>
</div>
</div>
<hr
Expand Down Expand Up @@ -153,11 +157,13 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Configurations
</h3>
<h2>
Configurations
</h2>
</div>
</div>
</div>
<hr
Expand Down Expand Up @@ -185,11 +191,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
-
</h1>
<h1>
-
</h1>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down Expand Up @@ -225,11 +233,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Name and description
</h3>
<h2>
Name and description
</h2>
</div>
</div>
</div>
<hr
Expand Down Expand Up @@ -323,11 +333,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Configurations
</h3>
<h2>
Configurations
</h2>
</div>
</div>
</div>
<hr
Expand All @@ -354,11 +366,13 @@ exports[`<ChannelDetails/> spec renders the component 1`] = `
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<h1
class="euiTitle euiTitle--large"
<div
class="euiText euiText--small"
>
-
</h1>
<h1>
-
</h1>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down
36 changes: 22 additions & 14 deletions public/pages/Channels/__tests__/__snapshots__/Channels.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,18 @@ exports[`<Channels/> spec renders the empty component 1`] = `
<div
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--medium"
<div
class="euiText euiText--small"
>
Channels
<span
style="color: rgb(159, 159, 159); font-weight: 300;"
>
(0)
</span>
</h3>
<h2>
Channels
<span
style="color: rgb(159, 159, 159); font-weight: 300;"
>
(0)
</span>
</h2>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down Expand Up @@ -490,11 +492,13 @@ exports[`<Channels/> spec renders the empty component 1`] = `
<div
class="euiEmptyPrompt"
>
<h2
class="euiTitle euiTitle--medium"
<div
class="euiText euiText--small euiTitle euiTitle--medium"
>
No channels to display
</h2>
<h2>
No channels to display
</h2>
</div>
<span
class="euiTextColor euiTextColor--subdued"
>
Expand All @@ -504,7 +508,11 @@ exports[`<Channels/> spec renders the empty component 1`] = `
<div
class="euiText euiText--medium"
>
To send or receive notifications, you will need to create a notification channel.
<div
class="euiText euiText--small"
>
"To send or receive notifications, you will need to create a notification channel."
</div>
</div>
</span>
<div
Expand Down
52 changes: 46 additions & 6 deletions public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,13 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
<div
class="euiModalHeader__title"
>
test header
<div
class="euiText euiText--small"
>
<h2>
test header
</h2>
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -313,7 +319,13 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
<div
class="euiModalHeader__title"
>
test header
<div
class="euiText euiText--small"
>
<h2>
test header
</h2>
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -476,7 +488,13 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
<div
class="euiModalHeader__title"
>
test header
<div
class="euiText euiText--small"
>
<h2>
test header
</h2>
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -639,7 +657,13 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
<div
class="euiModalHeader__title"
>
test header
<div
class="euiText euiText--small"
>
<h2>
test header
</h2>
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -790,7 +814,13 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
<div
class="euiModalHeader__title"
>
test header
<div
class="euiText euiText--small"
>
<h2>
test header
</h2>
</div>
</div>
</div>
<div
Expand Down Expand Up @@ -995,7 +1025,17 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
<div
className="euiModalHeader__title"
>
test header
<EuiText
size="s"
>
<div
className="euiText euiText--small"
>
<h2>
test header
</h2>
</div>
</EuiText>
</div>
</EuiModalHeaderTitle>
</div>
Expand Down
Loading

0 comments on commit 68316a0

Please sign in to comment.