Merge pull request #22 from michaelmcshinsky/Issue/19/SwitchPadding

Issue/19/switch padding
michaelmcshinsky · Feb 19, 2022 · 4a0c482 · 4a0c482
2 parents d9ee7e3 + a0ddac9
commit 4a0c482
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 49 deletions.
diff --git a/.storybook/public/styles.css b/.storybook/public/styles.css
@@ -663,6 +663,11 @@ select {
   counter-increment: section;
 }
 
+.peer:checked ~ .peer-checked\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
+}
+
 .peer:checked ~ .peer-checked\:bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
@@ -683,11 +688,6 @@ select {
   background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
 }
 
-.peer:checked ~ .peer-checked\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
-}
-
 .peer:checked ~ .peer-checked\:bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
@@ -711,7 +711,7 @@ select {
 
 .peer:checked ~ .peer-checked\:after\:translate-x-6::after {
   content: "";
-  --tw-translate-x: 1.5rem;
+  --tw-translate-x: 1.4rem;
   transform: matrix(1, 0, 0, 1, 24, 0);
 }
 
@@ -1964,18 +1964,6 @@ select {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
-}
-
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -20177,6 +20165,11 @@ ul .numbered:before {
   background-color: rgb(136 19 55 / var(--tw-bg-opacity));
 }
 
+.peer:checked:checked ~ .peer-checked\:peer-checked\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .peer:checked:checked ~ .peer-checked\:peer-checked\:bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -20197,11 +20190,6 @@ ul .numbered:before {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.peer:checked:checked ~ .peer-checked\:peer-checked\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .peer:checked:checked ~ .peer-checked\:peer-checked\:bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
@@ -20229,6 +20217,11 @@ ul .numbered:before {
   transform: var(--tw-transform);
 }
 
+.group:hover .peer:checked ~ .group-hover\:peer-checked\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .group:hover .peer:checked ~ .group-hover\:peer-checked\:bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -20249,11 +20242,6 @@ ul .numbered:before {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.group:hover .peer:checked ~ .group-hover\:peer-checked\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .group:hover .peer:checked ~ .group-hover\:peer-checked\:bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
@@ -20269,6 +20257,11 @@ ul .numbered:before {
   background-color: rgb(236 72 153 / var(--tw-bg-opacity));
 }
 
+.group:focus .peer:checked ~ .group-focus\:peer-checked\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .group:focus .peer:checked ~ .group-focus\:peer-checked\:bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -20289,11 +20282,6 @@ ul .numbered:before {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.group:focus .peer:checked ~ .group-focus\:peer-checked\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .group:focus .peer:checked ~ .group-focus\:peer-checked\:bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
@@ -20309,6 +20297,11 @@ ul .numbered:before {
   background-color: rgb(236 72 153 / var(--tw-bg-opacity));
 }
 
+.group:active .peer:checked ~ .group-active\:peer-checked\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .group:active .peer:checked ~ .group-active\:peer-checked\:bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -20329,11 +20322,6 @@ ul .numbered:before {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.group:active .peer:checked ~ .group-active\:peer-checked\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .group:active .peer:checked ~ .group-active\:peer-checked\:bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
@@ -22639,6 +22627,11 @@ ul .numbered:before {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .peer:checked ~ .dark\:peer-checked\:bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .dark .peer:checked ~ .dark\:peer-checked\:bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -22659,11 +22652,6 @@ ul .numbered:before {
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
 
-.dark .peer:checked ~ .dark\:peer-checked\:bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
 .dark .peer:checked ~ .dark\:peer-checked\:bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));

diff --git a/config.js b/config.js
@@ -139,6 +139,10 @@ const slipstreamConfig = {
         '.after\\:h-6::after': { content: '""', height: '1.5rem' },
         '.after\\:w-8::after': { content: '""', width: '2rem' },
         '.after\\:h-8::after': { content: '""', height: '2rem' },
+        '.peer:checked ~ .peer-checked\\:bg-blue-500': {
+          '--tw-bg-opacity': '1',
+          backgroundColor: 'rgb(59, 130, 246, var(--tw-bg-opacity))',
+        },
         '.peer:checked ~ .peer-checked\\:bg-gray-500': {
           '--tw-bg-opacity': '1',
           backgroundColor: 'rgba(107, 114, 128, var(--tw-bg-opacity))',
@@ -173,12 +177,12 @@ const slipstreamConfig = {
         },
         '.peer:checked ~ .peer-checked\\:after\\:translate-x-4::after': {
           content: '""',
-          '--tw-translate-x': '1rem',
+          '--tw-translate-x': '.9rem',
           transform: 'matrix(1, 0, 0, 1, 16, 0)',
         },
         '.peer:checked ~ .peer-checked\\:after\\:translate-x-6::after': {
           content: '""',
-          '--tw-translate-x': '1.5rem',
+          '--tw-translate-x': '1.4rem',
           transform: 'matrix(1, 0, 0, 1, 24, 0)',
         },
         '.sui--input-group_prepend + .sui--input': {

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "slipstream-ui",
   "author": "Michael McShinsky",
   "description": "Component library combining React and Tailwindcss, built with TypeScript",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

diff --git a/src/navigation/tabs/TabItem.tsx b/src/navigation/tabs/TabItem.tsx
@@ -8,6 +8,7 @@ export interface TabItemProps {
   children?: ReactNode;
   className?: string;
   custom?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   tag?: 'li' | 'a' | 'div' | 'input' | any;
   color?: string;
   onClick?: (value: any) => void;
@@ -40,6 +41,7 @@ export const TabItem = forwardRef<HTMLElement, TabItemProps>(
       custom,
       onClick,
       shade,
+      size,
       tag,
       value,
       vertical,
@@ -56,6 +58,10 @@ export const TabItem = forwardRef<HTMLElement, TabItemProps>(
     const classes = classNames(
       'sui--tab-item',
       !custom && [
+        size === 'xs' && 'p-1 text-xs',
+        size === 'sm' && 'p-2 text-sm',
+        size === 'md' && 'p-3',
+        size === 'lg' && 'p-4 text-lg',
         !active &&
           (color
             ? `text-${color}${
@@ -75,7 +81,6 @@ export const TabItem = forwardRef<HTMLElement, TabItemProps>(
           'bg-blue-100': active && background,
         },
         active ? 'border-blue-500 text-blue-500' : 'border-transparent',
-        background ? 'p-3' : 'py-3',
         background
           ? vertical && border
             ? ''
@@ -107,6 +112,7 @@ export const TabItem = forwardRef<HTMLElement, TabItemProps>(
 
 TabItem.displayName = 'TabItem';
 TabItem.defaultProps = {
+  size: 'md',
   tag: 'a',
 };
 

diff --git a/src/navigation/tabs/TabSet.tsx b/src/navigation/tabs/TabSet.tsx
@@ -11,6 +11,7 @@ export interface TabSetProps {
   custom?: boolean;
   onClick?: (value: any) => void;
   rtl?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
   tabs?: TabItemMappedProps[];
   tag?: 'nav' | 'ul' | 'div' | any;
   vertical?: boolean;
@@ -42,6 +43,7 @@ export const TabSet = forwardRef<HTMLElement, TabSetProps>(
       rtl,
       tabs,
       vertical,
+      size,
       tag: Tag,
       ...props
     },
@@ -57,7 +59,7 @@ export const TabSet = forwardRef<HTMLElement, TabSetProps>(
       'sui--tab-set',
       'flex flex-wrap list-none',
       rtl && (vertical ? 'flex-col-reverse' : 'flex-row-reverse'),
-      vertical ? 'flex-col space-y-2' : 'space-x-4',
+      { 'flex-col ': vertical },
       className
     );
 
@@ -78,6 +80,7 @@ export const TabSet = forwardRef<HTMLElement, TabSetProps>(
             background,
             custom,
             onClick: _handleClick,
+            size,
             vertical,
           });
         }
@@ -97,6 +100,7 @@ export const TabSet = forwardRef<HTMLElement, TabSetProps>(
 
 TabSet.displayName = 'TabSet';
 TabSet.defaultProps = {
+  size: 'md',
   tag: 'nav',
   rtl: false,
 };

diff --git a/src/overlays/modal/Modal.tsx b/src/overlays/modal/Modal.tsx
@@ -99,7 +99,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
 
   const classes = classnames(
     'sui--modal',
-    'mx-auto my-auto',
+    'mx-auto my-auto w-full',
     { 'max-w-xs': size === 'xs' },
     { 'max-w-sm': size === 'sm' },
     { 'max-w-md': size === 'md' },