Remove PF style overrides from card, breadcrumb, sidenav, tooltip, and modal components

awx/ui_next/src/app.scss

@@ -3,41 +3,6 @@
   height: 100%;
 }
 
-//
-// sidebar overrides
-//
-
-.pf-c-page__sidebar {
-  --pf-c-page__sidebar--md--Width: 255px;
-
-  .pf-c-nav {
-    overflow-y: auto;
-
-    .pf-c-nav__section {
-      --pf-c-nav__section--MarginTop: 8px;
-    }
-
-    .pf-c-nav__section + .pf-c-nav__section {
-      --pf-c-nav__section--MarginTop: 8px;
-    }
-
-    .pf-c-nav__simple-list .pf-c-nav__link {
-      --pf-c-nav__simple-list-link--PaddingBottom: 6px;
-      --pf-c-nav__simple-list-link--PaddingTop: 6px;
-    }
-
-    .pf-c-nav__section-title {
-      --pf-c-nav__section-title--PaddingLeft: 24px;
-    }
-
-    .pf-c-nav__link {
-      display: flex;
-      align-items: center;
-      padding-right: 64px;
-    }
-  }
-}
-
 //
 // data list overrides
 //
@@ -87,102 +52,6 @@
   }
 }
 
-//
-// pf modal overrides
-//
-
-.awx-c-modal.pf-c-modal-box {
-  margin: 0;
-  padding: 24px;
-  width: 600px;
-
-  .pf-c-modal-box__body {
-    overflow: auto;
-  }
-
-  .pf-c-modal-box__footer > .pf-c-button:not(:last-child) {
-    margin-right: 20px;
-  }
-}
-
-.pf-c-modal-box__footer {
-  --pf-c-modal-box__footer--PaddingTop: 20px;
-  --pf-c-modal-box__footer--PaddingRight: 20px;
-  --pf-c-modal-box__footer--PaddingBottom: 20px;
-  --pf-c-modal-box__footer--PaddingLeft: 20px;
-  --pf-c-modal-box__footer--MarginTop: 24px;
-  justify-content: flex-end;
-}
-
-.pf-c-modal-box__header {
-  --pf-c-modal-box__header--PaddingTop: 10px;
-  --pf-c-modal-box__header--PaddingRight: 0;
-  --pf-c-modal-box__header--PaddingBottom: 0;
-  --pf-c-modal-box__header--PaddingLeft: 20px;
-}
-
-.pf-c-modal-box__body {
-  --pf-c-modal-box__body--PaddingLeft: 20px;
-  --pf-c-modal-box__body--PaddingRight: 20px;
-  --pf-c-modal-box__body--PaddingBottom: 5px;
-}
-
-//
-// pf tooltip overrides
-//
-
-.pf-c-tooltip__content {
-  --pf-c-tooltip__content--PaddingTop: 0.71rem;
-  --pf-c-tooltip__content--PaddingRight: 0.71rem;
-  --pf-c-tooltip__content--PaddingBottom: 0.71rem;
-  --pf-c-tooltip__content--PaddingLeft: 0.71rem;
-}
-// higher specificity needed to override PF styles added dynamically to page
-.pf-c-tooltip .pf-c-tooltip__content {
-  text-align: left;
-}
-
-//
-// pf empty state overrides
-//
-
-.pf-c-empty-state {
-  align-self: center;
-}
-
-//
-// assorted custom component styles
-// note that these should be given a consistent prefix
-// and bem style, as well as moved into component-based scss files
-//
-
-.awx-c-card {
-  position: relative;
-}
-
-//
-// PF Alert notification component overrides
-//
-
-.pf-c-alert__title {
-  --pf-c-alert__title--PaddingTop: 20px;
-  --pf-c-alert__title--PaddingRight: 20px;
-  --pf-c-alert__title--PaddingBottom: 20px;
-  --pf-c-alert__title--PaddingLeft: 20px;
-}
-
-.pf-c-alert__description {
-  --pf-c-alert__description--PaddingRight: 20px;
-  --pf-c-alert__description--PaddingBottom: 20px;
-  --pf-c-alert__description--PaddingLeft: 20px;
-}
-
-.pf-c-alert {
-  position: absolute;
-  width: 100%;
-  z-index: 20;
-}
-
 //
 // AlertModal styles
 //
@@ -246,11 +115,3 @@
     color: var(--pf-global--success-color--200);
   }
 }
-
-//
-// LoginModal overrides
-//
-
-.pf-m-error p.pf-c-form__helper-text {
-  color: var(--pf-global--danger-color--100);
-}

