Remove custom styles (#94839)

* Replace custom margin style with EuiFlexGroup gutter * Replace custom padding style with EuiFlexGroup gutter * Remove custom wrapper around Loading on Overview page (alpha) * Replace custom range value output with EuiRange's showInput prop * Remove custom style I'll refer the correct handling of this to design pass * Remove "euiPanel--inset" className, as it doesn't do anything in Amsterdam theme * Remove unused className `euiPanel--noShadow` We're already using hasShadow={false} prop that does the same * Remove `euiPanel--outline` className, as it doesn't do anything in Amsterdam theme * Inline classNames declaration with the goal to remove them later They don't do anything in Amsterdam theme, but I'm not removing them to keep context for design pass. * Remove `eui-textNoWrap` className from buttons, as it's already included in button styles * Remove classNames with no styles attached * Replace custom padding in content_section with EuiSpacer * Remove source-row styles Most of the classNames were redundant and not needed anymore. The ones that were actually used were either replaced with EUI props or deleted, so we could apply EUI styles during design pass. * Replace source_icon styles with EUI components and props * Replace source-card icon styles with EUI prop * Remove className declarations with no styles attached to classes * Fix tests * Increase space between source overview panels * Use smaller icons on source prioritization and connectors pages * Invert SourceIcon default size and size provided via props The default size was "xxl", now it's "m". "m" size is default in EUI, so it's more consistent. * Get rid of   as horizontal spacer
elastic · Mar 17, 2021 · 1b65ea9 · 1b65ea9
1 parent 74b6046
commit 1b65ea9
Show file tree

Hide file tree

Showing 42 changed files with 143 additions and 290 deletions.
diff --git a/...e_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx b/...e_search/public/applications/workplace_search/components/layout/kibana_header_actions.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-import { EuiButtonEmpty, EuiText } from '@elastic/eui';
+import { EuiButtonEmpty, EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { externalUrl, getWorkplaceSearchUrl } from '../../../shared/enterprise_search_url';
 import { NAV } from '../../constants';
@@ -16,23 +16,17 @@ export const WorkplaceSearchHeaderActions: React.FC = () => {
   if (!externalUrl.enterpriseSearchUrl) return null;
 
   return (
-    <>
-      <EuiButtonEmpty
-        href={getWorkplaceSearchUrl('/sources')}
-        target="_blank"
-        iconType="user"
-        style={{ marginRight: 5 }}
-      >
-        <EuiText size="s">{NAV.PERSONAL_DASHBOARD}</EuiText>
-      </EuiButtonEmpty>
-      <EuiButtonEmpty
-        href={getWorkplaceSearchUrl('/search')}
-        target="_blank"
-        iconType="search"
-        style={{ marginRight: 5 }}
-      >
-        <EuiText size="s">{NAV.SEARCH}</EuiText>
-      </EuiButtonEmpty>
-    </>
+    <EuiFlexGroup gutterSize="s">
+      <EuiFlexItem>
+        <EuiButtonEmpty href={getWorkplaceSearchUrl('/sources')} target="_blank" iconType="user">
+          <EuiText size="s">{NAV.PERSONAL_DASHBOARD}</EuiText>
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiButtonEmpty href={getWorkplaceSearchUrl('/search')} target="_blank" iconType="search">
+          <EuiText size="s">{NAV.SEARCH}</EuiText>
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 };
diff --git a/...blic/applications/workplace_search/components/shared/content_section/content_section.scss b/...blic/applications/workplace_search/components/shared/content_section/content_section.scss
diff --git a/.../applications/workplace_search/components/shared/content_section/content_section.test.tsx b/.../applications/workplace_search/components/shared/content_section/content_section.test.tsx
@@ -25,7 +25,7 @@ describe('ContentSection', () => {
     const wrapper = shallow(<ContentSection {...props} className="test" />);
 
     expect(wrapper.prop('data-test-subj')).toEqual('contentSection');
-    expect(wrapper.prop('className')).toEqual('test content-section');
+    expect(wrapper.prop('className')).toEqual('test');
     expect(wrapper.find('.children')).toHaveLength(1);
   });
 
@@ -48,7 +48,7 @@ describe('ContentSection', () => {
     );
 
     expect(wrapper.find(EuiSpacer).first().prop('size')).toEqual('s');
-    expect(wrapper.find(EuiSpacer)).toHaveLength(1);
+    expect(wrapper.find(EuiSpacer)).toHaveLength(2);
     expect(wrapper.find('.header')).toHaveLength(1);
   });
 });
