External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-04-05 01:59:25 -02:30
Code Issues Packages Projects Releases Wiki Activity

Move label out to styled component. Removes dependency on internal pf classes.

Browse Source
This commit is contained in:
mabashian
2020-03-06 14:56:17 -05:00
parent 21b4455ee6
commit 6dd4d04bf5
1 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { shape } from 'prop-types'; import { shape } from 'prop-types';
import styled from 'styled-components';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { formatDateString, formatDateStringUTC } from '@util/dates'; 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 { DetailName, DetailValue } from '@components/DetailList';
import MultiButtonToggle from '@components/MultiButtonToggle'; 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 }) { function ScheduleOccurrences({ preview = { local: [], utc: [] }, i18n }) {
const [mode, setMode] = useState('local'); const [mode, setMode] = useState('local');
@@ -23,17 +37,10 @@ function ScheduleOccurrences({ preview = { local: [], utc: [] }, i18n }) {
> >
<Split gutter="sm"> <Split gutter="sm">
<SplitItem> <SplitItem>
<div className="pf-c-form__label"> <OccurrencesLabel>
<span <span>{i18n._(t`Occurrences`)}</span>
className="pf-c-form__label-text" <span>{i18n._(t`(Limited to first 10)`)}</span>
css="font-weight: var(--pf-global--FontWeight--bold)" </OccurrencesLabel>
>
{i18n._(t`Occurrences`)}
</span>
<span css="margin-left: 10px">
{i18n._(t`(Limited to first 10)`)}
</span>
</div>
</SplitItem> </SplitItem>
<SplitItem> <SplitItem>
<MultiButtonToggle <MultiButtonToggle