fix(CopySnippet): border radius in action buttons (#635)

Author: tenphi

.changeset/dry-donuts-prove.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix outline styles after migration in various components.

.changeset/pink-frogs-raise.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix border radius in Action buttons in CopySnippet.

src/components/content/CopyPasteBlock/CopyPasteBlock.tsx

@@ -98,15 +98,16 @@ const CopyButton = tasty(Button, {
   styles: {
     placeSelf: 'stretch',
     border: '#clear',
-    outline: {
-      '': '#purple-03.0',
-      'focused & focus-visible': '#purple-03 inset',
+    shadow: {
+      '': '0 0 0 1ow #purple-03.0 inset',
+      focused: '0 0 0 1ow #purple-03 inset',
     },
     radius: {
       '': '0 1r 1r 0',
       'multiline | with-scroll': '0 1r 0 0',
     },
     height: 'auto',
+    outline: false,
   },
 });
 

src/components/content/CopySnippet/CopySnippet.tsx

@@ -69,9 +69,19 @@ const ButtonContainer = tasty({
       multiline: '4x',
     },
 
-    '@button-radius': {
+    '@first-button-radius': {
+      '': '0 1r 1r 0',
+      multiline: '0 1r 0 0',
+    },
+
+    '@last-button-radius': {
       '': '0',
-      multiline: '1r',
+      multiline: '0 0 0 1r',
+    },
+
+    '@first-and-last-button-radius': {
+      '': '0 1r 1r 0',
+      multiline: '0 1r 0 1r',
     },
 
     // Make sure there's a small gap between buttons and the content
@@ -110,16 +120,17 @@ const ActionButton = tasty(Button, {
     padding: 0,
     placeSelf: 'stretch',
     border: '#clear',
-    outline: {
-      '': '#purple-03.0',
-      'focused & focus-visible': '#purple-03 inset',
+    shadow: {
+      '': 'inset 0 0 0 1ow #purple-03.0',
+      focused: 'inset 0 0 0 1ow #purple-03',
     },
+    outline: false,
     height: '@button-size',
     radius: {
-      '': '0',
-      ':last-child': '0 0 0 @button-radius',
-      ':first-child': '0 @button-radius 0 0',
-      ':last-child & :first-child': '0 @button-radius 0 @button-radius',
+      '': 0,
+      ':last-child': '@last-button-radius',
+      ':first-child': '@first-button-radius',
+      ':first-child & :last-child': '@first-and-last-button-radius',
     },
   },
 });

src/components/organisms/FileTabs/FileTabs.tsx

@@ -108,10 +108,6 @@ const TabElement = tasty(Action, {
     fontWeight: 500,
     opacity: 1,
     preset: 'default',
-    shadow: {
-      '': 'inset 0 0 0 1ow #purple-03.0',
-      'focused & focus-visible': 'inset 0 0 0 1ow #purple-03',
-    },
     transform: {
       '': 'translate(0, 0)',
       '[disabled]': 'translate(0, 1bw)',
@@ -150,7 +146,7 @@ const CloseButton = tasty(Button, {
     padding: '.25x',
     outline: {
       '': '#purple-03.0',
-      'focused & focus-visible': '#purple-03',
+      focused: '#purple-03',
     },
     radius: '1r',
   },

src/components/pickers/Menu/MenuButton.tsx

@@ -46,6 +46,10 @@ const StyledButton = tasty(Block, {
     flow: 'row',
     justifyContent: 'start',
     gap: '.75x',
+    outline: {
+      '': '#purple-03.0',
+      'focused & focus-visible': '#purple-03',
+    },
 
     ButtonIcon: {
       display: 'grid',

src/tasty/styles/transition.ts

@@ -20,7 +20,14 @@ const MAP = {
     'font-style',
   ],
   text: ['font-weight', 'text-decoration-color'],
-  theme: ['color', 'background-color', 'box-shadow', 'border', 'border-radius'],
+  theme: [
+    'color',
+    'background-color',
+    'box-shadow',
+    'border',
+    'border-radius',
+    'outline',
+  ],
   inset: ['box-shadow'],
   mark: ['box-shadow'],
   width: ['max-width', 'min-width', 'width'],