From 6dd4d04bf5da9b0db50fc1d5e23f8968f3ab4962 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Fri, 6 Mar 2020 14:56:17 -0500
Subject: [PATCH] Move label out to styled component.  Removes dependency on
 internal pf classes.

---
 .../ScheduleOccurrences.jsx                   | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
index fd200a4195..13e7835eec 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { shape } from 'prop-types';
+import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { formatDateString, formatDateStringUTC } from '@util/dates';
@@ -7,6 +8,19 @@ import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core';
 import { DetailName, DetailValue } from '@components/DetailList';
 import MultiButtonToggle from '@components/MultiButtonToggle';
 
+const OccurrencesLabel = styled.div`
+  display: inline-block;
+  font-size: var(--pf-c-form__label--FontSize);
+  font-weight: var(--pf-c-form__label--FontWeight);
+  line-height: var(--pf-c-form__label--LineHeight);
+  color: var(--pf-c-form__label--Color);
+
+  span:first-of-type {
+    font-weight: var(--pf-global--FontWeight--bold);
+    margin-right: 10px;
+  }
+`;
+
 function ScheduleOccurrences({ preview = { local: [], utc: [] }, i18n }) {
   const [mode, setMode] = useState('local');
 
@@ -23,17 +37,10 @@ function ScheduleOccurrences({ preview = { local: [], utc: [] }, i18n }) {
       >
         <Split gutter="sm">
           <SplitItem>
-            <div className="pf-c-form__label">
-              <span
-                className="pf-c-form__label-text"
-                css="font-weight: var(--pf-global--FontWeight--bold)"
-              >
-                {i18n._(t`Occurrences`)}
-              </span>
-              <span css="margin-left: 10px">
-                {i18n._(t`(Limited to first 10)`)}
-              </span>
-            </div>
+            <OccurrencesLabel>
+              <span>{i18n._(t`Occurrences`)}</span>
+              <span>{i18n._(t`(Limited to first 10)`)}</span>
+            </OccurrencesLabel>
           </SplitItem>
           <SplitItem>
             <MultiButtonToggle