Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-27 01:19:00 +02:00
Code Issues Projects Releases Wiki Activity

feat: styling of AND operator in strategies (#9726)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator.tsx
View File

@ -14,7 +14,7 @@ export const ConstraintSeparator = styled(({ ...props }) => (
fontSize: theme.fontSizes.smallerBody, fontSize: theme.fontSizes.smallerBody,
color: theme.palette.text.primary, color: theme.palette.text.primary,
background: theme.palette.background.application, background: theme.palette.background.application,
borderRadius: theme.shape.borderRadiusLarge, borderRadius: theme.shape.borderRadiusExtraLarge,
zIndex: theme.zIndex.fab, zIndex: theme.zIndex.fab,
textTransform: 'uppercase', textTransform: 'uppercase',
})); }));

22
frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
View File

@ -47,6 +47,7 @@ import { BuiltInStrategies, formatStrategyName } from 'utils/strategyNames';
import { Badge } from 'component/common/Badge/Badge'; import { Badge } from 'component/common/Badge/Badge';
import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon'; import EnvironmentIcon from 'component/common/EnvironmentIcon/EnvironmentIcon';
import { UpgradeChangeRequests } from '../../FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests/UpgradeChangeRequests'; import { UpgradeChangeRequests } from '../../FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/UpgradeChangeRequests/UpgradeChangeRequests';
import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
interface IFeatureStrategyFormProps { interface IFeatureStrategyFormProps {
feature: IFeatureToggle; feature: IFeatureToggle;
@ -71,19 +72,6 @@ interface IFeatureStrategyFormProps {
disabled?: boolean; 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 }) => ({ const StyledForm = styled('form')(({ theme }) => ({
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
@ -191,6 +179,12 @@ const StyledBadge = styled(Badge)(({ theme }) => ({
marginLeft: theme.spacing(1), marginLeft: theme.spacing(1),
})); }));
const StyledConstraintSeparator = styled(ConstraintSeparator)(({ theme }) => ({
top: '-10px',
left: '0',
transform: 'translateY(0)',
}));
export const FeatureStrategyForm = ({ export const FeatureStrategyForm = ({
projectId, projectId,
feature, feature,
@ -517,7 +511,7 @@ export const FeatureStrategyForm = ({
<StyledBox> <StyledBox>
<StyledDivider /> <StyledDivider />
<StyledDividerContent>AND</StyledDividerContent> <StyledConstraintSeparator />
</StyledBox> </StyledBox>
<FeatureStrategyConstraints <FeatureStrategyConstraints
projectId={feature.project} projectId={feature.project}

16
frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/ReleasePlanTemplateAddStrategyForm.tsx
View File

@ -25,6 +25,7 @@ import { MilestoneStrategyTitle } from './MilestoneStrategyTitle';
import { MilestoneStrategyConstraints } from './MilestoneStrategyConstraints'; import { MilestoneStrategyConstraints } from './MilestoneStrategyConstraints';
import { MilestoneStrategyVariants } from './MilestoneStrategyVariants'; import { MilestoneStrategyVariants } from './MilestoneStrategyVariants';
import { MilestoneStrategyType } from './MilestoneStrategyType'; import { MilestoneStrategyType } from './MilestoneStrategyType';
import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
import { import {
featureStrategyDocsLink, featureStrategyDocsLink,
featureStrategyDocsLinkLabel, featureStrategyDocsLinkLabel,
@ -117,17 +118,10 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
width: '100%', width: '100%',
})); }));
const StyledDividerContent = styled(Box)(({ theme }) => ({ const StyledConstraintSeparator = styled(ConstraintSeparator)(({ 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', top: '-10px',
left: 'calc(50% - 45px)', left: '0',
lineHeight: 1, transform: 'translateY(0)',
})); }));
interface IReleasePlanTemplateAddStrategyFormProps { interface IReleasePlanTemplateAddStrategyFormProps {
@ -332,7 +326,7 @@ export const ReleasePlanTemplateAddStrategyForm = ({
/> />
<StyledBox> <StyledBox>
<StyledDivider /> <StyledDivider />
<StyledDividerContent>AND</StyledDividerContent> <StyledConstraintSeparator />
</StyledBox> </StyledBox>
<MilestoneStrategyConstraints <MilestoneStrategyConstraints
strategy={currentStrategy} strategy={currentStrategy}