From 57e213bedc85da1e452147e8c1e47e6002a4d09b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Mon, 14 Sep 2026 20:27:07 +0200 Subject: [PATCH] Use Bootstrap form-text and keep form-hint as a deprecated alias (#3059) --- .changeset/form-hint-bootstrap.md | 7 +++++ core/scss/_extends.scss | 9 ++++++ core/scss/_variables.scss | 3 -- core/scss/ui/_forms.scss | 31 -------------------- docs/content/ui/forms/helpers.mdx | 8 ++--- docs/content/ui/forms/strength.mdx | 2 +- docs/content/ui/plugins/color-picker.mdx | 2 +- shared/components/cards/form/Layout.astro | 6 ++-- shared/components/cards/form/Payment.astro | 4 +-- shared/components/demo/ThemeSettings.astro | 6 ++-- shared/ui/FormGroup.astro | 8 ++--- shared/ui/{FormHint.astro => FormText.astro} | 6 ++-- 12 files changed, 37 insertions(+), 55 deletions(-) create mode 100644 .changeset/form-hint-bootstrap.md rename shared/ui/{FormHint.astro => FormText.astro} (61%) diff --git a/.changeset/form-hint-bootstrap.md b/.changeset/form-hint-bootstrap.md new file mode 100644 index 000000000..8ce5a123b --- /dev/null +++ b/.changeset/form-hint-bootstrap.md @@ -0,0 +1,7 @@ +--- +"@tabler/core": patch +"@tabler/preview": patch +"@tabler/docs": patch +--- + +Renamed `.form-hint` to Bootstrap's `.form-text`, with `.form-hint` kept as a deprecated alias. diff --git a/core/scss/_extends.scss b/core/scss/_extends.scss index d5c8a8818..780d0cbe6 100644 --- a/core/scss/_extends.scss +++ b/core/scss/_extends.scss @@ -97,3 +97,12 @@ @extend [data-bs-theme='dark']; } } + +// `.form-hint` is deprecated, use `.form-text` instead +// (from `bootstrap/forms/_form-text.scss`). +.form-hint { + @extend .form-text; + + // Kept from the old rule, so an inline element still gets the top margin. + display: block; +} diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index d4b1a733f..34d31d447 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -2317,9 +2317,6 @@ $callout-padding-x: 1rem !default; // Form layout $form-label-required-gap: 0.25rem !default; -$form-hint-margin-top: 0.25rem !default; -$form-hint-label-offset: -0.25rem !default; -$form-hint-control-margin-top: 0.5rem !default; $form-footer-margin-top: 2rem !default; $form-fieldset-padding: 1rem !default; $form-fieldset-margin-bottom: 1rem !default; diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss index c381b3d96..b0849c2e6 100644 --- a/core/scss/ui/_forms.scss +++ b/core/scss/ui/_forms.scss @@ -31,37 +31,6 @@ Form label color: $form-secondary-color; } -/** -Form hint - */ -.form-hint { - --form-hint-margin-top: #{$form-hint-margin-top}; - --form-hint-label-offset: #{$form-hint-label-offset}; - --form-hint-control-margin-top: #{$form-hint-control-margin-top}; - - display: block; - color: $form-secondary-color; - - &:last-child { - margin-bottom: 0; - } - - + .form-control { - margin-top: var(--form-hint-margin-top); - } - - .form-label + & { - margin-top: var(--form-hint-label-offset); - } - - .input-group + &, - .form-control + &, - .form-select + & { - margin-top: var(--form-hint-control-margin-top); - color: $form-secondary-color; - } -} - /** Form select */ diff --git a/docs/content/ui/forms/helpers.mdx b/docs/content/ui/forms/helpers.mdx index a7ebc913c..690e698cc 100644 --- a/docs/content/ui/forms/helpers.mdx +++ b/docs/content/ui/forms/helpers.mdx @@ -6,7 +6,7 @@ summary: "Form helpers add information around a field: a help popover, a require description: Add help icons, hints, and required field markers to forms to give users extra guidance and reduce input errors. related: [/ui/forms/elements, /ui/components/popover] --- -import FormHint from '@ui/FormHint.astro'; +import FormText from '@ui/FormText.astro'; import Example from '@components/Example.astro'; ## Input help @@ -44,17 +44,17 @@ Use the `.required` class to indicate that a field is required. It will add a re ## Form hint -Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class. Give the hint an `id` and point the field at it with `aria-describedby`, so the hint is read together with the field. +Use helper text to give the user more information about a form element. The text appears below the field. To add it, use the `.form-text` class. The older `.form-hint` class still works as a deprecated alias. Give the hint an `id` and point the field at it with `aria-describedby`, so the hint is read together with the field. ```html -
We'll never share your email with anyone else.
+
We'll never share your email with anyone else.
```
- We'll never share your email with anyone else. + We'll never share your email with anyone else.
diff --git a/docs/content/ui/forms/strength.mdx b/docs/content/ui/forms/strength.mdx index e279063d9..e06884459 100644 --- a/docs/content/ui/forms/strength.mdx +++ b/docs/content/ui/forms/strength.mdx @@ -144,7 +144,7 @@ document.getElementById('meter').addEventListener('change.bs.strength', (event) - The segments are marked `aria-hidden`, so a screen reader reads the level once instead of counting bars. - The label under the meter is announced politely, and only when the level changes, so typing does not flood a screen reader. - Colour alone does not carry the result: the label says the same thing in words, and the number of filled segments repeats it. -- A meter says how strong the password is, not which rules a form enforces. Put the rules in `strength-text`, where they show until the first letter, or in a `form-hint` when they have to stay visible the whole time. +- A meter says how strong the password is, not which rules a form enforces. Put the rules in `strength-text`, where they show until the first letter, or in a `form-text` when they have to stay visible the whole time. ## Translations diff --git a/docs/content/ui/plugins/color-picker.mdx b/docs/content/ui/plugins/color-picker.mdx index 9d75df5aa..16ad6160d 100644 --- a/docs/content/ui/plugins/color-picker.mdx +++ b/docs/content/ui/plugins/color-picker.mdx @@ -169,7 +169,7 @@ Use the picker like any other form field: a label, the input, and a hint below i
- This color is used for buttons and links. +
This color is used for buttons and links.
diff --git a/shared/components/cards/form/Layout.astro b/shared/components/cards/form/Layout.astro index 92a21d88d..5fa2183e3 100644 --- a/shared/components/cards/form/Layout.astro +++ b/shared/components/cards/form/Layout.astro @@ -1,5 +1,5 @@ --- -import FormHint from '@ui/FormHint.astro' +import FormText from '@ui/FormText.astro' import CardTitle from '@ui/CardTitle.astro' interface Props { @@ -23,7 +23,7 @@ const idSuffix = horizontal ? '-horizontal' : ''
- We'll never share your email with anyone else. + We'll never share your email with anyone else.
@@ -31,7 +31,7 @@ const idSuffix = horizontal ? '-horizontal' : ''
- Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. + Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
diff --git a/shared/components/cards/form/Payment.astro b/shared/components/cards/form/Payment.astro index 933fc6fe0..c225e565f 100644 --- a/shared/components/cards/form/Payment.astro +++ b/shared/components/cards/form/Payment.astro @@ -1,5 +1,5 @@ --- -import FormHint from '@ui/FormHint.astro' +import FormText from '@ui/FormText.astro' import CardSubtitle from '@ui/CardSubtitle.astro' import Button from '@ui/Button.astro' import ButtonList from '@ui/ButtonList.astro' @@ -20,7 +20,7 @@ import FormGroup from '@ui/FormGroup.astro'
- Enter your 16-digit number. + Enter your 16-digit number.
diff --git a/shared/components/demo/ThemeSettings.astro b/shared/components/demo/ThemeSettings.astro index e8e313ab0..67c8d8b75 100644 --- a/shared/components/demo/ThemeSettings.astro +++ b/shared/components/demo/ThemeSettings.astro @@ -1,6 +1,6 @@ --- // Offcanvas behavior script lives in BaseLayout (after global scripts). -import FormHint from '@ui/FormHint.astro' +import FormText from '@ui/FormText.astro' import Icon from '@ui/Icon.astro' import Illustration from '@ui/Illustration.astro' import Subheader from '@ui/Subheader.astro' @@ -117,9 +117,9 @@ const tileSvg = (key: string, value: string): string => {
{setting.legend}
- + {setting.hint} - + {setting.control === 'color' ? (
diff --git a/shared/ui/FormGroup.astro b/shared/ui/FormGroup.astro index 64984616e..c17a84b53 100644 --- a/shared/ui/FormGroup.astro +++ b/shared/ui/FormGroup.astro @@ -1,9 +1,9 @@ --- -// Form group: label (.form-label) + control slot + optional hint (.form-hint). +// Form group: label (.form-label) + control slot + optional hint (.form-text). // When `for` is omitted and associate is true (default), the control is nested // inside the label for implicit association. Set associate={false} for groups // with multiple controls. -import FormHint from './FormHint.astro' +import FormText from './FormText.astro' interface Props { label?: string @@ -11,7 +11,7 @@ interface Props { required?: boolean /** .form-label-description at the inline end of the label */ description?: string - /** .form-hint under the control */ + /** .form-text under the control */ hint?: string /** for attribute of the label — must match the slotted control's id */ for?: string @@ -76,5 +76,5 @@ const wrapLabel = Boolean(label && !htmlFor && associate)
) } - {hint && {hint}} + {hint && {hint}}
diff --git a/shared/ui/FormHint.astro b/shared/ui/FormText.astro similarity index 61% rename from shared/ui/FormHint.astro rename to shared/ui/FormText.astro index c8903155e..eb22f75be 100644 --- a/shared/ui/FormHint.astro +++ b/shared/ui/FormText.astro @@ -1,19 +1,19 @@ --- import type { HTMLTag } from 'astro/types' -// Form hint text (.form-hint). +// Helper text under a form control (.form-text). type PolymorphicProps = { as?: HTMLTag } interface Props extends PolymorphicProps { class?: string - /** id so a control can reference the hint via aria-describedby */ + /** id so a control can reference the text via aria-describedby */ id?: string | undefined } const { as: Tag = 'div', class: className, id }: Props = Astro.props --- - +