Skip to content

Commit

Permalink
Revert "Fit and Finish UX Fixes (opensearch-project#263) (opensearch-…
Browse files Browse the repository at this point in the history 
…project#269)"

This reverts commit b3dd31c.
  • Loading branch information
@jowg-amazon
jowg-amazon committed Sep 24, 2024
1 parent 98f0572 commit 618d6b1
Show file tree
Hide file tree
Showing 26 changed files with 174 additions and 163 deletions.
8 changes: 4 additions & 4 deletions public/components/ContentPanel/ContentPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
EuiFlexItem,
EuiHorizontalRule,
EuiPanel,
EuiTitle,
EuiText,
} from '@elastic/eui';
import React from 'react';

Expand Down Expand Up @@ -40,7 +40,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
alignItems="center"
>
<EuiFlexItem>
<EuiTitle size={titleSize}>
<EuiText size={titleSize}>
<h2>
{title}
{total !== undefined ? (
Expand All @@ -49,7 +49,7 @@ const ContentPanel: React.SFC<ContentPanelProps> = ({
>{` (${total})`}</span>
) : null}
</h2>
</EuiTitle>
</EuiText>
</EuiFlexItem>
{actions ? (
<EuiFlexItem grow={false}>
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
24 changes: 14 additions & 10 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"
>
<h2
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Testing
</h2>
<h2>
Testing
</h2>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand All @@ -37,7 +39,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 +59,20 @@ exports[`<ContentPanel /> spec renders with empty actions 1`] = `
<div
class="euiFlexItem"
>
<h2
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Testing
</h2>
<h2>
Testing
</h2>
</div>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
/>
<div
style="padding: 0px;"
style="padding: 0px 10px;"
>
<div>
Testing ContentPanel
Expand Down
4 changes: 2 additions & 2 deletions public/pages/Channels/Channels.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,11 +277,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
2 changes: 1 addition & 1 deletion public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
View file
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
68 changes: 40 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 @@ -4,13 +4,13 @@ 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"
Expand All @@ -25,12 +25,12 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
</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 +48,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 +57,13 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
<div
class="euiFlexItem"
>
<h2
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Name and description
</h2>
<h2>
Name and description
</h2>
</div>
</div>
</div>
<hr
Expand Down Expand Up @@ -145,6 +148,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 +157,13 @@ exports[`<ChannelDetails/> spec handles a non-existing channel 1`] = `
<div
class="euiFlexItem"
>
<h2
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Configurations
</h2>
<h2>
Configurations
</h2>
</div>
</div>
</div>
<hr
Expand All @@ -174,13 +180,13 @@ 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"
Expand All @@ -195,12 +201,12 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
</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 +224,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 +233,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
<div
class="euiFlexItem"
>
<h2
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Name and description
</h2>
<h2>
Name and description
</h2>
</div>
</div>
</div>
<hr
Expand Down Expand Up @@ -315,6 +324,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 +333,13 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
<div
class="euiFlexItem"
>
<h2
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Configurations
</h2>
<h2>
Configurations
</h2>
</div>
</div>
</div>
<hr
Expand All @@ -343,13 +355,13 @@ 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"
Expand All @@ -364,12 +376,12 @@ exports[`<ChannelDetails/> spec renders the component 1`] = `
</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
22 changes: 12 additions & 10 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"
>
<h2
class="euiTitle euiTitle--small"
<div
class="euiText euiText--small"
>
Channels
<span
style="color: rgb(159, 159, 159); font-weight: 300;"
>
(0)
</span>
</h2>
<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 @@ -106,7 +108,7 @@ exports[`<Channels/> spec renders the empty component 1`] = `
style="padding: initial;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionRow euiFlexGroup--responsive"
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
Expand Down
2 changes: 1 addition & 1 deletion public/pages/Channels/components/ChannelControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const ChannelControls = (props: ChannelControlsProps) => {
}

return (
<EuiFlexGroup gutterSize={'m'}>
<EuiFlexGroup>
<EuiFlexItem>
<EuiCompressedFieldSearch
fullWidth={true}
Expand Down
Loading

0 comments on commit 618d6b1

Please sign in to comment.