1
0
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:
Jaanus Sellin 2025-04-09 11:00:05 +03:00 committed by GitHub
parent 5647fc916e
commit a92c79e2dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 26 deletions

View File

@ -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',
}));

View File

@ -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}

View File

@ -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}