refactor(components): ♻️ update button, checkbox, radio & avatar grou…

…ps (#243)
adaptui · Dec 29, 2021 · 56e4ee6 · 56e4ee6 · vercel · Dec 29, 2021
1 parent 9702410
commit 56e4ee6
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 35 deletions.
diff --git a/src/avatar-group/__tests__/__snapshots__/AvatarGroup.test.tsx.snap b/src/avatar-group/__tests__/__snapshots__/AvatarGroup.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<AvatarGroup /> should be able to overwrite specific avatar size 1`] =
 <DocumentFragment>
   <div
     aria-label="avatar group"
-    class="inline-flex items-center -space-x-1"
+    class="inline-flex items-center -space-x-0.5"
     role="group"
   >
     <span
@@ -73,7 +73,7 @@ exports[`<AvatarGroup /> should pass the size to all avatars 1`] = `
 <DocumentFragment>
   <div
     aria-label="avatar group"
-    class="inline-flex items-center -space-x-1"
+    class="inline-flex items-center -space-x-0.5"
     role="group"
   >
     <span
@@ -142,7 +142,7 @@ exports[`<AvatarGroup /> should render correctly 1`] = `
 <DocumentFragment>
   <div
     aria-label="avatar group"
-    class="inline-flex items-center -space-x-1.5"
+    class="inline-flex items-center -space-x-1"
     role="group"
   >
     <span

diff --git a/src/checkbox-group/CheckboxShowMore.tsx b/src/checkbox-group/CheckboxShowMore.tsx
@@ -33,6 +33,7 @@ export const CheckboxShowMore: React.FC<CheckboxShowMoreProps> = props => {
   const theme = useTheme("checkbox");
   const buttonClassName = cx(
     theme.group.showMore.button.common[stack],
+    size === "lg" ? theme.group.showMore.button.lg : "",
     hasExpandStarted ? "" : theme.group.showMore.button.expanded[stack],
   );
   const contentClassName = cx(theme.group.showMore.content[stack]);

diff --git a/src/radio-group/RadioShowMore.tsx b/src/radio-group/RadioShowMore.tsx
@@ -30,11 +30,12 @@ export const RadioShowMore: React.FC<RadioShowMoreProps> = props => {
   const [hasExpandStarted, setHasExpandStarted] = React.useState(false);
 
   const theme = useTheme("radio");
-  const buttonClassName = cx(theme.group.showMore.button.common[stack]);
-  const contentClassName = cx(
-    theme.group.showMore.content[stack],
+  const buttonClassName = cx(
+    theme.group.showMore.button.common[stack],
+    size === "lg" ? theme.group.showMore.button.lg : "",
     hasExpandStarted ? "" : theme.group.showMore.button.expanded[stack],
   );
+  const contentClassName = cx(theme.group.showMore.content[stack]);
 
   const finalChildren = React.Children.map(children, child => {
     return passProps(child, {

diff --git a/src/show-more/stories/ShowMoreVertical.stories.tsx b/src/show-more/stories/ShowMoreVertical.stories.tsx
@@ -22,8 +22,3 @@ export default {
 export const Default: Story = {
   args: { direction: "vertical" },
 };
-
-// export const Horizontal: Story = {
-//   render: args => <ShowMoreHorizontalComponent {...args} />,
-//   args: { direction: "horizontal" },
-// };
diff --git a/src/theme/defaultTheme/avatar.ts b/src/theme/defaultTheme/avatar.ts
@@ -125,10 +125,10 @@ export const avatar = {
     common: "inline-flex items-center",
     size: {
       xs: "-space-x-px",
-      sm: "-space-x-px",
-      md: "-space-x-1",
-      lg: "-space-x-1",
-      xl: "-space-x-1.5",
+      sm: "-space-x-0.5",
+      md: "-space-x-0.5",
+      lg: "-space-x-0.5",
+      xl: "-space-x-1",
       "2xl": "-space-x-1.5",
       "3xl": "-space-x-2",
     },

diff --git a/src/theme/defaultTheme/button.ts b/src/theme/defaultTheme/button.ts
@@ -13,10 +13,10 @@ export const button = {
       ghost: "bg-white text-gray-600 border border-transparent",
     },
     hover: {
-      solid: "hover:bg-gray-700",
-      subtle: "hover:bg-gray-200",
-      outline: "hover:border-gray-300 hover:shadow-sm",
-      ghost: "hover:bg-gray-100",
+      solid: "hover:bg-gray-700 hover:z-10",
+      subtle: "hover:bg-gray-200 hover:z-10",
+      outline: "hover:border-gray-300 hover:shadow-sm hover:z-10",
+      ghost: "hover:bg-gray-100 hover:z-10",
     },
     active: {
       solid: "active:bg-gray-800",
@@ -30,7 +30,7 @@ export const button = {
       subtle:
         "focus-visible:ring-2 focus-visible:ring-gray-300 focus-visible:z-10",
       outline:
-        "focus-visible:ring-2 focus-visible:ring-gray-200 focus-visible:z-10",
+        "focus-visible:border-gray-300 focus-visible:!border-r-[1px] focus-visible:ring-2 focus-visible:ring-gray-200 focus-visible:z-10",
       ghost:
         "focus-visible:ring-2 focus-visible:ring-gray-200 focus-visible:z-10",
     },

diff --git a/src/theme/defaultTheme/checkbox.ts b/src/theme/defaultTheme/checkbox.ts
@@ -4,22 +4,23 @@ export const checkbox = {
       common: "flex flex-col items-start",
       size: {
         sm: "space-y-1",
-        md: "space-y-2",
-        lg: "space-y-3",
+        md: "space-y-1",
+        lg: "space-y-1",
       },
     },
     horizontal: {
       common: "flex flex-row w-fit",
       size: {
-        sm: "space-x-4",
-        md: "space-x-4",
-        lg: "space-x-4",
+        sm: "space-x-1",
+        md: "space-x-1",
+        lg: "space-x-1",
       },
     },
     showMore: {
       button: {
         common: { vertical: "justify-start w-full", horizontal: "min-w-max" },
         expanded: { vertical: "!mt-0", horizontal: "!ml-0" },
+        lg: "min-h-9 rounded-[10px]",
       },
       content: {
         vertical: "flex flex-col space-y-2 w-full",

diff --git a/src/theme/defaultTheme/radio.ts b/src/theme/defaultTheme/radio.ts
@@ -4,22 +4,26 @@ export const radio = {
       common: "flex flex-col items-start",
       size: {
         sm: "space-y-1",
-        md: "space-y-2",
-        lg: "space-y-3",
+        md: "space-y-1",
+        lg: "space-y-1",
       },
     },
     horizontal: {
       common: "flex flex-row w-fit",
       size: {
-        sm: "space-x-4",
-        md: "space-x-4",
-        lg: "space-x-4",
+        sm: "space-x-1",
+        md: "space-x-1",
+        lg: "space-x-1",
       },
     },
     showMore: {
       button: {
-        common: { vertical: "justify-start w-full", horizontal: "min-w-max" },
+        common: {
+          vertical: "justify-start w-full",
+          horizontal: "min-w-max",
+        },
         expanded: { vertical: "!mt-0", horizontal: "!ml-0" },
+        lg: "min-h-9 rounded-[10px]",
       },
       content: {
         vertical: "flex flex-col space-y-2 w-full",

diff --git a/tailwindPlugins/utilities.js b/tailwindPlugins/utilities.js
@@ -5,17 +5,15 @@ const utilities = plugin(function ({ addUtilities, theme }) {
     ".collapse-border > :first-of-type:not(:last-of-type)": {
       "border-top-right-radius": "0px",
       "border-bottom-right-radius": "0px",
-      "border-right-width": "0px",
     },
     ".collapse-border > :not(:first-of-type):not(:last-of-type)": {
       "border-radius": "0px",
-      "border-right-width": "0px",
-      "border-left-width": "0px",
+      "margin-left": "-1px",
     },
     ".collapse-border > :not(:first-of-type):last-of-type": {
       "border-top-left-radius": "0px",
       "border-bottom-left-radius": "0px",
-      "border-left-width": "0px",
+      "margin-left": "-1px",
     },
     ".meter-radius > :first-of-type:not(:last-of-type)": {
       "border-top-right-radius": "0px",