Skip to content

Commit

Permalink
fix(react-components): fix Chip "contained" disabled styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@donskov
donskov committed Feb 28, 2024
1 parent 2ece1a7 commit db20fdd
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 82 deletions.
95 changes: 54 additions & 41 deletions packages/react-components/src/Chip/__snapshots__/chip.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ exports[`<Chip /> should have custom delete icon 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
background-color: var(--pv-color-secondary);
color: var(--pv-color-white);
color: var(--pv-color-secondary-contrast);
}
.emotion-1 {
Expand All @@ -49,11 +49,15 @@ exports[`<Chip /> should have custom delete icon 1`] = `
}
.emotion-2 {
margin-left: var(--pv-size-base);
display: inherit;
}
.emotion-3 {
width: 24px;
height: 24px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
margin: 0px calc(var(--pv-size-base) * -1) 0 var(--pv-size-base);
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
opacity: 0.6;
Expand All @@ -62,7 +66,7 @@ exports[`<Chip /> should have custom delete icon 1`] = `
flex-shrink: 0;
}
.emotion-2:hover {
.emotion-3:hover {
opacity: 1;
}
Expand All @@ -74,21 +78,25 @@ exports[`<Chip /> should have custom delete icon 1`] = `
>
Text
</span>
<svg
aria-hidden="true"
<span
class="emotion-2"
fill="none"
height="24px"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 12.5h12M12 18.5v-12"
stroke="currentColor"
stroke-width="1.5"
/>
</svg>
<svg
aria-hidden="true"
class="emotion-3"
fill="none"
height="24px"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6 12.5h12M12 18.5v-12"
stroke="currentColor"
stroke-width="1.5"
/>
</svg>
</span>
</div>
</DocumentFragment>
`;
Expand Down Expand Up @@ -126,7 +134,7 @@ exports[`<Chip /> should have delete icon 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
background-color: var(--pv-color-secondary);
color: var(--pv-color-white);
color: var(--pv-color-secondary-contrast);
}
.emotion-1 {
Expand All @@ -142,11 +150,15 @@ exports[`<Chip /> should have delete icon 1`] = `
}
.emotion-2 {
margin-left: var(--pv-size-base);
display: inherit;
}
.emotion-3 {
width: 24px;
height: 24px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
margin: 0px calc(var(--pv-size-base) * -1) 0 var(--pv-size-base);
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
opacity: 0.6;
Expand All @@ -155,7 +167,7 @@ exports[`<Chip /> should have delete icon 1`] = `
flex-shrink: 0;
}
.emotion-2:hover {
.emotion-3:hover {
opacity: 1;
}
Expand All @@ -167,22 +179,26 @@ exports[`<Chip /> should have delete icon 1`] = `
>
Text
</span>
<svg
aria-hidden="true"
<span
class="emotion-2"
fill="none"
height="24px"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12.671 12l2.665 2.665a.318.318 0 010 .447l-.224.224a.317.317 0 01-.447 0L12 12.671l-2.665 2.665a.317.317 0 01-.448 0l-.224-.224a.318.318 0 010-.447L11.33 12 8.663 9.335a.318.318 0 010-.447l.224-.224a.317.317 0 01.448 0L12 11.329l2.665-2.665a.317.317 0 01.447 0l.224.224a.318.318 0 010 .447L12.671 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<svg
aria-hidden="true"
class="emotion-3"
fill="none"
height="24px"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M12.671 12l2.665 2.665a.318.318 0 010 .447l-.224.224a.317.317 0 01-.447 0L12 12.671l-2.665 2.665a.317.317 0 01-.448 0l-.224-.224a.318.318 0 010-.447L11.33 12 8.663 9.335a.318.318 0 010-.447l.224-.224a.317.317 0 01.448 0L12 11.329l2.665-2.665a.317.317 0 01.447 0l.224.224a.318.318 0 010 .447L12.671 12z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
</DocumentFragment>
`;
Expand Down Expand Up @@ -220,7 +236,7 @@ exports[`<Chip /> should pass className 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
background-color: var(--pv-color-secondary);
color: var(--pv-color-white);
color: var(--pv-color-secondary-contrast);
}
.emotion-1 {
Expand Down Expand Up @@ -280,7 +296,7 @@ exports[`<Chip /> should render with default styles 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
background-color: var(--pv-color-secondary);
color: var(--pv-color-white);
color: var(--pv-color-secondary-contrast);
}
.emotion-1 {
Expand Down Expand Up @@ -400,7 +416,7 @@ exports[`<Chip /> variants & colors variant "contained, color "secondary" 1`] =
-webkit-text-decoration: none;
text-decoration: none;
background-color: var(--pv-color-secondary);
color: var(--pv-color-white);
color: var(--pv-color-secondary-contrast);
}
.emotion-1 {
Expand Down Expand Up @@ -460,7 +476,7 @@ exports[`<Chip /> variants & colors variant "contained, color "wrong" 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
background-color: var(--pv-color-wrong);
color: var(--pv-color-white);
color: var(--pv-color-wrong-contrast);
}
.emotion-1 {
Expand Down Expand Up @@ -520,8 +536,7 @@ exports[`<Chip /> variants & colors variant "outlined, color "default" 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
border-color: var(--pv-color-gray-6);
background-color: transparent;
color: var(--pv-color-gray-10);
color: var(--pv-color-black);
}
.emotion-1 {
Expand Down Expand Up @@ -581,7 +596,6 @@ exports[`<Chip /> variants & colors variant "outlined, color "secondary" 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
border-color: var(--pv-color-secondary-tint-2);
background-color: transparent;
color: var(--pv-color-secondary);
}
Expand Down Expand Up @@ -642,7 +656,6 @@ exports[`<Chip /> variants & colors variant "outlined, color "wrong" 1`] = `
-webkit-text-decoration: none;
text-decoration: none;
border-color: var(--pv-color-wrong-tint-2);
background-color: transparent;
color: var(--pv-color-wrong);
}
Expand Down
110 changes: 69 additions & 41 deletions packages/react-components/src/Chip/chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,52 +91,79 @@ const ChipRoot = styled('div', {
}),
}), (props) => {
const isDark = props.theme.mode === 'dark';
let color: string;
let color: string = isDark
? 'var(--pv-color-white)'
: 'var(--pv-color-black)';
let borderColor: string;
let backgroundColor: string;
let backgroundColorHover: string;
let backgroundColorFocus: string;
let backgroundColorActive: string;
let boxShadowActive: string;

if (props.variant === 'contained') {
if (props.color === 'default') {
color = 'var(--pv-color-black)';
backgroundColor = 'var(--pv-color-gray-4)';
backgroundColorHover = 'var(--pv-color-gray-7)';
backgroundColorFocus = 'var(--pv-color-gray-6)';
backgroundColorActive = 'var(--pv-color-gray-5)';
} else {
color = 'var(--pv-color-white)';
backgroundColor = `var(--pv-color-${props.color})`;
backgroundColorHover = `var(--pv-color-${props.color}-tint-1)`;
backgroundColorFocus = `var(--pv-color-${props.color}-tint-2)`;
backgroundColorActive = `var(--pv-color-${props.color}-tint-2)`;

if (isDark) {
boxShadowActive = 'var(--pv-shadow-dark-hight)';
} else {
boxShadowActive = 'var(--pv-shadow-light-medium)';
}
}
}
let colorDisabled: string;
let backgroundColorDisabled: string;
let borderColorDisabled: string;

if (props.variant === 'outlined') {
if (props.color === 'default') {
color = 'var(--pv-color-gray-10)';
borderColor = 'var(--pv-color-gray-6)';
backgroundColor = 'transparent';
backgroundColorHover = 'var(--pv-color-gray-3)';
backgroundColorFocus = 'var(--pv-color-gray-4)';
backgroundColorActive = 'var(--pv-color-gray-5)';
} else if (isDark) {
color = `var(--pv-color-${props.color})`;
borderColor = `var(--pv-color-${props.color}-shade-1)`;
backgroundColorHover = `var(--pv-color-${props.color}-shade-4)`;
backgroundColorFocus = `var(--pv-color-${props.color}-shade-3)`;
backgroundColorActive = `var(--pv-color-${props.color}-shade-2)`;
} else {
color = `var(--pv-color-${props.color})`;
borderColor = `var(--pv-color-${props.color}-tint-2)`;
backgroundColor = 'transparent';
backgroundColorHover = `var(--pv-color-${props.color}-tint-5)`;
backgroundColorFocus = `var(--pv-color-${props.color}-tint-4)`;
backgroundColorActive = `var(--pv-color-${props.color}-tint-3)`;
}

if (isDark) {
borderColorDisabled = 'var(--pv-color-gray-6)';
colorDisabled = 'var(--pv-color-gray-5)';
} else {
borderColorDisabled = 'var(--pv-color-gray-8)';
colorDisabled = 'var(--pv-color-gray-7)';
}
}

if (props.variant === 'contained') {
if (props.color === 'default') {
if (isDark) {
backgroundColor = 'var(--pv-color-gray-6)';
backgroundColorHover = 'var(--pv-color-gray-5)';
backgroundColorFocus = 'var(--pv-color-gray-4)';
backgroundColorActive = 'var(--pv-color-gray-3)';
} else {
backgroundColor = 'var(--pv-color-gray-4)';
backgroundColorHover = 'var(--pv-color-gray-7)';
backgroundColorFocus = 'var(--pv-color-gray-6)';
backgroundColorActive = 'var(--pv-color-gray-5)';
}
} else {
color = `var(--pv-color-${props.color}-contrast)`;
backgroundColor = `var(--pv-color-${props.color})`;
backgroundColorHover = `var(--pv-color-${props.color}-tint-1)`;
backgroundColorFocus = `var(--pv-color-${props.color}-tint-2)`;
backgroundColorActive = `var(--pv-color-${props.color}-tint-2)`;
}

if (isDark) {
boxShadowActive = 'var(--pv-shadow-dark-hight)';
colorDisabled = 'var(--pv-color-gray-6)';
backgroundColorDisabled = 'var(--pv-color-gray-5)';
} else {
boxShadowActive = 'var(--pv-shadow-light-medium)';
colorDisabled = 'var(--pv-color-gray-8)';
backgroundColorDisabled = 'var(--pv-color-gray-4)';
}
}

return {
Expand All @@ -156,8 +183,9 @@ const ChipRoot = styled('div', {
},
}),
...(props.disabled && {
color: 'var(--pv-color-gray-8)',
borderColor: 'var(--pv-color-gray-4)',
color: colorDisabled,
backgroundColor: backgroundColorDisabled,
borderColor: borderColorDisabled,
}),
};
});
Expand All @@ -167,7 +195,6 @@ const ChipDeleteIcon = styled('span')({
height: '24px',
cursor: 'pointer',
WebkitTapHighlightColor: 'transparent',
margin: '0px calc(var(--pv-size-base) * -1) 0 var(--pv-size-base)',
transition: 'opacity 200ms',
opacity: '0.6',
flexShrink: 0,
Expand All @@ -181,6 +208,11 @@ const ChipStartContent = styled('span')({
display: 'inherit',
});

const ChipEndContent = styled('span')({
marginLeft: 'var(--pv-size-base)',
display: 'inherit',
});

/**
*
*/
Expand Down Expand Up @@ -216,24 +248,20 @@ export const Chip = React.forwardRef<any, ChipProps>((props, ref) => {
}
};

const renderDeleteAction = () => {
if (!onDelete) {
return null;
}
const startContent = startContentProp && (
<ChipStartContent>
{startContentProp}
</ChipStartContent>
);

return (
const endContent = onDelete && (
<ChipEndContent>
<ChipDeleteIcon
aria-hidden
as={deleteIcon}
onClick={handleDeleteClick}
/>
);
};

const startContent = startContentProp && (
<ChipStartContent>
{startContentProp}
</ChipStartContent>
</ChipEndContent>
);

return (
Expand All @@ -252,7 +280,7 @@ export const Chip = React.forwardRef<any, ChipProps>((props, ref) => {
>
{children}
</Typography>
{renderDeleteAction()}
{endContent}
</ChipRoot>
);
}) as OverridableComponent<ChipTypeMap>;
Expand Down

0 comments on commit db20fdd

Please sign in to comment.