chore: migrate to scrollbar style (#679)

Author: tenphi

.changeset/plenty-wasps-tease.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Migrate to `scrollbar` style.

src/components/content/Content.tsx

@@ -25,7 +25,7 @@ const ContentElement = tasty({
     flow: 'column',
     gap: '2x',
     overflow: 'auto',
-    styledScrollbar: true,
+    scrollbar: 'styled',
   },
 });
 

src/components/content/CopySnippet/CopySnippet.tsx

@@ -38,7 +38,7 @@ const StyledBlock = tasty({
       '': 'initial',
       nowrap: 'nowrap',
     },
-    styledScrollbar: true,
+    scrollbar: 'styled',
     padding: '1.125x 1.5x',
     fade: {
       '': 'right 2x',

src/components/content/PrismCode/PrismCode.tsx

@@ -24,7 +24,7 @@ const PreElement = tasty({
     margin: 0,
     padding: 0,
     overflow: 'auto',
-    styledScrollbar: true,
+    scrollbar: 'styled',
 
     Code: {
       display: 'block',

src/components/fields/Select/Select.tsx

@@ -188,8 +188,8 @@ const ListBoxElement = tasty({
     fill: '#white',
     shadow: '0px 4px 16px #shadow',
     height: 'initial 30x',
-    overflow: 'hidden auto',
-    styledScrollbar: true,
+    overflow: 'clip auto',
+    scrollbar: 'styled',
   },
 });
 

src/components/organisms/FileTabs/FileTabs.tsx

@@ -45,7 +45,7 @@ const TabsPanelElement = tasty(Space, {
     gap: '.5x',
     flexShrink: 0,
     whiteSpace: 'nowrap',
-    styledScrollbar: true,
+    scrollbar: 'styled',
     padding: '1ow 1ow 0 1ow',
     fade: {
       '': false,

src/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.tsx

@@ -37,7 +37,7 @@ const StyledDialogContent = tasty(Flex, {
   styles: {
     flow: 'column',
     placeItems: 'start start',
-    styledScrollbar: true,
+    scrollbar: 'styled',
     height: '100%',
     border: '1bw solid #border',
     radius: '0.5x',

src/components/pickers/Menu/styled.tsx

@@ -31,7 +31,7 @@ export const StyledMenu = tasty({
       '': '',
       popover: '0px 5px 15px #dark.05',
     },
-    styledScrollbar: true,
+    scrollbar: 'styled',
   },
 });
 

src/tasty/styles/types.ts

@@ -57,6 +57,14 @@ export interface StylesInterface
    * @deprecated Use `flow` style instead.
    */
   flexDirection: CSSProperties['flexDirection'];
+  /**
+   * @deprecated Use `placeContent`, `placeItems`, `gridColumns`, `gridRows`, and `gridTemplate` styles instead.
+   */
+  grid: CSSProperties['grid'];
+  /**
+   * @deprecated Use `flexShrink`, `flexGrow`, and `flexBasis` styles instead.
+   */
+  flex: CSSProperties['flex'];
   /** Set the background color of the element.
    * ```
    * fill="#{name_of_the_color}"
@@ -92,6 +100,7 @@ export interface StylesInterface
    */
   reset?: 'input' | 'button';
   /**
+   * @deprecated Use `scrollbar` style instead.
    * Whether the element has styled scrollbar.
    */
   styledScrollbar?: boolean;