Skip to content

Commit 2a83d5a

Browse files
unlightunlight
committed
feat: New helper class .is-float-label-sticky
BREAKING CHANGE: Inversed markup for sticky label are not working anymore use `.is-float-label-sticky` instead
1 parent 907c98a commit 2a83d5a

File tree

5 files changed

+103
-63
lines changed

5 files changed

+103
-63
lines changed

‎README.md

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,11 @@ Plugins adds three components supposed used together:
4242
- `.has-float-label` Container which holds input control and label
4343
- `.control-with-float-label` Form control
4444
- `.is-float-label` Label
45+
- `.is-float-label-sticky` Label which is always visible
4546

4647
```html
4748
<form class="max-w-xs mx-auto p-5 space-y-4">
48-
<h2 class="text-2xl font-bold text-center">Login</h2>
49+
<h2 class="text-2xl font-bold text-center">Example</h2>
4950
<div class="has-float-label">
5051
<input
5152
type="text"
@@ -54,26 +55,15 @@ Plugins adds three components supposed used together:
5455
placeholder="Name"
5556
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
5657
/>
57-
<label for="name" class="is-float-label bg-white text-gray-700">Name</label>
58-
</div>
59-
<div class="has-float-label">
60-
<label class="is-float-label bg-white text-gray-700">About</label>
61-
<textarea
62-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
63-
placeholder="About"
64-
>
65-
</textarea>
58+
<label for="name" class="is-float-label bg-white text-gray-500">Name</label>
6659
</div>
6760
</form>
6861
```
6962

7063
#### Notes:
7164

72-
1. `.control-with-float-label` and `.is-float-label`
73-
must be direct children of `.has-float-label`
74-
2. If label used before form control, label becomes sticky (always visible)
75-
3. If label used after form control, label is visible when control contains value
76-
(classic float label pattern)
65+
`.control-with-float-label` and `.is-float-label`
66+
must be direct children of `.has-float-label`
7767

7868
## Similar Projects
7969

@@ -83,3 +73,4 @@ Plugins adds three components supposed used together:
8373

8474
- https://tailwindow.github.io/component-tailwindcss/components/form/input-text/index.html
8575
- https://github.com/you-dont-need/You-Dont-Need-JavaScript#Floating
76+
- https://csslayout.io/patterns/floating-label/

‎docs/index.html

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,74 +25,74 @@
2525
/>
2626
<label for="name" class="is-float-label bg-white text-gray-500">Name</label>
2727
</div>
28-
<div class="has-float-label">
29-
<label for="Login" class="is-float-label bg-white text-gray-500"
30-
>Login (Always visible)</label
31-
>
28+
<div class="has-float-label text-base">
3229
<input
3330
type="text"
3431
id="Login"
3532
autocomplete="off"
3633
placeholder="Login"
37-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-base"
34+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
3835
value=""
3936
/>
37+
<label for="Login" class="is-float-label-sticky bg-white text-gray-500"
38+
>Login (Always visible)</label
39+
>
4040
</div>
41-
<div class="has-float-label">
41+
<div class="has-float-label text-lg">
4242
<input
4343
type="text"
4444
id="Email"
4545
autocomplete="off"
4646
placeholder="Email"
4747
value="[email protected]"
48-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-lg"
48+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
4949
/>
5050
<label for="Email" class="is-float-label bg-white text-gray-500">Email</label>
5151
</div>
5252

53-
<div class="has-float-label">
53+
<div class="has-float-label text-xl">
5454
<input
55-
type="password"
55+
type="text"
5656
autocomplete="off"
5757
placeholder="Password"
5858
value="Password"
59-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-xl"
59+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
6060
/>
6161
<label for="Password" class="is-float-label bg-white text-gray-500">Password</label>
6262
</div>
6363

64-
<div class="has-float-label">
64+
<div class="has-float-label text-2xl">
6565
<input
6666
type="text"
6767
autocomplete="off"
6868
id="Job Title"
6969
placeholder="Job Title"
7070
value="Job Title"
71-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-2xl"
71+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
7272
/>
7373
<label for="Job Title" class="is-float-label bg-white text-gray-500"
7474
>Job Title</label
7575
>
7676
</div>
7777

