yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-03 10:32:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Limit border of stage color badges to neutral0 (white)

Browse Source
This commit is contained in:
Gustav Hansen 2023-05-04 16:04:44 +02:00
parent 2145a3c1f5
commit 94ce1a8e4d
5 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/core/admin/ee/admin/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/ReviewWorkflowsStageEE.js
View File

@ -3,10 +3,21 @@ import PropTypes from 'prop-types';
import { Box, Flex, Typography } from '@strapi/design-system';
import { pxToRem } from '@strapi/helper-plugin';
import { getStageColorByHex } from '../../../../../pages/SettingsPage/pages/ReviewWorkflows/utils/colors';
export function ReviewWorkflowsStageEE({ color, name }) {
const { themeColorName } = getStageColorByHex(color);
return (
<Flex alignItems="center" gap={2} maxWidth={pxToRem(300)}>
<Box height={2} background={color} borderColor="neutral150" hasRadius shrink={0} width={2} />
<Box
height={2}
background={color}
borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
hasRadius
shrink={0}
width={2}
/>
<Typography fontWeight="regular" textColor="neutral700" ellipsis>
{name}

5
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/OptionColor/OptionColor.js
View File

@ -3,8 +3,11 @@ import PropTypes from 'prop-types';
import { components } from 'react-select';
import { Flex, Typography } from '@strapi/design-system';
import { getStageColorByHex } from '../../../../../utils/colors';
export function OptionColor({ children, ...props }) {
const { color } = props.data;
const { themeColorName } = getStageColorByHex(color);
return (
<components.Option {...props}>
@ -12,7 +15,7 @@ export function OptionColor({ children, ...props }) {
<Flex
height={2}
background={color}
borderColor="neutral150"
borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
hasRadius
shrink={0}
width={2}

5
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/components/Stages/Stage/components/SingleValueColor/SingleValueColor.js
View File

@ -3,8 +3,11 @@ import PropTypes from 'prop-types';
import { components } from 'react-select';
import { Flex, Typography } from '@strapi/design-system';
import { getStageColorByHex } from '../../../../../utils/colors';
export function SingleValueColor({ children, ...props }) {
const { color } = props.data;
const { themeColorName } = getStageColorByHex(color);
return (
<components.SingleValue {...props}>
@ -12,7 +15,7 @@ export function SingleValueColor({ children, ...props }) {
<Flex
height={2}
background={color}
borderColor="neutral150"
borderColor={themeColorName === 'neutral0' ? 'neutral150' : 'transparent'}
hasRadius
shrink={0}
width={2}

4
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/colors.js
View File

@ -6,7 +6,9 @@ export function getStageColorByHex(hex) {
// there are multiple colors with the same hex code in the design tokens. In order to find
// the correct one we have to find all matching colors and then check, which ones are usable
// for stages.
const themeColors = Object.entries(lightTheme.colors).filter(([, value]) => value === hex);
const themeColors = Object.entries(lightTheme.colors).filter(
([, value]) => value.toUpperCase() === hex.toUpperCase()
);
const themeColorName = themeColors.reduce((acc, [name]) => {
if (STAGE_COLORS?.[name]) {
acc = name;

5
packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/utils/tests/colors.test.js
View File

@ -22,6 +22,11 @@ describe('Settings | Review Workflows | colors', () => {
themeColorName: 'primary600',
});
expect(getStageColorByHex('#4945FF')).toStrictEqual({
name: 'Blue',
themeColorName: 'primary600',
});
expect(getStageColorByHex('random')).toStrictEqual(null);
expect(getStageColorByHex()).toStrictEqual(null);
});