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

Jump to bottom

Revert fit and finish changes from 2.17 #283

Merged
merged 4 commits into from
Sep 24, 2024
Merged

Revert fit and finish changes from 2.17 #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f2aaf3a
Revert "[Backport 2.17] Fit and Finish UX Fixes Pt 2. (#275)"
jowg-amazon Sep 24, 2024
3f820bf
Revert "Fit and Finish UX Fixes (#263) (#269)"
jowg-amazon Sep 24, 2024
6f68631
Revert "Use TopNavControlButtonData for channel test button (#243) (#…
jowg-amazon Sep 24, 2024
dd92b6f
Revert "[Fit & Finish] Updated Fit and Finish guidelines (#256) (#259)"
jowg-amazon Sep 24, 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/components/ContentPanel/ContentPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import React from 'react';

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

const ContentPanel: React.SFC<ContentPanelProps> = ({
title = '',
titleSize = 's',
titleSize = 'l',
total = undefined,
bodyStyles = {},
panelStyles = {},
Expand All @@ -41,14 +41,14 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
>
<EuiFlexItem>
<EuiTitle size={titleSize}>
<h2>
<h3>
{title}
{total !== undefined ? (
<span
style={{ color: '#9f9f9f', fontWeight: 300 }}
>{` (${total})`}</span>
) : null}
</h2>
</h3>
</EuiTitle>
</EuiFlexItem>
{actions ? (
Expand All @@ -70,7 +70,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({

<EuiHorizontalRule margin="s" className={horizontalRuleClassName} />

<div style={{ padding: '0px', ...bodyStyles }}>{children}</div>
<div style={{ padding: '0px 10px', ...bodyStyles }}>{children}</div>
</EuiPanel>
);

Expand Down
16 changes: 8 additions & 8 deletions public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
<div
class="euiFlexItem"
>
<h2
class="euiTitle euiTitle--small"
<h3
class="euiTitle euiTitle--large"
>
Testing
</h2>
</h3>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand All @@ -37,7 +37,7 @@ exports[`<ContentPanel /> spec renders the component 1`] = `
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
/>
<div
style="padding: 0px;"
style="padding: 0px 10px;"
>
<div>
Testing ContentPanel
Expand All @@ -57,18 +57,18 @@ exports[`<ContentPanel /> spec renders with empty actions 1`] = `
<div
class="euiFlexItem"
>
<h2
class="euiTitle euiTitle--small"
<h3
class="euiTitle euiTitle--large"
>
Testing
</h2>
</h3>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
/>
<div
style="padding: 0px;"
style="padding: 0px 10px;"
>
<div>
Testing ContentPanel
Expand Down
13 changes: 6 additions & 7 deletions public/pages/Channels/Channels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ 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 @@ -258,8 +257,8 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
isSelectable={true}
selection={selection}
noItemsMessage={<EuiEmptyPrompt
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>}
title={<h2>No channels to display</h2>}
body="To send or receive notifications, you will need to create a notification channel."
actions={<EuiSmallButton href={`#${ROUTES.CREATE_CHANNEL}`}>
Create channel
</EuiSmallButton>} />}
Expand All @@ -277,11 +276,11 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
appRightControls={headerControls}
appLeftControls={[{ renderComponent: totalChannels }]}
/>
<ContentPanel panelStyles={{ padding: this.state.total < 1? '16px 16px 0px' : '16px' }}>
<ContentPanel>
<div style={{ marginBottom: '10px' }}>
<div style={{ display: 'flex', alignItems: 'center' }}>
{channelControlsComponent}
<div style={{ marginLeft: '16px' }}>
<div style={{ marginLeft: '10px' }}>
{channelActionsComponent}
</div>
</div>
Expand Down Expand Up @@ -310,7 +309,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
}
bodyStyles={{ padding: 'initial' }}
title="Channels"
titleSize="s"
titleSize="m"
total={this.state.total}
>
{channelControlsComponent}
Expand All @@ -319,7 +318,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
</ContentPanel>
)}
</>

);
}
};
Expand Down
10 changes: 1 addition & 9 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 @@ -2,7 +2,7 @@

exports[`<ChannelControls /> spec renders the component 1`] = `
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
Expand Down Expand Up @@ -91,14 +91,6 @@ exports[`<ChannelControls /> spec renders the component 1`] = `
</button>
</div>
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFilterGroup"
>
<div
class="euiPopover euiPopover--anchorDownCenter"
>
Expand Down
74 changes: 36 additions & 38 deletions public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,31 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
<div>
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 8px 0px 0px;"
style="max-width: 1316px;"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiText euiText--small"
<h1
class="euiTitle euiTitle--large"
>
<h1>
-
</h1>
</div>
-
</h1>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
style="padding-top: 5px;"
style="padding-bottom: 5px;"
/>
</div>
</div>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
Expand All @@ -48,6 +46,7 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
/>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="max-width: 1300px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand All @@ -56,11 +55,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
<div
class="euiFlexItem"
>
<h2
<h3
class="euiTitle euiTitle--small"
>
Name and description
</h2>
</h3>
</div>
</div>
<hr
Expand Down Expand Up @@ -145,6 +144,7 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
/>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="max-width: 1300px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand All @@ -153,11 +153,11 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
<div
class="euiFlexItem"
>
<h2
<h3
class="euiTitle euiTitle--small"
>
Configurations
</h2>
</h3>
</div>
</div>
<hr
Expand All @@ -174,33 +174,31 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
<div>
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 8px 0px 0px;"
style="max-width: 1316px;"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiText euiText--small"
<h1
class="euiTitle euiTitle--large"
>
<h1>
-
</h1>
</div>
-
</h1>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
style="padding-top: 5px;"
style="padding-bottom: 5px;"
/>
</div>
</div>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
Expand All @@ -218,6 +216,7 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
/>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="max-width: 1300px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand All @@ -226,11 +225,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
<div
class="euiFlexItem"
>
<h2
<h3
class="euiTitle euiTitle--small"
>
Name and description
</h2>
</h3>
</div>
</div>
<hr
Expand Down Expand Up @@ -315,6 +314,7 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
/>
<div
class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
style="max-width: 1300px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
Expand All @@ -323,11 +323,11 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
<div
class="euiFlexItem"
>
<h2
<h3
class="euiTitle euiTitle--small"
>
Configurations
</h2>
</h3>
</div>
</div>
<hr
Expand All @@ -343,33 +343,31 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
exports[`<ChannelDetails/> spec renders the component 1`] = `
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
style="padding: 0px 8px 0px 0px;"
style="max-width: 1316px;"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="euiText euiText--small"
<h1
class="euiTitle euiTitle--large"
>
<h1>
-
</h1>
</div>
-
</h1>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
style="padding-top: 5px;"
style="padding-bottom: 5px;"
/>
</div>
</div>
<div
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
Expand Down
Loading
Loading