fix(Card): set border radius to large (#558)

cube-js · Dec 23, 2024 · 9dc27fe · 9dc27fe
1 parent 4cb5839
commit 9dc27fe
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 18 deletions.
diff --git a/.changeset/shiny-eagles-hang.md b/.changeset/shiny-eagles-hang.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Update border radius size for Card and CopySnippet components.
diff --git a/src/components/content/Card/Card.tsx b/src/components/content/Card/Card.tsx
@@ -14,7 +14,7 @@ const CardElement = tasty({
   styles: {
     display: 'block',
     flow: 'column',
-    radius: '1r',
+    radius: '(@large-radius + 1bw)',
     fill: '#white',
     border: true,
     padding: '1.5x',

diff --git a/src/components/content/CopySnippet/CopySnippet.tsx b/src/components/content/CopySnippet/CopySnippet.tsx
@@ -73,7 +73,7 @@ const CopySnippetElement = tasty(Card, {
   styles: {
     display: 'block',
     fill: '#grey-light',
-    radius: '1r',
+    radius: '@large-radius',
     border: 0,
     padding: 0,
 
@@ -82,7 +82,7 @@ const CopySnippetElement = tasty(Card, {
       flow: 'row',
       gridColumns: 'minmax(0, 1fr) auto',
       width: 'min 20x',
-      radius: '1r',
+      radius: '@large-radius',
       position: 'relative',
       overflow: 'hidden',
     },
@@ -151,6 +151,10 @@ export interface CubeCopySnippetProps extends CubeCardProps {
 // const HIDDEN_SYMBOL = '●';
 const HIDDEN_SYMBOL = '•';
 
+function replaceSymbolsToHidden(str: string) {
+  return HIDDEN_SYMBOL.repeat(str.length);
+}
+
 function CopySnippet(allProps: CubeCopySnippetProps) {
   const {
     code = '',
@@ -190,29 +194,17 @@ function CopySnippet(allProps: CubeCopySnippetProps) {
 
   if (!showHidden) {
     if (hideText === true) {
-      formattedCode = formattedCode
-        .split('')
-        .map((s) => HIDDEN_SYMBOL)
-        .join('')
-        .trim();
+      formattedCode = replaceSymbolsToHidden(formattedCode);
     } else if (typeof hideText === 'string') {
       formattedCode = formattedCode.replaceAll(
         hideText,
-        hideText
-          .split('')
-          .map((s) => HIDDEN_SYMBOL)
-          .join('')
-          .trim(),
+        replaceSymbolsToHidden(hideText),
       );
     } else if (Array.isArray(hideText)) {
       hideText.forEach((text) => {
         formattedCode = formattedCode.replaceAll(
           text,
-          text
-            .split('')
-            .map((s) => HIDDEN_SYMBOL)
-            .join('')
-            .trim(),
+          replaceSymbolsToHidden(text),
         );
       });
     }