78-
<div class="has-float-label">
78+
<div class="has-float-label text-3xl">
7979
<input
8080
type="text"
8181
autocomplete="off"
8282
placeholder="Status"
8383
value="Status"
84-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-3xl"
84+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
8585
/>
8686
<label for="Status" class="is-float-label bg-white text-gray-500">Status</label>
8787
</div>
8888

89-
<div class="has-float-label">
89+
<div class="has-float-label text-xs">
9090
<input
9191
type="text"
9292
autocomplete="off"
9393
placeholder="Image"
9494
value="Image"
95-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-xs"
95+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
9696
/>
9797
<label for="Image" class="is-float-label bg-white text-gray-500">Image</label>
9898
</div>
@@ -121,6 +121,20 @@
121121
>
122122
<label class="is-float-label bg-white text-gray-500">Bio</label>
123123
</div>
124+
125+
<form class="max-w-xs mx-auto p-5 space-y-4">
126+
<h2 class="text-2xl font-bold text-center">Readme Example</h2>
127+
<div class="has-float-label">
128+
<input
129+
type="text"
130+
id="name"
131+
autocomplete="off"
132+
placeholder="Name"
133+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
134+
/>
135+
<label for="name" class="is-float-label bg-white text-gray-500">Name</label>
136+
</div>
137+
</form>
124138
</form>
125139
</body>
126140
</html>

