Button styling refactor (#12)

rapidez · Jan 29, 2025 · 976a132 · 976a132
1 parent 1895d9f
commit 976a132
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 93 deletions.
diff --git a/.github/media/buttons.png b/.github/media/buttons.png
diff --git a/README.md b/README.md
@@ -28,13 +28,14 @@ The base button doesn't have any styling; here, we only use the `x-rapidez::tag`
 ![](.github/media/buttons.png)
 
 - [Base](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/base.blade.php)
-- [Button](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/button.blade.php)
+- [Default](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/button.blade.php)
 - [Primary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/primary.blade.php)
 - [Secondary](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/secondary.blade.php)
 - [Outline](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/outline.blade.php)
 - [Conversion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/conversion.blade.php)
 - [Slider](https://github.com/rapidez/blade-components/blob/master/resources/views/components/button/slider.blade.php)
 
+
 ## Installation
 
 ```
@@ -190,24 +191,6 @@ Make sure to add this class to your body tag to prevent scrolling when the slide
 <body class="has-[.prevent-scroll:checked]:overflow-clip">
 ```
 
-#### Slideover
-
-```blade
-<label for="my-slideover">
-    Open Slideover
-</label>
-
-<x-rapidez::slideover id="my-slideover" title="Example Slideover">
-    Your slideover content goes here
-</x-rapidez::slideover>
-```
-
-Make sure to add this class to your body tag to prevent scrolling when the slideover is open:
-
-```html
-<body class="has-[.slideover-checkbox:checked]:overflow-hidden">
-```
-
 #### Tag
 
 It is a Blade version of a [dynamic Vue component](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)

diff --git a/demo/components.html b/demo/components.html
diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php
@@ -118,8 +118,8 @@ function color(variable, fallback) {
                     </div>
                 </div>
                 <div class="flex flex-col gap-y-2">
-                    <x-rapidez::button>Button</x-rapidez::button>
-                    <x-rapidez::button disabled>Button disabled</x-rapidez::button>
+                    <x-rapidez::button>Default button</x-rapidez::button>
+                    <x-rapidez::button disabled>Default button disabled</x-rapidez::button>
                 </div>
                 <div class="flex flex-col gap-y-2">
                     <x-rapidez::button.outline>Outline</x-rapidez::button.outline>

diff --git a/resources/views/components/button/base.blade.php b/resources/views/components/button/base.blade.php
@@ -1,30 +1,12 @@
 {{--
-This is the base for all the buttons. In here we don't need classes.
-If you want to change styling for buttons go to the button/button.
-- `href` attribute results in an `<a>`
-- `for` attribute results in a `<label>`
-- Fallback/default is `<button>`
-Examples:
-
-```
-<x-rapidez::button href="something">Something</x-rapidez::button>
-```
-
-```
-<x-rapidez::button for="something">Something</x-rapidez::button>
-```
+The classes that are set on this button are the base for most other buttons.
+It is not recommended to use this button. Make use of the other buttons. ie: `button/primary`
+Example:
 
 ```
 <x-rapidez::button>Something</x-rapidez::button>
 ```
 --}}
-@props(['tag' => 'button'])
-
-@php
-    $tag = $attributes->hasAny('href', ':href', 'v-bind:href', 'x-bind:href') ? 'a' : $tag;
-    $tag = $attributes->has('for') ? 'label' : $tag;
-@endphp
-
-<x-rapidez::tag is="{{ $tag }}" {{ $attributes }}>
+<x-rapidez::button.tag {{ $attributes->twMerge('inline-flex items-center justify-center transition font-medium text-base rounded min-h-12 py-1.5 px-5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer gap-x-1.5') }}>
     {{ $slot }}
-</x-rapidez::tag>
+</x-rapidez::button.tag>
diff --git a/resources/views/components/button/button.blade.php b/resources/views/components/button/button.blade.php
@@ -1,12 +1,10 @@
 {{--
-This is the default button if you use the example you get this.
-It is not recommended to use this button. Make use of the other buttons. ie: `button/primary`
+The default button is a variant used for basic use cases.
 Example:
-
 ```
 <x-rapidez::button>Something</x-rapidez::button>
 ```
 --}}
-<x-rapidez::button.base {{ $attributes->twMerge('relative inline-flex items-center justify-center text transition bg text-base font-medium rounded min-h-12 py-1.5 px-5 hover:bg-opacity-80 border-b border-b-black/15 disabled:text-muted disabled:bg-muted disabled:cursor-not-allowed') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg text-muted hover:text hover:bg-emphasis border-b border-b-black/10') }}>
     {{ $slot }}
-</x-rapidez::button.base>
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/conversion.blade.php b/resources/views/components/button/conversion.blade.php
@@ -7,6 +7,6 @@
 <x-rapidez::button.conversion>Something</x-rapidez::button.conversion>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-conversion text-conversion-text') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-conversion hover:bg-opacity-80 text-conversion-text border-b border-b-black/20') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/outline.blade.php b/resources/views/components/button/outline.blade.php
@@ -6,6 +6,6 @@
 <x-rapidez::button.outline>Something</x-rapidez::button.outline>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-transparent border text-default hover:border-emphasis') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-transparent border text-default hover:border-emphasis') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/primary.blade.php b/resources/views/components/button/primary.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.primary>Something</x-rapidez::button.primary>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-primary text-primary-text') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-primary text-primary-text border-b border-b-black/20 hover:bg-opacity-80') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/secondary.blade.php b/resources/views/components/button/secondary.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.secondary>Something</x-rapidez::button.secondary>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('bg-secondary text-secondary-text') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-secondary text-secondary-text border-b border-b-black/20 hover:bg-opacity-80') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/slider.blade.php b/resources/views/components/button/slider.blade.php
@@ -3,6 +3,6 @@
 <x-rapidez::button.slider>Icon</x-rapidez::button.slider>
 ```
 --}}
-<x-rapidez::button {{ $attributes->twMerge('inline-flex bg-white p-0 rounded-full size-14 items-center justify-center shadow text-default border') }}>
+<x-rapidez::button.base {{ $attributes->twMerge('bg-white p-0 rounded-full size-12 border hover:border-emphasis') }}>
     {{ $slot }}
-</x-rapidez::button>
+</x-rapidez::button.base>
diff --git a/resources/views/components/button/tag.blade.php b/resources/views/components/button/tag.blade.php
@@ -0,0 +1,30 @@
+{{--
+This is the tag used for all the buttons. In here we don't need classes.
+If you want to change styling for buttons go to the button/base.
+- `href` attribute results in an `<a>`
+- `for` attribute results in a `<label>`
+- Fallback/default is `<button>`
+Examples:
+
+```
+<x-rapidez::button href="something">Something</x-rapidez::button>
+```
+
+```
+<x-rapidez::button for="something">Something</x-rapidez::button>
+```
+
+```
+<x-rapidez::button>Something</x-rapidez::button>
+```
+--}}
+@props(['tag' => 'button'])
+
+@php
+    $tag = $attributes->hasAny('href', ':href', 'v-bind:href', 'x-bind:href') ? 'a' : $tag;
+    $tag = $attributes->has('for') ? 'label' : $tag;
+@endphp
+
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes }}>
+    {{ $slot }}
+</x-rapidez::tag>
diff --git a/resources/views/components/input/input.blade.php b/resources/views/components/input/input.blade.php
@@ -14,4 +14,4 @@
 </label>
 ```
 --}}
-<input {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
+<input {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
diff --git a/resources/views/components/input/select/select.blade.php b/resources/views/components/input/select/select.blade.php
@@ -18,6 +18,6 @@
 </label>
 ```
 --}}
-<select {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted') }}>
+<select {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted') }}>
     {{ $slot }}
 </select>
diff --git a/resources/views/components/input/textarea/textarea.blade.php b/resources/views/components/input/textarea/textarea.blade.php
@@ -14,4 +14,4 @@
 </label>
 ```
 --}}
-<textarea {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-muted disabled:border-muted placeholder:text-muted') }}>{{ $slot }}</textarea>
+<textarea {{ $attributes->twMerge('w-full py-3 px-5 border border-default rounded-md outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-emphasis disabled:cursor-not-allowed disabled:bg-emphasis disabled:border-emphasis placeholder:text-muted') }}>{{ $slot }}</textarea>