Skip to content

Floating labels #5431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 10 commits into
base: develop
Choose a base branch
from
Draft

Floating labels #5431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4bf3998
feat(floating-label): add floating-label positions
TeyaVes May 7, 2025
340127c
feat(html): add floating-label positions
TeyaVes May 7, 2025
7df5556
chore: regen docs
TeyaVes May 7, 2025
7edb66e
fix(html): render input-value-text span in input-inner event if value…
TeyaVes May 7, 2025
5adc6bf
chore: add class to pickers
TeyaVes May 19, 2025
3286151
chore: tweak tests
TeyaVes May 19, 2025
b93cd5a
chore: update visual previews
kendo-bot May 21, 2025
c458559
chore: rework tesst for testing purposes
TeyaVes May 21, 2025
b62f996
chore: remove text in test
TeyaVes May 21, 2025
b7b9320
chore: update visual previews
kendo-bot May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 93 additions & 3 deletions packages/bootstrap/docs/customization-floating-label.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,66 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical offset of the focused Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-scale</td>
<td>Number</td>
<td><code>1</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transformation scale of the Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-scale</td>
<td>Number</td>
<td><code>.85</code></td>
<td><code>0.85</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transformation scale of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-offset-x</td>
<td>String</td>
<td><code>k-spacing(3)</code></td>
<td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal offset of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-padding</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The padding of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-inside-scale</td>
<td>Number</td>
<td><code>1</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transformation scale of the Inside Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-inside-focus-scale</td>
<td>Number</td>
<td><code>.85</code></td>
<td><code>0.85</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transformation scale of the focused Inside Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-transition</td>
<td>List</td>
Expand All @@ -149,9 +209,9 @@ The following table lists the available variables for customization.
</tr>
<tr>
<td>$kendo-floating-label-text</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
<td>String</td>
<td><code>k-color(on-app-surface)</code></td>
<td><code>var(--kendo-color-on-app-surface, #212529)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Floating Label.</div></div>
Expand All @@ -177,6 +237,36 @@ The following table lists the available variables for customization.
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-bg</td>
<td>String</td>
<td><code>k-color(surface-alt)</code></td>
<td><code>var(--kendo-color-surface-alt, #ffffff)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-text</td>
<td>String</td>
<td><code>k-color(subtle)</code></td>
<td><code>var(--kendo-color-subtle, #596169)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-inside-focus-text</td>
<td>String</td>
<td><code>k-color(subtle)</code></td>
<td><code>var(--kendo-color-subtle, #596169)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Inside Floating Label.</div></div>
</td>
</tr>
</tbody>
</table>

Expand Down
96 changes: 93 additions & 3 deletions packages/bootstrap/docs/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11314,6 +11314,66 @@ The following table lists the available variables for customizing the Bootstrap
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical offset of the focused Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-scale</td>
<td>Number</td>
<td><code>1</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transformation scale of the Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-scale</td>
<td>Number</td>
<td><code>.85</code></td>
<td><code>0.85</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transformation scale of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-offset-x</td>
<td>String</td>
<td><code>k-spacing(3)</code></td>
<td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal offset of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-padding</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The padding of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-inside-scale</td>
<td>Number</td>
<td><code>1</code></td>
<td><code>1</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transformation scale of the Inside Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-inside-focus-scale</td>
<td>Number</td>
<td><code>.85</code></td>
<td><code>0.85</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transformation scale of the focused Inside Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-transition</td>
<td>List</td>
Expand All @@ -11336,9 +11396,9 @@ The following table lists the available variables for customizing the Bootstrap
</tr>
<tr>
<td>$kendo-floating-label-text</td>
<td>Null</td>
<td><code>null</code></td>
<td><code>null</code></td>
<td>String</td>
<td><code>k-color(on-app-surface)</code></td>
<td><code>var(--kendo-color-on-app-surface, #212529)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Floating Label.</div></div>
Expand All @@ -11364,6 +11424,36 @@ The following table lists the available variables for customizing the Bootstrap
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-bg</td>
<td>String</td>
<td><code>k-color(surface-alt)</code></td>
<td><code>var(--kendo-color-surface-alt, #ffffff)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-border-focus-text</td>
<td>String</td>
<td><code>k-color(subtle)</code></td>
<td><code>var(--kendo-color-subtle, #596169)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Border Floating Label.</div></div>
</td>
</tr>
<tr>
<td>$kendo-floating-label-pos-inside-focus-text</td>
<td>String</td>
<td><code>k-color(subtle)</code></td>
<td><code>var(--kendo-color-subtle, #596169)</code></td>
</tr>
<tr>
<td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Inside Floating Label.</div></div>
</td>
</tr>
</tbody>
</table>

Expand Down
20 changes: 20 additions & 0 deletions packages/bootstrap/scss/floating-label/_theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,26 @@
@use "../core/_index.scss" as *;
@use "../input/_variables.scss" as *;
@use "@progress/kendo-theme-core/scss/components/floating-label/_theme.scss" as *;


@mixin kendo-floating-label--theme() {
@include kendo-floating-label--theme-base();

.k-label-position-inside {
> .k-picker + .k-floating-label,
&.k-focus > .k-picker +.k-floating-label,
&:focus-within > .k-picker + .k-floating-label {
@include fill (
$color: $kendo-picker-text
);
}

// Fix for picker outline hover
> .k-picker-outline:hover + .k-floating-label,
> .k-picker-outline.k-hover + .k-floating-label {
@include fill (
$color: $kendo-picker-outline-hover-text
);
}
}
}
45 changes: 43 additions & 2 deletions packages/bootstrap/scss/floating-label/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,28 @@ $kendo-floating-label-focus-offset-x: 0 !default;
/// @group floating-label
$kendo-floating-label-focus-offset-y: 0 !default;

/// The transformation scale of the Border Floating Label.
/// @group floating-label
$kendo-floating-label-pos-border-scale: 1 !default;

/// The transformation scale of the focused Border Floating Label.
/// @group floating-label
$kendo-floating-label-pos-border-focus-scale: .85 !default;
/// The horizontal offset of the focused Border Floating Label.
/// @group floating-label
$kendo-floating-label-pos-border-focus-offset-x: k-spacing(3) !default;
/// The padding of the focused Border Floating Label.
/// @group floating-label
$kendo-floating-label-pos-border-focus-padding: null !default;

/// The transformation scale of the Inside Floating Label.
/// @group floating-label
$kendo-floating-label-pos-inside-scale: 1 !default;

/// The transformation scale of the focused Inside Floating Label.
/// @group floating-label
$kendo-floating-label-pos-inside-focus-scale: .85 !default;

/// The transition of the Floating Label.
/// @group floating-label
$kendo-floating-label-transition: .2s ease-out !default;
Expand All @@ -44,7 +66,7 @@ $kendo-floating-label-transition: .2s ease-out !default;
$kendo-floating-label-bg: null !default;
/// The text color of the Floating Label.
/// @group floating-label
$kendo-floating-label-text: null !default;
$kendo-floating-label-text: k-color(on-app-surface) !default;

/// The background color of the focused Floating Label.
/// @group floating-label
Expand All @@ -53,6 +75,16 @@ $kendo-floating-label-focus-bg: null !default;
/// @group floating-label
$kendo-floating-label-focus-text: null !default;

/// The background color of the focused Border Floating Label.
/// @group floating-label
$kendo-floating-label-pos-border-focus-bg: k-color(surface-alt) !default;
/// The text color of the focused Border Floating Label.
/// @group floating-label
$kendo-floating-label-pos-border-focus-text: k-color(subtle) !default;

/// The text color of the focused Inside Floating Label.
/// @group floating-label
$kendo-floating-label-pos-inside-focus-text: k-color(subtle) !default;

@forward "@progress/kendo-theme-core/scss/components/floating-label/_variables.scss" with (
$kendo-floating-label-scale: $kendo-floating-label-scale,
Expand All @@ -65,9 +97,18 @@ $kendo-floating-label-focus-text: null !default;
$kendo-floating-label-focus-scale: $kendo-floating-label-focus-scale,
$kendo-floating-label-focus-offset-x: $kendo-floating-label-focus-offset-x,
$kendo-floating-label-focus-offset-y: $kendo-floating-label-focus-offset-y,
$kendo-floating-label-pos-border-scale: $kendo-floating-label-pos-border-scale,
$kendo-floating-label-pos-border-focus-scale: $kendo-floating-label-pos-border-focus-scale,
$kendo-floating-label-pos-border-focus-offset-x: $kendo-floating-label-pos-border-focus-offset-x,
$kendo-floating-label-pos-border-focus-padding: $kendo-floating-label-pos-border-focus-padding,
$kendo-floating-label-pos-inside-scale: $kendo-floating-label-pos-inside-scale,
$kendo-floating-label-pos-inside-focus-scale: $kendo-floating-label-pos-inside-focus-scale,
$kendo-floating-label-transition: $kendo-floating-label-transition,
$kendo-floating-label-bg: $kendo-floating-label-bg,
$kendo-floating-label-text: $kendo-floating-label-text,
$kendo-floating-label-focus-bg: $kendo-floating-label-focus-bg,
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text
$kendo-floating-label-focus-text: $kendo-floating-label-focus-text,
$kendo-floating-label-pos-border-focus-bg: $kendo-floating-label-pos-border-focus-bg,
$kendo-floating-label-pos-border-focus-text: $kendo-floating-label-pos-border-focus-text,
$kendo-floating-label-pos-inside-focus-text: $kendo-floating-label-pos-inside-focus-text
);
Loading