Revert fit and finish changes from 2.17 (#283)

* Revert "[Backport 2.17] Fit and Finish UX Fixes Pt 2. (#275)" This reverts commit 5ac0919. Signed-off-by: Joanne Wang <jowg@amazon.com> * Revert "Fit and Finish UX Fixes (#263) (#269)" This reverts commit b3dd31c. Signed-off-by: Joanne Wang <jowg@amazon.com> * Revert "Use TopNavControlButtonData for channel test button (#243) (#268)" This reverts commit 127eae4. Signed-off-by: Joanne Wang <jowg@amazon.com> * Revert "[Fit & Finish] Updated Fit and Finish guidelines (#256) (#259)" This reverts commit fb48dbc. Signed-off-by: Joanne Wang <jowg@amazon.com> --------- Signed-off-by: Joanne Wang <jowg@amazon.com>
opensearch-project · Sep 24, 2024 · 184340b · 184340b
1 parent 5ac0919
commit 184340b
Show file tree

Hide file tree

Showing 45 changed files with 265 additions and 545 deletions.
diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx
@@ -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;
@@ -25,7 +25,7 @@ interface ContentPanelProps {
 
 const ContentPanel: React.SFC<ContentPanelProps> = ({
   title = '',
-  titleSize = 's',
+  titleSize = 'l',
   total = undefined,
   bodyStyles = {},
   panelStyles = {},
@@ -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 ? (
@@ -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>
 );
 

diff --git a/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap b/public/components/__tests__/__snapshots__/ContentPanel.test.tsx.snap
@@ -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"
@@ -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
@@ -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

diff --git a/public/pages/Channels/Channels.tsx b/public/pages/Channels/Channels.tsx
@@ -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';
@@ -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>} />}
@@ -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>
@@ -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}
@@ -319,7 +318,7 @@ export class Channels extends MDSEnabledComponent<ChannelsProps, ChannelsState>
         </ContentPanel>
       )}
     </>
-
+    
     );
   }
 };

diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelControls.test.tsx.snap
@@ -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"
@@ -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"
       >

diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
@@ -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"
@@ -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"
@@ -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
@@ -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"
@@ -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
@@ -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"
@@ -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"
@@ -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
@@ -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"
@@ -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
@@ -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"