From be3e9c2ab4391a761ed2855d3b5541a3ccf1e665 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Fri, 26 Jul 2024 11:28:56 +0530 Subject: [PATCH 1/4] chore(react): fix background-clip not working in old browsers --- packages/react/src/components/Chip/chip.scss | 9 +++++++++ packages/react/src/models/theme.ts | 1 - packages/react/src/theme/default-theme.ts | 1 - 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index 66289821..6cb61ab2 100644 --- a/packages/react/src/components/Chip/chip.scss +++ b/packages/react/src/components/Chip/chip.scss @@ -16,6 +16,10 @@ * under the License. */ +:root { + --oxygen-customComponents-Chip-properties-background-clip: text; +} + .oxygen-chip { border-radius: var(--oxygen-customComponents-Chip-properties-border-radius); @@ -46,6 +50,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; background-image: var(--oxygen-customComponents-Chip-properties-premium-text-color); color: var(--oxygen-customComponents-Chip-properties-text-fill-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); @@ -70,6 +75,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; color: var(--oxygen-customComponents-Chip-properties-text-fill-color); background-image: var(--oxygen-customComponents-Chip-properties-new-text-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); @@ -94,6 +100,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; color: var(--oxygen-customComponents-Chip-properties-text-fill-color); background-image: var(--oxygen-customComponents-Chip-properties-beta-text-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); @@ -118,6 +125,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; color: var(--oxygen-customComponents-Chip-properties-text-fill-color); background-image: var(--oxygen-customComponents-Chip-properties-experimental-text-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); @@ -142,6 +150,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; color: var(--oxygen-customComponents-Chip-properties-text-fill-color); background-image: var(--oxygen-customComponents-Chip-properties-coming-soon-text-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts index d865b9ae..b1dcc954 100644 --- a/packages/react/src/models/theme.ts +++ b/packages/react/src/models/theme.ts @@ -119,7 +119,6 @@ interface CustomTheme { }; Chip?: { properties?: { - 'background-clip'?: string; 'beta-background'?: string; 'beta-border-color'?: string; 'beta-text-color'?: string; diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts index 73cb59d5..9a293e26 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -176,7 +176,6 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial< Chip: { // TODO: Move these to color palette. properties: { - 'background-clip': 'text', 'beta-background': 'linear-gradient(131deg, rgba(143, 197, 246, 0.30) 0%, rgba(72, 141, 180, 0.30) 100%)', 'beta-border-color': '#488DB4', 'beta-text-color': 'linear-gradient(93deg, #488DB4 0%, #1F3D4E 100%)', From d5420bab098c583d639ac4f3496995b308868ad2 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Fri, 26 Jul 2024 15:59:43 +0530 Subject: [PATCH 2/4] chore(react): add comment to disable stylint --- packages/react/src/components/Chip/chip.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index 6cb61ab2..315a544a 100644 --- a/packages/react/src/components/Chip/chip.scss +++ b/packages/react/src/components/Chip/chip.scss @@ -16,6 +16,8 @@ * under the License. */ +/* stylelint-disable property-no-vendor-prefix */ + :root { --oxygen-customComponents-Chip-properties-background-clip: text; } From 2ae4dc82fd2a91a7f3b035b7b3517363ac722409 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Fri, 26 Jul 2024 16:07:14 +0530 Subject: [PATCH 3/4] chore(react): add todo comment --- packages/react/src/components/Chip/chip.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index 315a544a..3d3343e7 100644 --- a/packages/react/src/components/Chip/chip.scss +++ b/packages/react/src/components/Chip/chip.scss @@ -16,6 +16,7 @@ * under the License. */ +// TODO: Remove the following comment after implementing the autoprefixer in the build process. /* stylelint-disable property-no-vendor-prefix */ :root { From ebdfee9c262c8f1bebfb46b7adba2c0e43482d8c Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Fri, 26 Jul 2024 16:26:46 +0530 Subject: [PATCH 4/4] chore(react): add the github issue link to fix the autoprefixer issue --- packages/react/src/components/Chip/chip.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index 3d3343e7..e49e48d4 100644 --- a/packages/react/src/components/Chip/chip.scss +++ b/packages/react/src/components/Chip/chip.scss @@ -17,6 +17,7 @@ */ // TODO: Remove the following comment after implementing the autoprefixer in the build process. +// https://github.com/wso2/oxygen-ui/issues/241 /* stylelint-disable property-no-vendor-prefix */ :root {