diff --git a/...ublic/applications/workplace_search/components/shared/content_section/content_section.tsx b/...ublic/applications/workplace_search/components/shared/content_section/content_section.tsx
@@ -12,8 +12,6 @@ import { EuiSpacer } from '@elastic/eui';
 import { SpacerSizeTypes } from '../../../types';
 import { ViewContentHeader } from '../view_content_header';
 
-import './content_section.scss';
-
 interface ContentSectionProps {
   children: React.ReactNode;
   className?: string;
@@ -35,7 +33,7 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
   headerSpacer,
   testSubj,
 }) => (
-  <div className={`${className} content-section`} data-test-subj={testSubj}>
+  <div className={className} data-test-subj={testSubj}>
     {title && (
       <>
         <ViewContentHeader title={title} titleSize="s" description={description} action={action} />
@@ -44,5 +42,6 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
       </>
     )}
     {children}
+    <EuiSpacer size={'xxl'} />
   </div>
 );
diff --git a/...ublic/applications/workplace_search/components/shared/license_callout/license_callout.tsx b/...ublic/applications/workplace_search/components/shared/license_callout/license_callout.tsx
@@ -19,22 +19,17 @@ export const LicenseCallout: React.FC<LicenseCalloutProps> = ({ message }) => {
   const title = (
     <>
       {message}{' '}
-      <EuiLink
-        className="wsLicenseLink"
-        target="_blank"
-        external
-        href={ENT_SEARCH_LICENSE_MANAGEMENT}
-      >
+      <EuiLink target="_blank" external href={ENT_SEARCH_LICENSE_MANAGEMENT}>
         <strong>Explore Platinum features</strong>
       </EuiLink>
     </>
   );
 
   return (
-    <div className="wsLicenseCallout">
+    <div>
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem grow={false}>
-          <div className="wsLicenseIcon">
+          <div>
             <strong>&#8593;</strong>
           </div>
         </EuiFlexItem>

diff --git a/...earch/public/applications/workplace_search/components/shared/source_icon/source_icon.scss b/...earch/public/applications/workplace_search/components/shared/source_icon/source_icon.scss
diff --git a/...h/public/applications/workplace_search/components/shared/source_icon/source_icon.test.tsx b/...h/public/applications/workplace_search/components/shared/source_icon/source_icon.test.tsx
@@ -14,16 +14,10 @@ import { EuiIcon } from '@elastic/eui';
 import { SourceIcon } from './';
 
 describe('SourceIcon', () => {
-  it('renders unwrapped icon', () => {
+  it('renders', () => {
     const wrapper = shallow(<SourceIcon name="foo" serviceType="custom" />);
 
     expect(wrapper.find(EuiIcon)).toHaveLength(1);
     expect(wrapper.find('.user-group-source')).toHaveLength(0);
   });
-
-  it('renders wrapped icon', () => {
-    const wrapper = shallow(<SourceIcon name="foo" wrapped serviceType="custom" />);
-
-    expect(wrapper.find('.wrapped-icon')).toHaveLength(1);
-  });
 });
diff --git a/...search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx b/...search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx
@@ -11,33 +11,15 @@ import { camelCase } from 'lodash';
 
 import { EuiIcon, IconSize } from '@elastic/eui';
 
-import './source_icon.scss';
-
 import { images } from '../assets/source_icons';
 
 interface SourceIconProps {
   serviceType: string;
   name: string;
   className?: string;
-  wrapped?: boolean;
   size?: IconSize;
 }
 
-export const SourceIcon: React.FC<SourceIconProps> = ({
-  name,
-  serviceType,
-  className,
-  wrapped,
-  size = 'xxl',
-}) => {
-  const icon = (
-    <EuiIcon type={images[camelCase(serviceType)]} title={name} className={className} size={size} />
-  );
-  return wrapped ? (
-    <div className="wrapped-icon" title={name}>
-      {icon}
-    </div>
-  ) : (
-    <>{icon}</>
-  );
-};
+export const SourceIcon: React.FC<SourceIconProps> = ({ name, serviceType, className, size }) => (
+  <EuiIcon type={images[camelCase(serviceType)]} title={name} className={className} size={size} />
+);
diff --git a/..._search/public/applications/workplace_search/components/shared/source_row/source_row.scss b/..._search/public/applications/workplace_search/components/shared/source_row/source_row.scss
diff --git a/...rch/public/applications/workplace_search/components/shared/source_row/source_row.test.tsx b/...rch/public/applications/workplace_search/components/shared/source_row/source_row.test.tsx
@@ -73,7 +73,7 @@ describe('SourceRow', () => {
     };
     const wrapper = shallow(<SourceRow isOrganization source={source} />);
 
-    expect(wrapper.find('.source-row__document-count').contains('Remote')).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="SourceDocumentCount"]').contains('Remote')).toBeTruthy();
   });
 
   it('renders details link', () => {

diff --git a/...e_search/public/applications/workplace_search/components/shared/source_row/source_row.tsx b/...e_search/public/applications/workplace_search/components/shared/source_row/source_row.tsx
@@ -7,7 +7,6 @@
 
 import React from 'react';
 
-import classNames from 'classnames';
 // Prefer importing entire lodash library, e.g. import { get } from "lodash"
 // eslint-disable-next-line no-restricted-imports
 import _kebabCase from 'lodash/kebabCase';
@@ -35,8 +34,6 @@ import {
 import { ContentSourceDetails } from '../../../types';
 import { SourceIcon } from '../source_icon';
 
-import './source_row.scss';
-
 const CREDENTIALS_INVALID_ERROR_REASON = 1;
 
 export interface ISourceRow {
@@ -72,15 +69,6 @@ export const SourceRow: React.FC<SourceRowProps> = ({
   const showFix =
     isOrganization && hasError && allowsReauth && errorReason === CREDENTIALS_INVALID_ERROR_REASON;
 
-  const rowClass = classNames(
-    'source-row',
-    { 'content-section--disabled': !searchable },
-    { 'source-row source-row--error': hasError }
-  );
-
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const imageClass = classNames('source-row__icon', { 'source-row__icon--loading': isIndexing });
-
   const fixLink = (
     <EuiLinkTo
       to={getSourcesPath(
@@ -105,7 +93,7 @@ export const SourceRow: React.FC<SourceRowProps> = ({
   );
 
   return (
-    <EuiTableRow data-test-subj="GroupsRow" className={rowClass}>
+    <EuiTableRow data-test-subj="GroupsRow">
       <EuiTableRowCell>
         <EuiFlexGroup
           justifyContent="flexStart"
@@ -114,15 +102,9 @@ export const SourceRow: React.FC<SourceRowProps> = ({
           responsive={false}
         >
           <EuiFlexItem grow={false}>
-            <SourceIcon
-              serviceType={isIndexing ? 'loadingSmall' : serviceType}
-              name={name}
-              className={imageClass}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <span className="source-row__name">{name}</span>
+            <SourceIcon serviceType={isIndexing ? 'loadingSmall' : serviceType} name={name} />
           </EuiFlexItem>
+          <EuiFlexItem>{name}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiTableRowCell>
       <EuiTableRowCell>
@@ -138,17 +120,13 @@ export const SourceRow: React.FC<SourceRowProps> = ({
             </EuiFlexItem>
           )}
           <EuiFlexItem>
-            <EuiText
-              className={`source-row__status source-row__status--${status}`}
-              color={status === 'need-more-config' ? 'default' : 'subdued'}
-              size="xs"
-            >
+            <EuiText color={status === 'need-more-config' ? 'default' : 'subdued'} size="xs">
               {statusMessage}
             </EuiText>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiTableRowCell>
-      <EuiTableRowCell className="source-row__document-count" data-test-subj="SourceDocumentCount">
+      <EuiTableRowCell data-test-subj="SourceDocumentCount">
         {isFederatedSource ? remoteTooltip : parseInt(documentCount, 10).toLocaleString('en-US')}
       </EuiTableRowCell>
       {onSearchableToggle && (

diff --git a/...ch/public/applications/workplace_search/components/shared/sources_table/sources_table.tsx b/...ch/public/applications/workplace_search/components/shared/sources_table/sources_table.tsx
@@ -27,7 +27,7 @@ export const SourcesTable: React.FC<SourcesTableProps> = ({
   if (onSearchableToggle) headerItems.push('Searchable');
 
   return (
-    <EuiTable className="table table--emphasized" responsive={false}>
+    <EuiTable responsive={false}>
       <TableHeader extraCell headerItems={headerItems} />
       <EuiTableBody>
         {sources.map((source) => (

diff --git a/...ations/workplace_search/views/content_sources/components/add_source/add_source_header.tsx b/...ations/workplace_search/views/content_sources/components/add_source/add_source_header.tsx
@@ -34,11 +34,16 @@ export const AddSourceHeader: React.FC<AddSourceHeaderProps> = ({
         responsive={false}
       >
         <EuiFlexItem grow={false}>
-          <SourceIcon serviceType={serviceType} name={name} className="adding-a-source__icon" />
+          <SourceIcon
+            serviceType={serviceType}
+            name={name}
+            className="adding-a-source__icon"
+            size="xxl"
+          />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiText size="m">
-            <h3 className="adding-a-source__name">
+            <h3>
               <EuiTextColor color="default">{name}</EuiTextColor>
             </h3>
           </EuiText>

diff --git a/...ications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx b/...ications/workplace_search/views/content_sources/components/add_source/add_source_list.tsx
@@ -126,7 +126,7 @@ export const AddSourceList: React.FC = () => {
           <EuiFlexGroup justifyContent="center" alignItems="stretch">
             <EuiFlexItem>
               <EuiSpacer size="xl" />
-              <EuiPanel className="euiPanel euiPanel--inset">
+              <EuiPanel>
                 <EuiSpacer size="s" />
                 <EuiSpacer size="xxl" />
                 <EuiEmptyPrompt

diff --git a/...s/workplace_search/views/content_sources/components/add_source/available_sources_list.tsx b/...s/workplace_search/views/content_sources/components/add_source/available_sources_list.tsx
@@ -48,13 +48,7 @@ export const AvailableSourcesList: React.FC<AvailableSourcesListProps> = ({ sour
         title={name}
         description={<></>}
         isDisabled={disabled}
-        icon={
-          <SourceIcon
-            serviceType={serviceType}
-            name={name}
-            className="euiIcon--xxxLarge source-card-icon"
-          />
-        }
+        icon={<SourceIcon serviceType={serviceType} name={name} size="xxl" />}
       />
     );
 
@@ -79,7 +73,7 @@ export const AvailableSourcesList: React.FC<AvailableSourcesListProps> = ({ sour
   };
 
   const visibleSources = (
-    <EuiFlexGrid columns={3} gutterSize="m" className="source-grid" responsive={false}>
+    <EuiFlexGrid columns={3} gutterSize="m" responsive={false}>
       {sources.map((source, i) => (
         <EuiFlexItem key={i} data-test-subj="AvailableSourceCard">
           {getSourceCard(source)}