@bitrise/bitkit 13.209.0 → 13.210.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.209.0",
+  "version": "13.210.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Form/Checkbox/Checkbox.theme.ts

@@ -1,3 +1,6 @@
+const checkboxButtonSize = 24;
+const checkboxButtonLabelGap = 8;
+
 const CheckboxTheme = {
   baseStyle: {
     container: {
@@ -49,6 +52,8 @@ const CheckboxTheme = {
       alignItems: 'center',
       display: 'flex',
       gap: '4',
+      marginLeft: -checkboxButtonSize,
+      paddingLeft: checkboxButtonSize + checkboxButtonLabelGap,
       userSelect: 'none',
     },
   },

package/src/Components/Form/Radio/Radio.theme.ts

@@ -1,3 +1,6 @@
+const radioButtonSize = 24;
+const radioButtonLabelGap = 8;
+
 const RadioTheme = {
   baseStyle: {
     container: {
@@ -45,14 +48,16 @@ const RadioTheme = {
       borderColor: 'neutral.90',
       borderRadius: '12',
       boxShadow: 'inner',
-      height: '24',
-      width: '24',
+      height: radioButtonSize,
+      width: radioButtonSize,
     },
     icon: {
       color: 'neutral.100',
     },
     label: {
       _disabled: { color: 'neutral.60' },
+      marginLeft: -radioButtonSize,
+      paddingLeft: radioButtonSize + radioButtonLabelGap,
       userSelect: 'none',
     },
   },

package/src/Components/Tabs/useTabs.ts

@@ -2,23 +2,14 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type UseTabsProps<T> = {
   defaultId?: T;
-  queryKey?: string;
+  onChange?: (id: T, index: number) => void;
   tabIds: T[];
-  withHistory?: boolean;
 };
 
 const useTabs = <T extends string>(props: UseTabsProps<T>) => {
-  const { defaultId, queryKey = 'tab', tabIds, withHistory } = props;
-
-  let searchParams = new URLSearchParams(window.location.search);
+  const { defaultId, onChange, tabIds } = props;
 
   const defaultIndex = useMemo(() => {
-    if (withHistory && searchParams.get(queryKey)) {
-      const tabIndex = tabIds.indexOf(searchParams.get(queryKey) as T);
-      if (tabIndex !== -1) {
-        return tabIndex;
-      }
-    }
     if (defaultId) {
       const tabIndex = tabIds.indexOf(defaultId);
       if (tabIndex !== -1) {
@@ -35,11 +26,9 @@ const useTabs = <T extends string>(props: UseTabsProps<T>) => {
   }, []);
 
   useEffect(() => {
-    const queryValue = tabIds[tabIndex];
-    if (withHistory && queryValue) {
-      searchParams = new URLSearchParams(window.location.search);
-      searchParams.set(queryKey, queryValue);
-      window.parent.history.replaceState(null, '', `?${decodeURIComponent(searchParams.toString())}`);
+    if (onChange) {
+      const id = tabIds[tabIndex];
+      onChange(id, tabIndex);
     }
   }, [tabIndex]);