Feedback: Flatten nested CSS where possible

- Prefer setting CSS class overrides on individual EUI components, not on a top-level page + Change CSS class casing from kebab-case to camelCase to better match EUI/Kibana + Remove unnecessary .euiPageContentHeader margin-bottom override by changing the panelPaddingSize of euiPageContent + Decrease engine overview table padding on mobile
scottybollinger · Jul 2, 2020 · 4dafeef · 4dafeef
1 parent 0ce0314
commit 4dafeef
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 44 deletions.
diff --git a/.../enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx b/.../enterprise_search/public/applications/app_search/components/empty_states/empty_state.tsx
@@ -32,13 +32,14 @@ export const EmptyState: React.FC = () => {
   };
 
   return (
-    <EuiPage restrictWidth className="empty-state">
+    <EuiPage restrictWidth>
       <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
         <EngineOverviewHeader />
-        <EuiPageContent>
+        <EuiPageContent className="emptyState">
           <EuiEmptyPrompt
+            className="emptyState__prompt"
             iconType="eyeClosed"
             title={
               <h2>

diff --git a/...nterprise_search/public/applications/app_search/components/empty_states/empty_states.scss b/...nterprise_search/public/applications/app_search/components/empty_states/empty_states.scss
@@ -7,15 +7,13 @@
 /**
  * Empty/Error UI states
  */
-.empty-state {
-  .euiPageContent {
-    min-height: 450px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
+.emptyState {
+  min-height: 450px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
-  .euiEmptyPrompt > .euiIcon {
+  &__prompt > .euiIcon {
     margin-bottom: $euiSizeS;
   }
 }
diff --git a/.../enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx b/.../enterprise_search/public/applications/app_search/components/empty_states/error_state.tsx
@@ -20,14 +20,15 @@ export const ErrorState: React.FC = () => {
   const { enterpriseSearchUrl } = useContext(KibanaContext) as IKibanaContext;
 
   return (
-    <EuiPage restrictWidth className="empty-state">
+    <EuiPage restrictWidth>
       <SetBreadcrumbs isRoot />
       <SendTelemetry action="error" metric="cannot_connect" />
 
       <EuiPageBody>
         <EngineOverviewHeader isButtonDisabled />
-        <EuiPageContent>
+        <EuiPageContent className="emptyState">
           <EuiEmptyPrompt
+            className="emptyState__prompt"
             iconType="alert"
             iconColor="danger"
             title={

diff --git a/...nterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx b/...nterprise_search/public/applications/app_search/components/empty_states/loading_state.tsx
@@ -14,12 +14,12 @@ import './empty_states.scss';
 
 export const LoadingState: React.FC = () => {
   return (
-    <EuiPage restrictWidth className="engine-overview empty-state">
+    <EuiPage restrictWidth>
       <SetBreadcrumbs isRoot />
 
       <EuiPageBody>
         <EngineOverviewHeader />
-        <EuiPageContent>
+        <EuiPageContent className="emptyState">
           <EuiLoadingContent lines={5} />
           <EuiSpacer size="xxl" />
           <EuiLoadingContent lines={4} />

diff --git a/...nterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx b/...nterprise_search/public/applications/app_search/components/empty_states/no_user_state.tsx
@@ -19,14 +19,15 @@ export const NoUserState: React.FC = () => {
   const username = getUserName();
 
   return (
-    <EuiPage restrictWidth className="empty-state">
+    <EuiPage restrictWidth>
       <SetBreadcrumbs isRoot />
       <SendTelemetry action="error" metric="no_as_account" />
 
       <EuiPageBody>
         <EngineOverviewHeader />
-        <EuiPageContent>
+        <EuiPageContent className="emptyState">
           <EuiEmptyPrompt
+            className="emptyState__prompt"
             iconType="lock"
             title={
               <h2>

diff --git a/...ise_search/public/applications/app_search/components/engine_overview/engine_overview.scss b/...ise_search/public/applications/app_search/components/engine_overview/engine_overview.scss
@@ -7,21 +7,21 @@
 /**
  * Engine Overview
  */
-.engine-overview {
+.engineOverview {
   width: 100%;
 
-  .euiPanel {
-    padding: $euiSizeXL;
-  }
+  &__body {
+    padding: $euiSize;
 
-  .euiPageContent .euiPageContentHeader {
-    margin-bottom: $euiSizeM;
+    @include euiBreakpoint('m', 'l', 'xl') {
+      padding: $euiSizeXL;
+    }
   }
+}
 
-  .engine-icon {
-    display: inline-block;
-    width: $euiSize;
-    height: $euiSize;
-    margin-right: $euiSizeXS;
-  }
+.engineIcon {
+  display: inline-block;
+  width: $euiSize;
+  height: $euiSize;
+  margin-right: $euiSizeXS;
 }
diff --git a/...rise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx b/...rise_search/public/applications/app_search/components/engine_overview/engine_overview.tsx
@@ -89,18 +89,18 @@ export const EngineOverview: React.FC = () => {
   if (!engines.length) return <EmptyState />;
 
   return (
-    <EuiPage restrictWidth className="engine-overview">
+    <EuiPage restrictWidth className="engineOverview">
       <SetBreadcrumbs isRoot />
       <SendTelemetry action="viewed" metric="engines_overview" />
 
       <EuiPageBody>
         <EngineOverviewHeader />
 
-        <EuiPageContent>
+        <EuiPageContent panelPaddingSize="s" className="engineOverview__body">
           <EuiPageContentHeader>
             <EuiTitle size="s">
               <h2>
-                <img src={EnginesIcon} alt="" className="engine-icon" />
+                <img src={EnginesIcon} alt="" className="engineIcon" />
                 <FormattedMessage
                   id="xpack.enterpriseSearch.appSearch.enginesOverview.engines"
                   defaultMessage="Engines"
@@ -125,7 +125,7 @@ export const EngineOverview: React.FC = () => {
               <EuiPageContentHeader>
                 <EuiTitle size="s">
                   <h2>
-                    <img src={MetaEnginesIcon} alt="" className="engine-icon" />
+                    <img src={MetaEnginesIcon} alt="" className="engineIcon" />
                     <FormattedMessage
                       id="xpack.enterpriseSearch.appSearch.enginesOverview.metaEngines"
                       defaultMessage="Meta Engines"

diff --git a/.../enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss b/.../enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.scss
@@ -7,13 +7,11 @@
 /**
  * Setup Guide
  */
-.setup-guide {
-  &.euiPage {
-    padding: 0;
-    min-height: 100vh;
-  }
+.setupGuide {
+  padding: 0;
+  min-height: 100vh;
 
-  .euiPageSideBar {
+  &__sidebar {
     flex-basis: 300px;
     flex-shrink: 0;
     padding: $euiSizeL;
@@ -35,7 +33,7 @@
     }
   }
 
-  .euiPageBody {
+  &__body {
     align-self: start;
     padding: $euiSizeL;
 

diff --git a/...s/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx b/...s/enterprise_search/public/applications/app_search/components/setup_guide/setup_guide.tsx
@@ -33,11 +33,11 @@ import './setup_guide.scss';
 
 export const SetupGuide: React.FC = () => {
   return (
-    <EuiPage className="setup-guide">
+    <EuiPage className="setupGuide">
       <SetBreadcrumbs text="Setup Guide" />
       <SendTelemetry action="viewed" metric="setup_guide" />
 
-      <EuiPageSideBar>
+      <EuiPageSideBar className="setupGuide__sidebar">
         <EuiText color="subdued" size="s">
           <strong>
             <FormattedMessage
@@ -70,7 +70,7 @@ export const SetupGuide: React.FC = () => {
           rel="noopener noreferrer"
         >
           <img
-            className="setup-guide__thumbnail"
+            className="setupGuide__thumbnail"
             src={GettingStarted}
             alt={i18n.translate('xpack.enterpriseSearch.setupGuide.videoAlt', {
               defaultMessage:
@@ -100,7 +100,7 @@ export const SetupGuide: React.FC = () => {
         </EuiText>
       </EuiPageSideBar>
 
-      <EuiPageBody>
+      <EuiPageBody className="setupGuide__body">
         <EuiPageContent>
           <EuiSteps
             headingElement="h2"

diff --git a/x-pack/plugins/enterprise_search/public/applications/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/index.test.tsx
@@ -35,6 +35,6 @@ describe('renderApp', () => {
 
   it('renders AppSearch', () => {
     renderApp(AppSearch, core, params, config, plugins);
-    expect(params.element.querySelector('.setup-guide')).not.toBeNull();
+    expect(params.element.querySelector('.setupGuide')).not.toBeNull();
   });
 });