mirror of
https://github.com/Unleash/unleash.git
synced 2025-06-27 01:19:00 +02:00
feat: styling of AND operator in strategies (#9726)
This commit is contained in:
parent
5647fc916e
commit
a92c79e2dd
@ -14,7 +14,7 @@ export const ConstraintSeparator = styled(({ ...props }) => (
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
color: theme.palette.text.primary,
|
||||
background: theme.palette.background.application,
|
||||
borderRadius: theme.shape.borderRadiusLarge,
|
||||
borderRadius: theme.shape.borderRadiusExtraLarge,
|
||||
zIndex: theme.zIndex.fab,
|
||||
textTransform: 'uppercase',
|
||||
}));
|
||||
|
@ -47,6 +47,7 @@ import { BuiltInStrategies, formatStrategyName } from 'utils/strategyNames';
|
||||
import { Badge } from 'component/common/Badge/Badge';
|
||||
import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
|
||||
import { UpgradeChangeRequests } from '../../FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests/UpgradeChangeRequests';
|
||||
import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
|
||||
|
||||
interface IFeatureStrategyFormProps {
|
||||
feature: IFeatureToggle;
|
||||
@ -71,19 +72,6 @@ interface IFeatureStrategyFormProps {
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const StyledDividerContent = styled(Box)(({ theme }) => ({
|
||||
padding: theme.spacing(0.75, 1),
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
backgroundColor: theme.palette.background.elevation2,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
width: '45px',
|
||||
position: 'absolute',
|
||||
top: '-10px',
|
||||
left: 'calc(50% - 45px)',
|
||||
lineHeight: 1,
|
||||
}));
|
||||
|
||||
const StyledForm = styled('form')(({ theme }) => ({
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
@ -191,6 +179,12 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
|
||||
marginLeft: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const StyledConstraintSeparator = styled(ConstraintSeparator)(({ theme }) => ({
|
||||
top: '-10px',
|
||||
left: '0',
|
||||
transform: 'translateY(0)',
|
||||
}));
|
||||
|
||||
export const FeatureStrategyForm = ({
|
||||
projectId,
|
||||
feature,
|
||||
@ -517,7 +511,7 @@ export const FeatureStrategyForm = ({
|
||||
|
||||
<StyledBox>
|
||||
<StyledDivider />
|
||||
<StyledDividerContent>AND</StyledDividerContent>
|
||||
<StyledConstraintSeparator />
|
||||
</StyledBox>
|
||||
<FeatureStrategyConstraints
|
||||
projectId={feature.project}
|
||||
|
@ -25,6 +25,7 @@ import { MilestoneStrategyTitle } from './MilestoneStrategyTitle';
|
||||
import { MilestoneStrategyConstraints } from './MilestoneStrategyConstraints';
|
||||
import { MilestoneStrategyVariants } from './MilestoneStrategyVariants';
|
||||
import { MilestoneStrategyType } from './MilestoneStrategyType';
|
||||
import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
|
||||
import {
|
||||
featureStrategyDocsLink,
|
||||
featureStrategyDocsLinkLabel,
|
||||
@ -117,17 +118,10 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
|
||||
width: '100%',
|
||||
}));
|
||||
|
||||
const StyledDividerContent = styled(Box)(({ theme }) => ({
|
||||
padding: theme.spacing(0.75, 1),
|
||||
color: theme.palette.text.primary,
|
||||
fontSize: theme.fontSizes.smallerBody,
|
||||
backgroundColor: theme.palette.background.elevation2,
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
width: '45px',
|
||||
position: 'absolute',
|
||||
const StyledConstraintSeparator = styled(ConstraintSeparator)(({ theme }) => ({
|
||||
top: '-10px',
|
||||
left: 'calc(50% - 45px)',
|
||||
lineHeight: 1,
|
||||
left: '0',
|
||||
transform: 'translateY(0)',
|
||||
}));
|
||||
|
||||
interface IReleasePlanTemplateAddStrategyFormProps {
|
||||
@ -332,7 +326,7 @@ export const ReleasePlanTemplateAddStrategyForm = ({
|
||||
/>
|
||||
<StyledBox>
|
||||
<StyledDivider />
|
||||
<StyledDividerContent>AND</StyledDividerContent>
|
||||
<StyledConstraintSeparator />
|
||||
</StyledBox>
|
||||
<MilestoneStrategyConstraints
|
||||
strategy={currentStrategy}
|
||||
|
Loading…
Reference in New Issue
Block a user