fix: replaced margins with gap

gluestack · Oct 9, 2023 · a60fc4d · a60fc4d
1 parent 3a42a77
commit a60fc4d
Show file tree

Hide file tree

Showing 23 changed files with 204 additions and 164 deletions.
diff --git a/example/storybook/babel.config.js b/example/storybook/babel.config.js
@@ -10,14 +10,14 @@ module.exports = function (api) {
             'module-resolver',
             {
               alias: {
-                // '@gluestack-ui/themed': path.join(
-                //   __dirname,
-                //   '../../packages/themed/src'
-                // ),
-                // '@gluestack-ui/config': path.join(
-                //   __dirname,
-                //   '../../packages/config/src/gluestack-ui.config'
-                // ),
+                '@gluestack-ui/themed': path.join(
+                  __dirname,
+                  '../../packages/themed/src'
+                ),
+                '@gluestack-ui/config': path.join(
+                  __dirname,
+                  '../../packages/config/src/gluestack-ui.config'
+                ),
                 // '@gluestack-style/react': path.join(
                 //   __dirname,
                 //   '../../../dank-style/packages/react/src'

diff --git a/example/storybook/src/components/DataDisplay/Badge/Badge.tsx b/example/storybook/src/components/DataDisplay/Badge/Badge.tsx
@@ -47,7 +47,7 @@ const BadgeBasic = ({ text = 'NEW FEATURE', ...props }: any) => {
       break;
   }
   return (
-    <Badge {...props}>
+    <Badge {...props} gap="$1">
       <BadgeText
         dataSet={{
           'component-props': JSON.stringify({
@@ -60,7 +60,6 @@ const BadgeBasic = ({ text = 'NEW FEATURE', ...props }: any) => {
         {text}
       </BadgeText>
       <BadgeIcon
-        ml="$1"
         as={GlobeIcon}
         dataSet={{
           'component-props': JSON.stringify({

diff --git a/example/storybook/src/components/Feedback/Alert/Alert.tsx b/example/storybook/src/components/Feedback/Alert/Alert.tsx
@@ -14,10 +14,9 @@ import {
 
 const AlertBasic = ({ ...props }: any) => {
   return (
-    <Alert {...props}>
+    <Alert {...props} gap="$3">
       <AlertIcon
         as={InfoIcon}
-        mr="$3"
         dataSet={{
           'component-props': JSON.stringify({
             'instance': true,

diff --git a/example/storybook/src/components/Feedback/Alert/Variants.tsx b/example/storybook/src/components/Feedback/Alert/Variants.tsx
@@ -11,10 +11,9 @@ import {
 const AlertVariants = ({ variant }: any) => {
   return (
     <Center>
-      <Alert action="info" variant={variant} mb={4}>
+      <Alert action="info" variant={variant} mb={4} gap="$3">
         <AlertIcon
           as={InfoIcon}
-          mr="$3"
           dataSet={{
             'component-props': JSON.stringify({
               'instance': true,
@@ -36,10 +35,9 @@ const AlertVariants = ({ variant }: any) => {
           Unlock the power of knowledge with the following information.
         </AlertText>
       </Alert>
-      <Alert action="success" variant={variant} mb={4}>
+      <Alert action="success" variant={variant} mb={4} gap="$3">
         <AlertIcon
           as={CheckCircle2Icon}
-          mr="$3"
           dataSet={{
             'component-props': JSON.stringify({
               'instance': true,
@@ -63,10 +61,9 @@ const AlertVariants = ({ variant }: any) => {
           yourself on the back. You've earned it!
         </AlertText>
       </Alert>
-      <Alert action="error" variant={variant} mb={4}>
+      <Alert action="error" variant={variant} mb={4} gap="$3">
         <AlertIcon
           as={XCircle}
-          mr="$3"
           dataSet={{
             'component-props': JSON.stringify({
               'instance': true,
@@ -89,10 +86,9 @@ const AlertVariants = ({ variant }: any) => {
           are already on the case. Please hold tight while we fix the issue
         </AlertText>
       </Alert>
-      <Alert action="warning" variant={variant} mb={4}>
+      <Alert action="warning" variant={variant} mb={4} gap="$3">
         <AlertIcon
           as={AlertCircleIcon}
-          mr="$3"
           dataSet={{
             'component-props': JSON.stringify({
               'instance': true,
@@ -116,10 +112,9 @@ const AlertVariants = ({ variant }: any) => {
           of 'aha!' moments
         </AlertText>
       </Alert>
-      <Alert action="muted" variant={variant}>
+      <Alert action="muted" variant={variant} gap="$3">
         <AlertIcon
           as={BellIcon}
-          mr="$3"
           dataSet={{
             'component-props': JSON.stringify({
               'instance': true,

diff --git a/example/storybook/src/components/Feedback/Toast/Toast.stories.tsx b/example/storybook/src/components/Feedback/Toast/Toast.stories.tsx
@@ -8,6 +8,7 @@ const ToastMeta: ComponentMeta<typeof Toast> = {
   argTypes: {
     placement: {
       control: 'select',
+      figmaIgnore: true,
       options: [
         'top',
         'top right',

diff --git a/example/storybook/src/components/Forms/Button/ButtonLoading.tsx b/example/storybook/src/components/Forms/Button/ButtonLoading.tsx
@@ -20,18 +20,20 @@ const ButtonIsLoading = ({}) => {
         focusable={!isLoading}
         opacity={isLoading ? 0.4 : 1}
         action="negative"
+        gap="$2"
       >
-        <ButtonSpinner color="white" mr="$2" />
+        <ButtonSpinner color="white" />
         <ButtonText>Submitting</ButtonText>
       </Button>
       <Button
         disabled={isLoading}
         focusable={!isLoading}
         opacity={isLoading ? 0.4 : 1}
         action="negative"
+        gap="$2"
       >
         <ButtonText>Submitting</ButtonText>
-        <ButtonSpinner color="white" ml="$2" />
+        <ButtonSpinner color="white" />
       </Button>
     </HStack>
   );

diff --git a/example/storybook/src/components/Forms/Button/ButtonSizes.tsx b/example/storybook/src/components/Forms/Button/ButtonSizes.tsx
@@ -13,9 +13,9 @@ const ButtonAllSizes = ({}) => {
     <VStack space="md" justifyContent="center" alignItems="center">
       {sizes.map((size: any) => {
         return (
-          <Button mt="$4" size={size} key={size}>
+          <Button mt="$4" size={size} key={size} gap="$2">
             <ButtonText>Button</ButtonText>
-            <ButtonIcon as={AddIcon} ml="$2" />
+            <ButtonIcon as={AddIcon} />
           </Button>
         );
       })}

diff --git a/example/storybook/src/components/Forms/Button/ButtonWithIcon.tsx b/example/storybook/src/components/Forms/Button/ButtonWithIcon.tsx
@@ -5,13 +5,13 @@ import { Button, ButtonIcon, ButtonText } from '@gluestack-ui/themed';
 const ButtonWithIcons = ({}) => {
   return (
     <HStack space="md">
-      <Button>
-        <ButtonIcon as={InfoIcon} mr="$2" />
+      <Button gap="$2">
+        <ButtonIcon as={InfoIcon} />
         <ButtonText>LeftIcon</ButtonText>
       </Button>
-      <Button variant="solid">
+      <Button variant="solid" gap="$2">
         <ButtonText>RightIcon</ButtonText>
-        <ButtonIcon as={AddIcon} ml="$2" />
+        <ButtonIcon as={AddIcon} />
       </Button>
     </HStack>
   );

diff --git a/example/storybook/src/components/Forms/Checkbox/Checkbox.tsx b/example/storybook/src/components/Forms/Checkbox/Checkbox.tsx
@@ -26,9 +26,9 @@ const CheckboxGroupBasic = ({ ...props }: any) => {
       value={values}
       onChange={setValues}
       nativeID="checkbox-group"
+      gap="$2"
     >
       <Checkbox
-        m="$2"
         size={props.size}
         isInvalid={props.isInvalid}
         isIndeterminate
@@ -40,14 +40,14 @@ const CheckboxGroupBasic = ({ ...props }: any) => {
           console.log(isSelected, '###')
         }
         nativeID="checkbox-1"
+        gap="$2"
       >
-        <CheckboxIndicator mr="$2">
+        <CheckboxIndicator>
           <CheckboxIcon as={CheckIcon} />
         </CheckboxIndicator>
         <CheckboxLabel>Label 1</CheckboxLabel>
       </Checkbox>
       <Checkbox
-        m="$2"
         isInvalid={props.isInvalid}
         size={props.size}
         aria-label="Label 2"
@@ -58,8 +58,9 @@ const CheckboxGroupBasic = ({ ...props }: any) => {
           console.log(isSelected, '###')
         }
         nativeID="checkbox-2"
+        gap="$2"
       >
-        <CheckboxIndicator mr="$2">
+        <CheckboxIndicator>
           <CheckboxIcon as={CheckIcon} />
         </CheckboxIndicator>
         <CheckboxLabel>Label 2</CheckboxLabel>
@@ -76,8 +77,8 @@ const FigmaCheckboxStory = ({ ...props }: any) => {
   };
 
   return (
-    <Checkbox {...props} nativeID="checkbox-1">
-      <CheckboxIndicator mr="$2">
+    <Checkbox {...props} nativeID="checkbox-1" gap="$2">
+      <CheckboxIndicator>
         <CheckboxIcon
           as={CheckIcon}
           // @ts-ignore

diff --git a/example/storybook/src/components/Forms/Input/Input.tsx b/example/storybook/src/components/Forms/Input/Input.tsx
@@ -53,7 +53,7 @@ const InputBasic = ({ ...props }: any) => {
           }),
         }}
       />
-      <InputSlot pr="$4">
+      <InputSlot pr={props.variant === 'underlined' ? '$0' : '$4'}>
         <InputIcon
           as={SearchIcon}
           dataSet={{

diff --git a/example/storybook/src/components/Forms/Radio/Radio.tsx b/example/storybook/src/components/Forms/Radio/Radio.tsx
@@ -20,19 +20,18 @@ const RadioBasic = ({ ...props }: any) => {
   const [values, setValues] = React.useState('Label 1');
 
   return (
-    <RadioGroup value={values} onChange={setValues}>
+    <RadioGroup value={values} onChange={setValues} gap="$2">
       <Radio
         {...props}
         value="Label 1"
         aria-label="Radio"
         onChange={(nextValue: boolean) => console.log(nextValue, 'nextValue')}
-        mb="$2"
+        gap="$2"
       >
         <RadioIndicator>
           <RadioIcon as={CircleIcon} />
         </RadioIndicator>
         <RadioLabel
-          ml="$2"
           dataSet={{
             'component-props': JSON.stringify({
               'is-text-style': true,
@@ -49,13 +48,12 @@ const RadioBasic = ({ ...props }: any) => {
         value="Label 2"
         aria-label="Radio"
         onChange={(nextValue: boolean) => console.log(nextValue, 'nextValue')}
-        mb="$2"
+        gap="$2"
       >
         <RadioIndicator>
           <RadioIcon as={CircleIcon} />
         </RadioIndicator>
         <RadioLabel
-          ml="$2"
           dataSet={{
             'component-props': JSON.stringify({
               'is-text-style': true,

diff --git a/example/storybook/src/components/Forms/Select/Select.tsx b/example/storybook/src/components/Forms/Select/Select.tsx
@@ -38,8 +38,8 @@ const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => {
       <SelectTrigger size={size} variant={variant}>
         <SelectInput placeholder="Select option" />
         <SelectIcon
-          mr={variant === 'underlined' ? 0 : '$3'}
-          ml={variant === 'underlined' ? '$3' : 0}
+          pr={variant === 'underlined' ? 0 : '$3'}
+          pl={variant === 'underlined' ? '$3' : 0}
           as={ChevronDownIcon}
           dataSet={{
             'component-props': JSON.stringify({