awx/ui_next/src/components/AlertModal/AlertModal.jsx

@@ -30,6 +30,7 @@ export default ({ variant, children, ...props }) => {
   props.isOpen = Boolean(isOpen);
   return (
     <Modal
+      isLarge
       className={`awx-c-modal${variant &&
         ` at-c-alertModal at-c-alertModal--${variant}`}`}
       {...props}

awx/ui_next/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -5,7 +5,7 @@ import {
   PageSectionVariants,
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbHeading as PFBreadcrumbHeading,
+  BreadcrumbHeading,
 } from '@patternfly/react-core';
 import { Link, Route, withRouter } from 'react-router-dom';
 import styled from 'styled-components';
@@ -15,12 +15,6 @@ const PageSection = styled(PFPageSection)`
   padding-bottom: 10px;
 `;
 
-const BreadcrumbHeading = styled(PFBreadcrumbHeading)`
-  --pf-c-breadcrumb__heading--FontSize: 20px;
-  line-height: 24px;
-  flex: 100%;
-`;
-
 const Breadcrumbs = ({ breadcrumbConfig }) => {
   const { light } = PageSectionVariants;
 

awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx

@@ -10,7 +10,7 @@ import {
 import { CubesIcon } from '@patternfly/react-icons';
 
 const ContentEmpty = ({ i18n, title = '', message = '' }) => (
-  <EmptyState>
+  <EmptyState variant="full">
     <EmptyStateIcon icon={CubesIcon} />
     <Title size="lg">{title || i18n._(t`No items found.`)}</Title>
     <EmptyStateBody>{message}</EmptyStateBody>

awx/ui_next/src/components/ContentError/ContentError.jsx

@@ -39,7 +39,7 @@ function ContentError({ error, children, isNotFound, i18n }) {
       {is401 ? (
         <Redirect to="/login" />
       ) : (
-        <EmptyState>
+        <EmptyState variant="full">
           <EmptyStateIcon icon={ExclamationTriangleIcon} />
           <Title size="lg">
             {is404 ? i18n._(t`Not Found`) : i18n._(t`Something went wrong...`)}

awx/ui_next/src/components/ContentLoading/ContentLoading.jsx

@@ -5,7 +5,7 @@ import { EmptyState, EmptyStateBody } from '@patternfly/react-core';
 
 // TODO: Better loading state - skeleton lines / spinner, etc.
 const ContentLoading = ({ className, i18n }) => (
-  <EmptyState className={className}>
+  <EmptyState variant="full" className={className}>
     <EmptyStateBody>{i18n._(t`Loading...`)}</EmptyStateBody>
   </EmptyState>
 );

awx/ui_next/src/components/Lookup/Lookup.jsx

@@ -139,7 +139,7 @@ function Lookup(props) {
         </ChipHolder>
       </InputGroup>
       <Modal
-        className="awx-c-modal"
+        isLarge
         title={i18n._(t`Select ${header || i18n._(t`Items`)}`)}
         isOpen={isModalOpen}
         onClose={closeModal}
@@ -148,9 +148,7 @@ function Lookup(props) {
             key="select"
             variant="primary"
             onClick={save}
-            style={
+            isDisabled={required && selectedItems.length === 0}
-              required && selectedItems.length === 0 ? { display: 'none' } : {}
-            }
           >
             {i18n._(t`Select`)}
           </Button>,

awx/ui_next/src/components/PaginatedDataList/PaginatedDataListItem.jsx

@@ -27,7 +27,7 @@ export default function PaginatedDataListItem({ item }) {
       <DataListItemRow>
         <DataListItemCells
           dataListCells={[
-            <DataListCell key="team-name">
+            <DataListCell key="name">
               <DetailWrapper>
                 <Link to={{ pathname: item.url }}>
                   <b id={`items-list-item-${item.id}`}>{item.name}</b>

awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap

@@ -73,7 +73,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   aria-describedby="pf-modal-0"
                   aria-label="Remove {0} Access"
                   aria-modal="true"
-                  class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                  class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
                   role="dialog"
                 >
                   <button
@@ -154,7 +154,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
       className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
       hideTitle={false}
       isFooterLeftAligned={false}
-      isLarge={false}
+      isLarge={true}
       isOpen={true}
       isSmall={false}
       onClose={[Function]}
@@ -174,7 +174,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   aria-describedby="pf-modal-0"
                   aria-label="Remove {0} Access"
                   aria-modal="true"
-                  class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                  class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
                   role="dialog"
                 >
                   <button
@@ -274,7 +274,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
           hideTitle={false}
           id="pf-modal-0"
           isFooterLeftAligned={false}
-          isLarge={false}
+          isLarge={true}
           isOpen={true}
           isSmall={false}
           onClose={[Function]}
@@ -303,7 +303,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                   <ModalBox
                     className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
                     id="pf-modal-0"
-                    isLarge={false}
+                    isLarge={true}
                     isSmall={false}
                     style={Object {}}
                     title="Remove {0} Access"
@@ -312,7 +312,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
                       aria-describedby="pf-modal-0"
                       aria-label="Remove {0} Access"
                       aria-modal="true"
-                      className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
+                      className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger pf-m-lg"
                       role="dialog"
                       style={Object {}}
                     >

awx/ui_next/src/components/Sparkline/StatusIcon.jsx

@@ -75,7 +75,7 @@ const SkippedBottom = styled.div`
 
 const StatusIcon = ({ status, ...props }) => {
   return (
-    <div className="at-c-statusIcon" {...props}>
+    <div {...props}>
       {status === 'running' && <RunningJob />}
       {(status === 'new' ||
         status === 'pending' ||

awx/ui_next/src/screens/Credential/Credential.jsx

@@ -63,7 +63,7 @@ function Credential({ i18n, setBreadcrumb }) {
   if (!hasContentLoading && contentError) {
     return (
       <PageSection>
-        <Card className="awx-c-card">
+        <Card>
           <ContentError error={contentError}>
             {contentError.response && contentError.response.status === 404 && (
               <span>
@@ -79,7 +79,7 @@ function Credential({ i18n, setBreadcrumb }) {
 
   return (
     <PageSection>
-      <Card className="awx-c-card">
+      <Card>
         {cardHeader}
         <Switch>
           <Redirect

awx/ui_next/src/screens/Host/Host.jsx

@@ -117,7 +117,7 @@ function Host({ inventory, i18n, setBreadcrumb }) {
 
   if (!hasContentLoading && contentError) {
     return (
-      <Card className="awx-c-card">
+      <Card>
         <ContentError error={contentError}>
           {contentError.response && contentError.response.status === 404 && (
             <span>
@@ -141,7 +141,7 @@ function Host({ inventory, i18n, setBreadcrumb }) {
   );
 
   return (
-    <Card className="awx-c-card">
+    <Card>
       {cardHeader}
       <Switch>
         {redirect}

awx/ui_next/src/screens/Inventory/Inventory.jsx

@@ -92,7 +92,7 @@ function Inventory({ i18n, setBreadcrumb }) {
   if (!hasContentLoading && contentError) {
     return (
       <PageSection>
-        <Card className="awx-c-card">
+        <Card>
           <ContentError error={contentError}>
             {contentError.response.status === 404 && (
               <span>
@@ -108,7 +108,7 @@ function Inventory({ i18n, setBreadcrumb }) {
 
   return (
     <PageSection>
-      <Card className="awx-c-card">
+      <Card>
         {cardHeader}
         <Switch>
           <Redirect

awx/ui_next/src/screens/Inventory/SmartInventory.jsx

@@ -88,7 +88,7 @@ class SmartInventory extends Component {
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
-          <Card className="awx-c-card">
+          <Card>
             <ContentError error={contentError}>
               {contentError.response.status === 404 && (
                 <span>
@@ -105,7 +105,7 @@ class SmartInventory extends Component {
     }
     return (
       <PageSection>
-        <Card className="awx-c-card">
+        <Card>
           {cardHeader}
           <Switch>
             <Redirect

awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx

@@ -26,7 +26,7 @@ function InventoryGroupForm({
   };
 
   return (
-    <Card className="awx-c-card">
+    <Card>
       <CardBody>
         <Formik initialValues={initialValues} onSubmit={handleSubmit}>
           {formik => (

awx/ui_next/src/screens/Job/Job.jsx

@@ -83,7 +83,7 @@ class Job extends Component {
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
-          <Card className="awx-c-card">
+          <Card>
             <ContentError error={contentError}>
               {contentError.response.status === 404 && (
                 <span>

awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx

@@ -34,10 +34,9 @@ const VariablesInput = styled(_VariablesInput)`
 
 const StatusDetailValue = styled.div`
   align-items: center;
-  display: inline-flex;
+  display: inline-grid;
-  .at-c-statusIcon {
+  grid-gap: 10px;
-    margin-right: 10px;
+  grid-template-columns: auto auto;
-  }
 `;
 
 const VERBOSITY = {

awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx

@@ -26,10 +26,9 @@ const Modal = styled(PFModal)`
 
 const HostNameDetailValue = styled.div`
   align-items: center;
-  display: inline-flex;
+  display: inline-grid;
-  .at-c-statusIcon {
+  grid-gap: 10px;
-    margin-right: 10px;
+  grid-template-columns: auto auto;
-  }
 `;
 
 const Tabs = styled(PFTabs)`

awx/ui_next/src/screens/Job/JobTypeRedirect.jsx

@@ -54,7 +54,7 @@ class JobTypeRedirect extends Component {
     if (error) {
       return (
         <PageSection>
-          <Card className="awx-c-card">
+          <Card>
             {error === NOT_FOUND ? (
               <ContentError isNotFound>
                 <Link to="/jobs">{i18n._(`View all Jobs`)}</Link>

awx/ui_next/src/screens/NotFound.jsx

@@ -5,7 +5,7 @@ import ContentError from '@components/ContentError';
 function NotFound() {
   return (
     <PageSection>
-      <Card className="awx-c-card">
+      <Card>
         <ContentError isNotFound />
       </Card>
     </PageSection>

awx/ui_next/src/screens/Organization/Organization.jsx

@@ -147,7 +147,7 @@ class Organization extends Component {
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
-          <Card className="awx-c-card">
+          <Card>
             <ContentError error={contentError}>
               {contentError.response.status === 404 && (
                 <span>
@@ -165,7 +165,7 @@ class Organization extends Component {
 
     return (
       <PageSection>
-        <Card className="awx-c-card">
+        <Card>
           {cardHeader}
           <Switch>
             <Redirect

awx/ui_next/src/screens/Project/Project.jsx

@@ -167,7 +167,7 @@ class Project extends Component {
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
-          <Card className="awx-c-card">
+          <Card>
             <ContentError error={contentError}>
               {contentError.response.status === 404 && (
                 <span>
@@ -183,7 +183,7 @@ class Project extends Component {
 
     return (
       <PageSection>
-        <Card className="awx-c-card">
+        <Card>
           {cardHeader}
           <Switch>
             <Redirect from="/projects/:id" to="/projects/:id/details" exact />

awx/ui_next/src/screens/Team/Team.jsx

@@ -59,7 +59,7 @@ function Team({ i18n, setBreadcrumb }) {
   if (!hasContentLoading && contentError) {
     return (
       <PageSection>
-        <Card className="awx-c-card">
+        <Card>
           <ContentError error={contentError}>
             {contentError.response.status === 404 && (
               <span>
@@ -75,7 +75,7 @@ function Team({ i18n, setBreadcrumb }) {
 
   return (
     <PageSection>
-      <Card className="awx-c-card">
+      <Card>
         {cardHeader}
         <Switch>
           <Redirect from="/teams/:id" to="/teams/:id/details" exact />

awx/ui_next/src/screens/Template/Template.jsx

@@ -135,7 +135,7 @@ class Template extends Component {
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
-          <Card className="awx-c-card">
+          <Card>
             <ContentError error={contentError}>
               {contentError.response.status === 404 && (
                 <span>
@@ -150,7 +150,7 @@ class Template extends Component {
     }
 
     return (
-      <Card className="awx-c-card">
+      <Card>
         {cardHeader}
         <Switch>
           <Redirect

awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx

@@ -79,7 +79,7 @@ class WorkflowJobTemplate extends Component {
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
-          <Card className="awx-c-card">
+          <Card>
             <ContentError error={contentError}>
               {contentError.response.status === 404 && (
                 <span>
@@ -94,7 +94,7 @@ class WorkflowJobTemplate extends Component {
     }
 
     return (
-      <Card className="awx-c-card">
+      <Card>
         {cardHeader}
         <Switch>
           <Redirect

awx/ui_next/src/screens/User/User.jsx

@@ -96,7 +96,7 @@ class User extends Component {
     if (!hasContentLoading && contentError) {
       return (
         <PageSection>
-          <Card className="awx-c-card">
+          <Card>
             <ContentError error={contentError}>
               {contentError.response.status === 404 && (
                 <span>
@@ -112,7 +112,7 @@ class User extends Component {
 
     return (
       <PageSection>
-        <Card className="awx-c-card">
+        <Card>
           {cardHeader}
           <Switch>
             <Redirect from="/users/:id" to="/users/:id/details" exact />