Merge pull request #240 from Achintha444/main-new-2

chore(react): fix background-clip not working in old browsers
wso2 · Jul 26, 2024 · c2f1490 · c2f1490
2 parents e4296eb + ebdfee9
commit c2f1490
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss
@@ -16,6 +16,14 @@
  * under the License.
  */
 
+// 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 {
+  --oxygen-customComponents-Chip-properties-background-clip: text;
+}
+
 .oxygen-chip {
   border-radius: var(--oxygen-customComponents-Chip-properties-border-radius);
 
@@ -46,6 +54,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 +79,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 +104,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 +129,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 +154,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
@@ -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
@@ -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%)',