Skip to content

Commit d02a259

Browse files
unlightunlight
committed
refactor: Rename classes
BREAKING CHANGE: All classes prefixed with `float-label`, see [readme](https://github.com/unlight/tailwind-float-label#usage)
1 parent 2f9176d commit d02a259

File tree

7 files changed

+342
-187800
lines changed

7 files changed

+342
-187800
lines changed

‎README.md

+11-10
Original file line numberDiff line numberDiff line change
@@ -39,27 +39,27 @@ type Options = {
3939

4040
Plugins adds these components supposed used together:
4141

42-
- `.has-float-label` Container which holds input control and label
43-
- `.control-with-float-label` Form control
44-
- `.is-float-label` Label
45-
- `.is-float-label-sticky` Label which is always visible
46-
- But `.auto-float-label` Automatically make `label` floating and `input` inside this container
42+
- `.float-label-container` Container which holds input control and label
43+
- `.float-label-control` Form control
44+
- `.float-label-self` Label
45+
- `.float-label-sticky` Label which is always visible
46+
- But `.float-label-auto` Automatically make `label` floating and `input` inside this container
4747

4848
```html
4949
<form class="max-w-xs mx-auto p-5 space-y-4">
5050
<h2 class="text-2xl font-bold text-center">Example</h2>
51-
<div class="has-float-label">
51+
<div class="float-label-container">
5252
<input
5353
type="text"
5454
id="name"
5555
autocomplete="off"
5656
placeholder="Name"
57-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
57+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
5858
/>
59-
<label for="name" class="is-float-label bg-white text-gray-500">Name</label>
59+
<label for="name" class="float-label-self bg-white text-gray-500">Name</label>
6060
</div>
6161
<!-- Auto: make `label` floating for `input` -->
62-
<div class="auto-float-label">
62+
<div class="float-label-auto">
6363
<input
6464
type="text"
6565
id="auto"
@@ -74,7 +74,7 @@ Plugins adds these components supposed used together:
7474

7575
#### Notes:
7676

77-
`.control-with-float-label` and `.is-float-label` must be direct children of `.has-float-label`
77+
`.float-label-control` and `.float-label-self` must be direct children of `.float-label-container`
7878

7979
## Similar Projects
8080

@@ -85,3 +85,4 @@ Plugins adds these components supposed used together:
8585
- https://tailwindow.github.io/component-tailwindcss/components/form/input-text/index.html
8686
- https://github.com/you-dont-need/You-Dont-Need-JavaScript#Floating
8787
- https://csslayout.io/patterns/floating-label/
88+
- https://tailwindcomponents.com/component/login-form-with-float-label-input

‎docs/index.html

+33-101
Original file line numberDiff line numberDiff line change
@@ -15,148 +15,94 @@
1515
>Github</a
1616
>
1717
</p>
18-
<div class="has-float-label">
18+
<div class="float-label-container">
1919
<input
2020
type="text"
2121
id="name"
2222
autocomplete="off"
2323
placeholder="Name"
24-
class="
25-
control-with-float-label
26-
outline-none
27-
focus:shadow-outline
28-
border
29-
w-full
30-
px-1
31-
"
24+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
3225
/>
33-
<label for="name" class="is-float-label bg-white text-gray-500">Name</label>
26+
<label for="name" class="float-label-self bg-white text-gray-500">Name</label>
3427
</div>
35-
<div class="has-float-label text-base">
28+
<div class="float-label-container text-base">
3629
<input
3730
type="text"
3831
id="Login"
3932
autocomplete="off"
4033
placeholder="Login"
41-
class="
42-
control-with-float-label
43-
outline-none
44-
focus:shadow-outline
45-
border
46-
w-full
47-
px-1
48-
"
34+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
4935
value=""
5036
/>
51-
<label for="Login" class="is-float-label-sticky bg-white text-gray-500"
37+
<label for="Login" class="float-label-sticky bg-white text-gray-500"
5238
>Login (Always visible)</label
5339
>
5440
</div>
55-
<div class="has-float-label text-lg">
41+
<div class="float-label-container text-lg">
5642
<input
5743
type="text"
5844
id="Email"
5945
autocomplete="off"
6046
placeholder="Email"
6147
value="[email protected]"
62-
class="
63-
control-with-float-label
64-
outline-none
65-
focus:shadow-outline
66-
border
67-
w-full
68-
px-1
69-
"
48+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
7049
/>
71-
<label for="Email" class="is-float-label bg-white text-gray-500">Email</label>
50+
<label for="Email" class="float-label-self bg-white text-gray-500">Email</label>
7251
</div>
7352

74-
<div class="has-float-label text-xl">
53+
<div class="float-label-container text-xl">
7554
<input
7655
type="text"
7756
autocomplete="off"
7857
placeholder="Password"
7958
value="Password"
80-
class="
81-
control-with-float-label
82-
outline-none
83-
focus:shadow-outline
84-
border
85-
w-full
86-
px-1
87-
"
59+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
8860
/>
89-
<label for="Password" class="is-float-label bg-white text-gray-500">Password</label>
61+
<label for="Password" class="float-label-self bg-white text-gray-500"
62+
>Password</label
63+
>
9064
</div>
9165

92-
<div class="has-float-label text-2xl">
66+
<div class="float-label-container text-2xl">
9367
<input
9468
type="text"
9569
autocomplete="off"
9670
id="Job Title"
9771
placeholder="Job Title"
9872
value="Job Title"
99-
class="
100-
control-with-float-label
101-
outline-none
102-
focus:shadow-outline
103-
border
104-
w-full
105-
px-1
106-
"
73+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
10774
/>
108-
<label for="Job Title" class="is-float-label bg-white text-gray-500"
75+
<label for="Job Title" class="float-label-self bg-white text-gray-500"
10976
>Job Title</label
11077
>
11178
</div>
11279

113-
<div class="has-float-label text-3xl">
80+
<div class="float-label-container text-3xl">
11481
<input
11582
type="text"
11683
autocomplete="off"
11784
placeholder="Status"
11885
value="Status"
119-
class="
120-
control-with-float-label
121-
outline-none
122-
focus:shadow-outline
123-
border
124-
w-full
125-
px-1
126-
"
86+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
12787
/>
128-
<label for="Status" class="is-float-label bg-white text-gray-500">Status</label>
88+
<label for="Status" class="float-label-self bg-white text-gray-500">Status</label>
12989
</div>
13090

131-
<div class="has-float-label text-xs">
91+
<div class="float-label-container text-xs">
13292
<input
13393
type="text"
13494
autocomplete="off"
13595
placeholder="Image"
13696
value="Image"
137-
class="
138-
control-with-float-label
139-
outline-none
140-
focus:shadow-outline
141-
border
142-
w-full
143-
px-1
144-
"
97+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
14598
/>
146-
<label for="Image" class="is-float-label bg-white text-gray-500">Image</label>
99+
<label for="Image" class="float-label-self bg-white text-gray-500">Image</label>
147100
</div>
148101

149-
<div class="has-float-label">
102+
<div class="float-label-container">
150103
<select
151104
id="Select"
152-
class="
153-
control-with-float-label
154-
outline-none
155-
focus:shadow-outline
156-
border
157-
w-full
158-
px-1
159-
"
105+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
160106
>
161107
<option value="">Select option</option>
162108
<option value="1">Option 1</option>
@@ -165,47 +111,33 @@
165111
<option value="4">Option 4</option>
166112
<option value="5">Option 5</option>
167113
</select>
168-
<label class="is-float-label bg-white text-gray-500" for="Select">Select</label>
114+
<label class="float-label-self bg-white text-gray-500" for="Select">Select</label>
169115
</div>
170116

171-
<div class="has-float-label">
117+
<div class="float-label-container">
172118
<textarea
173-
class="
174-
control-with-float-label
175-
outline-none
176-
focus:shadow-outline
177-
border
178-
w-full
179-
px-1
180-
"
119+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
181120
placeholder="Bio"
182121
>
183122
Bio</textarea
184123
>
185-
<label class="is-float-label bg-white text-gray-500">Bio</label>
124+
<label class="float-label-self bg-white text-gray-500">Bio</label>
186125
</div>
187126

188127
<form class="max-w-xs mx-auto p-5 space-y-4">
189128
<h2 class="text-2xl font-bold text-center">Readme Example</h2>
190-
<div class="has-float-label">
129+
<div class="float-label-container">
191130
<input
192131
type="text"
193132
id="name"
194133
autocomplete="off"
195134
placeholder="Name"
196-
class="
197-
control-with-float-label
198-
outline-none
199-
focus:shadow-outline
200-
border
201-
w-full
202-
px-1
203-
"
135+
class="float-label-control outline-none focus:shadow-outline border w-full px-1"
204136
/>
205-
<label for="name" class="is-float-label bg-white text-gray-500">Name</label>
137+
<label for="name" class="float-label-self bg-white text-gray-500">Name</label>
206138
</div>
207139

208-
<div title="Auto" class="auto-float-label">
140+
<div title="Auto" class="float-label-auto">
209141
<input
210142
type="text"
211143
id="auto"

0 commit comments

Comments
 (0)