fix: minor issues and linting (#1092)

Author: tenphi

.changeset/style-subelement-cleanup.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Refactor internal styled component sub-elements to use tasty `$` selector syntax instead of raw CSS selectors (`'& svg'`, `'& code'`). Remove unused `Postfix` and `ButtonIcon` sub-element styles from `Menu` item styles.

package.json

@@ -74,7 +74,7 @@
     "@react-types/shared": "^3.32.1",
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
-    "@tenphi/tasty": "0.14.0",
+    "@tenphi/tasty": "0.14.2",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",

pnpm-lock.yaml

@@ -74,8 +74,6 @@ Customizes individual menu items.
 - `Icon` - Icon element within menu items
 - `Text` - Main text content of menu items
 - `Description` - Secondary text content for items with descriptions
-- `Postfix` - Right-aligned content (shortcuts, badges, etc.)
-
 #### sectionStyles
 
 Customizes section container elements.

src/components/actions/Menu/Menu.docs.mdx

@@ -174,32 +174,6 @@ export const StyledItem = tasty({
     gap: '.75x',
     outline: false,
 
-    // Sub-elements reused from MenuButton styles
-    ButtonIcon: {
-      display: 'grid',
-      fontSize: '$icon-size',
-      width: '$icon-size',
-      height: '$icon-size',
-      placeSelf: 'center',
-      placeItems: 'center',
-    },
-
-    '& [data-element="ButtonIcon"]:first-child:not(:last-child)': {
-      marginLeft: 0,
-    },
-
-    '& [data-element="ButtonIcon"]:last-child:not(:first-child)': {
-      marginRight: 0,
-    },
-
-    Postfix: {
-      color: {
-        '': '#dark-03',
-        pressed: '#dark-02',
-        disabled: '#dark-04',
-      },
-    },
-
     Description: {
       preset: 't4',
       color: '#dark-03',

src/components/actions/Menu/styled.tsx

@@ -45,7 +45,8 @@ const StyledBlock = tasty({
       multiline: false,
     },
 
-    '& code': {
+    Code: {
+      $: 'code',
       font: {
         '': 'monospace',
         serif: true,

src/components/content/CopySnippet/CopySnippet.tsx

@@ -26,7 +26,8 @@ const IconElement = tasty({
     textRendering: 'optimizeLegibility',
     '-webkit-font-smoothing': 'antialiased',
 
-    '& svg': {
+    Svg: {
+      $: 'svg',
       transition: 'all',
       width: 'min 1em',
       height: '1em 1em',