‎docs/tailwind.build.css

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -594,10 +594,10 @@ video {
594594

595595
.is-float-label {
596596
line-height: 1;
597+
font-size: 0.75rem;
597598
padding-left: 0.25rem;
598599
padding-right: 0.25rem;
599-
font-size: calc(42 / 60 * 1rem);
600-
top: calc(-22 / 60 * 1rem);
600+
top: 0;
601601
left: 0.25rem;
602602
position: absolute;
603603
}
@@ -613,14 +613,29 @@ video {
613613

614614
.control-with-float-label:not(:-moz-placeholder-shown) + .is-float-label {
615615
opacity: 1;
616+
transform: translate(0, -50%);
616617
}
617618

618619
.control-with-float-label:not(:-ms-input-placeholder) + .is-float-label {
619620
opacity: 1;
621+
transform: translate(0, -50%);
620622
}
621623

622624
.control-with-float-label:not(:placeholder-shown) + .is-float-label {
623625
opacity: 1;
626+
transform: translate(0, -50%);
627+
}
628+
629+
.is-float-label-sticky {
630+
line-height: 1;
631+
font-size: 0.75rem;
632+
padding-left: 0.25rem;
633+
padding-right: 0.25rem;
634+
top: 0;
635+
left: 0.25rem;
636+
position: absolute;
637+
opacity: 1;
638+
transform: translate(0, -50%);
624639
}
625640

626641
.space-y-0 > :not(template) ~ :not(template) {

‎src/index.html

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,74 +25,74 @@
2525
/>
2626
<label for="name" class="is-float-label bg-white text-gray-500">Name</label>
2727
</div>
28-
<div class="has-float-label">
29-
<label for="Login" class="is-float-label bg-white text-gray-500"
30-
>Login (Always visible)</label
31-
>
28+
<div class="has-float-label text-base">
3229
<input
3330
type="text"
3431
id="Login"
3532
autocomplete="off"
3633
placeholder="Login"
37-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-base"
34+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
3835
value=""
3936
/>
37+
<label for="Login" class="is-float-label-sticky bg-white text-gray-500"
38+
>Login (Always visible)</label
39+
>
4040
</div>
41-
<div class="has-float-label">
41+
<div class="has-float-label text-lg">
4242
<input
4343
type="text"
4444
id="Email"
4545
autocomplete="off"
4646
placeholder="Email"
4747
value="[email protected]"
48-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-lg"
48+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
4949
/>
5050
<label for="Email" class="is-float-label bg-white text-gray-500">Email</label>
5151
</div>
5252

53-
<div class="has-float-label">
53+
<div class="has-float-label text-xl">
5454
<input
55-
type="password"
55+
type="text"
5656
autocomplete="off"
5757
placeholder="Password"
5858
value="Password"
59-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-xl"
59+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
6060
/>
6161
<label for="Password" class="is-float-label bg-white text-gray-500">Password</label>
6262
</div>
6363

64-
<div class="has-float-label">
64+
<div class="has-float-label text-2xl">
6565
<input
6666
type="text"
6767
autocomplete="off"
6868
id="Job Title"
6969
placeholder="Job Title"
7070
value="Job Title"
71-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-2xl"
71+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
7272
/>
7373
<label for="Job Title" class="is-float-label bg-white text-gray-500"
7474
>Job Title</label
7575
>
7676
</div>
7777

78-
<div class="has-float-label">
78+
<div class="has-float-label text-3xl">
7979
<input
8080
type="text"
8181
autocomplete="off"
8282
placeholder="Status"
8383
value="Status"
84-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-3xl"
84+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
8585
/>
8686
<label for="Status" class="is-float-label bg-white text-gray-500">Status</label>
8787
</div>
8888

89-
<div class="has-float-label">
89+
<div class="has-float-label text-xs">
9090
<input
9191
type="text"
9292
autocomplete="off"
9393
placeholder="Image"
9494
value="Image"
95-
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1 text-xs"
95+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
9696
/>
9797
<label for="Image" class="is-float-label bg-white text-gray-500">Image</label>
9898
</div>
@@ -121,6 +121,20 @@
121121
>
122122
<label class="is-float-label bg-white text-gray-500">Bio</label>
123123
</div>
124+
125+
<form class="max-w-xs mx-auto p-5 space-y-4">
126+
<h2 class="text-2xl font-bold text-center">Readme Example</h2>
127+
<div class="has-float-label">
128+
<input
129+
type="text"
130+
id="name"
131+
autocomplete="off"
132+
placeholder="Name"
133+
class="control-with-float-label outline-none focus:shadow-outline border w-full px-1"
134+
/>
135+
<label for="name" class="is-float-label bg-white text-gray-500">Name</label>
136+
</div>
137+
</form>
124138
</form>
125139
</body>
126140
</html>

‎src/index.ts

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ export default function floatLabelFactory(options?: Options) {
2323
{
2424
control: 'pt-1 pb-1',
2525
label: {
26-
['@apply leading-none px-1']: '',
27-
fontSize: 'calc(42 / 60 * 1rem)',
28-
top: 'calc(-22 / 60 * 1rem)',
26+
['@apply leading-none text-xs px-1']: '',
27+
// fontSize: 'calc(42 / 60 * 100%)',
28+
top: 0,
2929
left: '0.25rem',
3030
},
3131
},
@@ -36,6 +36,17 @@ export default function floatLabelFactory(options?: Options) {
3636
const container = config.container ? toObject(config.container) : {};
3737
const control = config.control ? toObject(config.control) : {};
3838
const label = config.label ? toObject(config.label) : {};
39+
const floatLabel = {
40+
...label,
41+
// position: absolute; top/left will be faster
42+
// if used on elements without transitions
43+
position: 'absolute',
44+
// transition: 'all 100ms',
45+
};
46+
const showLabel = {
47+
opacity: 1,
48+
transform: 'translate(0, -50%)',
49+
};
3950

4051
addComponents({
4152
'.has-float-label': {
@@ -44,22 +55,17 @@ export default function floatLabelFactory(options?: Options) {
4455
display: 'flex',
4556
flexDirection: 'column-reverse',
4657
},
47-
'.is-float-label': {
48-
...label,
49-
// position: absolute; top/left will be faster
50-
// if used on elements without transitions
51-
position: 'absolute',
52-
},
58+
'.is-float-label': floatLabel,
5359
'.control-with-float-label': {
5460
...control,
5561
'& + .is-float-label': {
5662
opacity: 0,
5763
},
58-
'&:not(:placeholder-shown)': {
59-
'& + .is-float-label': {
60-
opacity: 1,
61-
},
62-
},
64+
'&:not(:placeholder-shown) + .is-float-label': showLabel,
65+
},
66+
'.is-float-label-sticky': {
67+
...floatLabel,
68+
...showLabel,
6369
},
6470
});
6571
};

0 commit comments

Comments
 (0)