From 3c0b4fb37f361bdd8d728433f4098ee980ac75a3 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Wed, 6 Nov 2024 14:38:08 +0100 Subject: [PATCH 01/15] remove sizes --- .../components/forms/input/input.docs.mdx | 26 +----- .../forms/input/input.snapshot.stories.ts | 13 +-- .../components/forms/input/input.stories.ts | 65 +------------- .../styles/src/components/floating-label.scss | 85 ------------------- .../src/components/form-validation.scss | 8 -- packages/styles/src/components/forms.scss | 49 ++++------- packages/styles/src/mixins/_utilities.scss | 6 +- 7 files changed, 28 insertions(+), 224 deletions(-) diff --git a/packages/documentation/src/stories/components/forms/input/input.docs.mdx b/packages/documentation/src/stories/components/forms/input/input.docs.mdx index c6f6eff844..1cb13f8bb8 100644 --- a/packages/documentation/src/stories/components/forms/input/input.docs.mdx +++ b/packages/documentation/src/stories/components/forms/input/input.docs.mdx @@ -23,7 +23,10 @@ Custom input elements need only the class `.form-control` to trigger the custom - + ## Concrete Examples of Application @@ -38,27 +41,6 @@ Ensure that `placeholder` attribute is set (even with an empty value) so the lab -### Sizing - -
-

We're deprecating the regular and medium sizes for text input, textarea and select.

-

This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.
- `.form-control-rg` and `.form-control-md` are deprecated and will be removed in the next major version.

-
- -The size can be changed by simply adding one of four classes: - -- Small: `.form-control-sm` -- Regular: `.form-control-rg` -- Medium: default or `.form-control-md` -- Large: `.form-control-lg` - -
- Regular and medium size classes are not available on floating-label elements -
- - - ### Validation Simply add the classes `.is-valid` or `.is-invalid` to the `` element to show it in the expected state.
diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts index c1564b1ff9..9ecedc6a91 100644 --- a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts @@ -32,8 +32,8 @@ function renderInputSnapshot(_args: Args, context: StoryContext) { ${['bg-white', 'bg-dark'].map( bg => html`
-

Sizes

- ${getCombinations('size', context.argTypes.size.options, combinations) +

Standard

+ ${getCombinations('size', [true], combinations) .filter( (args: Args) => !args.value || @@ -44,15 +44,6 @@ function renderInputSnapshot(_args: Args, context: StoryContext) { context.id = `a-${crypto.randomUUID()}`; return html`
- ${args.title !== undefined && args.title - ? html` -

- ${Object.entries(context.argTypes.size.control.labels) - .filter(([key]) => key === args.size) - .map(s => s[1])} -

- ` - : ''}
${meta.render?.({ ...context.args, ...args }, context)}
`; diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts index 612b4a2352..6c138bb98a 100644 --- a/packages/documentation/src/stories/components/forms/input/input.stories.ts +++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts @@ -102,46 +102,6 @@ const meta: MetaComponent = { category: 'General', }, }, - size: { - name: 'Size', - description: "Sets the size of the component's appearance.", - if: { - arg: 'floatingLabel', - truthy: false, - }, - control: { - type: 'select', - labels: { - 'form-control-sm': 'Small', - 'form-control-rg': 'Regular (deprecated)', - 'null': 'Middle (deprecated)', - 'form-control-lg': 'Large', - }, - }, - options: ['form-control-sm', 'form-control-rg', 'null', 'form-control-lg'], - table: { - category: 'General', - }, - }, - sizeFloatingLabel: { - name: 'Size', - description: "Sets the size of the component's appearance.", - if: { - arg: 'floatingLabel', - truthy: true, - }, - control: { - type: 'select', - labels: { - 'form-control-sm': 'Small', - 'form-control-lg': 'Large', - }, - }, - options: ['form-control-sm', 'form-control-lg'], - table: { - category: 'General', - }, - }, hint: { name: 'Helper Text', description: 'Text to place in the help text area of the component.', @@ -188,14 +148,7 @@ type Story = StoryObj; function render(args: Args, context: StoryContext) { const id = context.id ?? `ExampleTextarea_${context.name}`; - const classes = [ - 'form-control', - args.size, - args.floatingLabel ? args.sizeFloatingLabel : '', - args.validation, - ] - .filter(c => c && c !== 'null') - .join(' '); + const classes = ['form-control', args.validation].filter(c => c && c !== 'null').join(' '); const useAriaLabel = !args.floatingLabel && args.hiddenLabel; const label: TemplateResult | null = !useAriaLabel @@ -238,7 +191,7 @@ export const Default: Story = {}; export const FloatingLabel: Story = { parameters: { controls: { - exclude: ['Hidden Label', 'Size', 'Helper Text', 'Disabled', 'Validation'], + exclude: ['Hidden Label', 'Helper Text', 'Disabled', 'Validation'], }, }, args: { @@ -247,22 +200,10 @@ export const FloatingLabel: Story = { }, }; -export const Size: Story = { - parameters: { - controls: { - exclude: ['Label', 'Floating Label', 'Hidden Label', 'Helper Text', 'Disabled', 'Validation'], - }, - }, - args: { - size: 'form-control-sm', - hint: '', - }, -}; - export const Validation: Story = { parameters: { controls: { - exclude: ['Label', 'Floating Label', 'Hidden Label', 'Size', 'Helper Text', 'Disabled'], + exclude: ['Label', 'Floating Label', 'Hidden Label', 'Helper Text', 'Disabled'], }, }, args: { diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index b756a57e85..c9ded6d7b5 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -98,33 +98,6 @@ &[type='time'] { background-position: right b.$input-height-inner-quarter bottom 0.5rem; } - - &.form-control-sm { - font-size: forms.$form-floating-label-font-size-placeholder-sm; - height: forms.$form-floating-label-height-sm; - min-height: forms.$form-floating-label-height-sm; - padding-inline: forms.$form-floating-padding-x-sm; - - &[type='date']::-webkit-calendar-picker-indicator { - margin-top: -(spacing.$size-small-regular); - } - - ~ label { - font-size: forms.$form-floating-label-font-size-placeholder-sm; - padding-top: forms.$form-floating-label-padding-t-sm; - padding-inline: forms.$form-floating-padding-x-sm; - } - - &:focus, - &:not(:placeholder-shown) { - padding-top: forms.$form-floating-padding-y-sm * 2; - - ~ label { - padding-top: forms.$form-floating-padding-y-sm; - font-size: forms.$form-floating-label-font-size-sm; - } - } - } } > .form-select { @@ -263,41 +236,6 @@ } } - &.form-control-sm { - padding-top: forms.$form-floating-textarea-padding-t-sm !important; - padding-right: spacing.$size-large; - font-size: forms.$form-floating-label-font-size-placeholder-sm; - min-height: ( - forms.$form-floating-label-font-size-placeholder-sm * forms.$input-line-height-sm - ) + forms.$form-floating-textarea-padding-t-sm + spacing.$size-mini + - sizing.px-to-rem(forms.$input-border-width * 2); - height: auto; - - ~ label { - font-size: forms.$form-floating-label-font-size-placeholder-sm; - padding-left: spacing.$size-regular; - padding-top: spacing.$size-regular; - padding-right: spacing.$size-large; - } - - &:focus, - &:not(:placeholder-shown) { - padding-bottom: spacing.$size-mini; - - ~ label { - transform: scale(forms.$form-floating-label-scale-sm); - padding-top: spacing.$size-mini; - width: calc( - (100% * #{forms.$form-floating-label-upscale-sm}) - #{forms.$form-floating-label-translate-x-sm * - forms.$form-floating-label-upscale-sm * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale-sm * - 2} - #{forms.$form-floating-padding-x-sm * forms.$form-floating-label-upscale-sm} - ); - max-width: none; - background: forms.$input-bg; - } - } - } - &:is(.is-valid, .is-invalid) { ~ label { width: calc( @@ -317,29 +255,6 @@ ); } } - - &.form-control-sm { - ~ label { - width: calc( - 100% - (#{forms.$input-border-width * 2}) - #{form-validation.$form-feedback-icon-offset} - - #{forms.$form-bg-size-sm} - ); - } - - &:focus, - &:not(:placeholder-shown) { - padding-right: spacing.$size-bigger-big; - - ~ label { - width: calc( - (100% * #{forms.$form-floating-label-upscale-sm}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale-sm * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale-sm * - 2} - #{form-validation.$form-feedback-icon-offset * - forms.$form-floating-label-upscale-sm} - #{forms.$form-bg-size-sm * forms.$form-floating-label-upscale-sm} - ); - } - } - } } } diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss index 0a8fdfdd0e..c2abc00814 100644 --- a/packages/styles/src/components/form-validation.scss +++ b/packages/styles/src/components/form-validation.scss @@ -103,10 +103,6 @@ post-card-control ~ .invalid-feedback { border-color: form-validation.$form-feedback-invalid-color; } } - - &.form-control-sm ~ .invalid-feedback { - padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x; - } } &.is-valid { @@ -117,10 +113,6 @@ post-card-control ~ .invalid-feedback { border-color: var(--post-success); } } - - &.form-control-sm ~ .valid-feedback { - padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x; - } } } diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index c43869c14d..79b5c55140 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -7,6 +7,8 @@ @use './../variables/color'; @use './../functions/sizing'; +@use './../functions/tokens'; +@use './../tokens/components'; @use './../mixins/utilities'; @use './../mixins/forms' as form-mixins; @@ -15,14 +17,12 @@ @use './../themes/bootstrap/forms/form-control' as bffc; @use './../themes/bootstrap/forms/input-group' as bfig; +tokens.$default-map: components.$post-text-input; + .form-control-rg { @include form-mixins.form-rg; } -.form-control-sm { - @include form-mixins.form-sm; -} - .form-control-lg { @include form-mixins.form-lg; } @@ -65,6 +65,17 @@ select.form-control-rg:not([size]):not([multiple]) { .form-control { position: relative; + border-radius: tokens.get('input-border-radius-surface'); + border-color: tokens.get('input-color-enabled-stroke'); + background-color: tokens.get('input-color-enabled-bg'); + color: tokens.get('input-color-enabled-fg'); + padding-inline-start: tokens.get('input-spacing-padding-inline-text-start'); + padding-inline-end: tokens.get('input-spacing-padding-inline-text-end'); + padding-block-start: tokens.get('input-spacing-padding-block-text1'); + padding-block-end: tokens.get('input-spacing-padding-block-text1'); + line-height: 30px; //TODO: This should be a token + font-size: 20px; //TODO Switch to token + height: 64px; //TODO: Should be token &:focus { box-shadow: none; // Override bootstrap @@ -92,7 +103,7 @@ select.form-control-rg:not([size]):not([multiple]) { @include utilities.disabled-style { ~ .form-text { - color: var(--post-gray-60); + color: tokens.get('input-color-disabled-fg'); } } @@ -177,38 +188,10 @@ select.form-control-rg:not([size]):not([multiple]) { } } } - - &.form-control-sm { - &::after { - padding-inline: forms.$input-padding-y-sm; - } - } - - &.form-control-rg { - min-height: calc( - (1rem * forms.$input-line-height-rg) + (forms.$input-padding-y-rg * 2) + - (forms.$input-border-width * 2) - ); - - &::after { - padding-inline: forms.$input-padding-y-rg; - } - } - - &.form-control-lg { - &::after { - padding-inline: forms.$input-padding-y-lg; - } - } } } .form-label { - &:has(+ .form-control-sm, + .form-select-sm) { - font-size: forms.$form-label-font-size-sm; - margin-bottom: spacing.$size-micro; - } - &:has(+ .form-control[disabled], + .form-select[disabled]) { color: var(--post-gray-60); } diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss index 2996399842..104d5963fc 100644 --- a/packages/styles/src/mixins/_utilities.scss +++ b/packages/styles/src/mixins/_utilities.scss @@ -2,6 +2,7 @@ @use '../functions/tokens'; @use '../tokens/helpers'; +@use '../tokens/components'; @use '../variables/spacing'; @use '../variables/commons'; @@ -159,11 +160,10 @@ @mixin disabled-style($additional-selector: '') { &:disabled#{$additional-selector} { pointer-events: none; - color: var(--post-gray-60); - border-color: var(--post-gray-40); + color: tokens.get('input-color-disabled-fg', components.$post-text-input); + border-color: tokens.get('input-color-disabled-stroke', components.$post-text-input); border-style: dashed; background-clip: padding-box; - text-decoration: line-through; // In case rules need to be slightly adjusted @content; From f809d71da9c211bf7edc74ecf185acfcab039f00 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 7 Nov 2024 13:07:57 +0100 Subject: [PATCH 02/15] remove floating label + form control coming from bootstrap --- .../components/forms/input/input.docs.mdx | 2 +- .../forms/input/input.snapshot.stories.ts | 20 ++ .../styles/src/components/floating-label.scss | 211 +++++++++--------- packages/styles/src/components/forms.scss | 149 +++++++------ .../styles/src/themes/bootstrap/_forms.scss | 2 - .../bootstrap/forms/_floating-labels.scss | 2 - .../themes/bootstrap/forms/_form-control.scss | 2 - packages/styles/src/tokens/_components.scss | 49 ++++ 8 files changed, 265 insertions(+), 172 deletions(-) delete mode 100644 packages/styles/src/themes/bootstrap/forms/_floating-labels.scss delete mode 100644 packages/styles/src/themes/bootstrap/forms/_form-control.scss diff --git a/packages/documentation/src/stories/components/forms/input/input.docs.mdx b/packages/documentation/src/stories/components/forms/input/input.docs.mdx index 1cb13f8bb8..53b969055c 100644 --- a/packages/documentation/src/stories/components/forms/input/input.docs.mdx +++ b/packages/documentation/src/stories/components/forms/input/input.docs.mdx @@ -39,7 +39,7 @@ But note that the `` element must come first, so we can ensure the correc Ensure that `placeholder` attribute is set (even with an empty value) so the label can act as a placeholder when no value is set. - + ### Validation diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts index 9ecedc6a91..dcb5646e60 100644 --- a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts @@ -32,6 +32,26 @@ function renderInputSnapshot(_args: Args, context: StoryContext) { ${['bg-white', 'bg-dark'].map( bg => html`
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +

Standard

${getCombinations('size', [true], combinations) .filter( diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index c9ded6d7b5..d88f40aa77 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -3,9 +3,6 @@ @forward './../variables/options'; -@use './../themes/bootstrap/core' as b; -@use './../themes/bootstrap/forms/floating-labels' as bffl; -@use './../themes/bootstrap/forms/form-control' as bffc; @use './../mixins/forms' as forms-mx; @use './../mixins/utilities' as utilities-mx; @@ -16,103 +13,111 @@ @use './../variables/components/forms'; @use './../variables/components/form-validation'; @use './../variables/animation'; -@use './../variables/color' as c; +@use './../functions/tokens'; +@use './../tokens/components'; + +tokens.$default-map: components.$post-text-input; .form-floating { + position: relative; + + > .form-control, + > .form-select { + height: tokens.get('post-input-sizing-height'); + min-height: tokens.get('post-input-sizing-height'); + line-height: tokens.get('post-input-sizing-line-height'); + } + > label { + position: absolute; + z-index: 2; + text-align: start; + pointer-events: none; display: block; - top: forms.$input-border-width; - left: forms.$input-border-width; + top: tokens.get('post-input-sizing-border-width'); + left: tokens.get('post-input-sizing-border-width'); margin: 0; - padding-inline: forms.$form-floating-padding-x; - padding-top: forms.$form-floating-label-padding-t; - padding-bottom: 0; + padding: tokens.get('post-input-spacing-padding-block-label-start') + tokens.get('post-input-spacing-padding-inline-label-end') + tokens.get('post-input-spacing-padding-block-label-end') + tokens.get('post-input-spacing-padding-inline-label-start'); border: 0; - color: forms.$form-floating-label-color; - font-size: forms.$form-floating-label-font-size; + color: tokens.get('post-input-color-enabled-fg'); + font-size: tokens.get('post-input-sizing-label-enabled'); width: auto; height: auto; - max-width: calc(100% - (#{forms.$input-border-width * 2})); + max-width: calc(100% - (#{tokens.get('post-input-sizing-border-width') * 2})); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - transform-origin: forms.$form-floating-padding-x 0; - transition: forms.$form-floating-transition-out; + transform-origin: tokens.get('post-input-spacing-padding-inline-label-start') 0; + transition: forms.$form-floating-transition-in; } > .form-control { - // disable stylelint here, because the classes are coming from bs5 - @extend .form-control-lg; /* stylelint-disable-line */ - - @include forms-mx.placeholder { - opacity: 0; - } - - &:focus { - @include forms-mx.placeholder { - color: rgba(var(--post-contrast-color-rgb), 0.6); - opacity: 1; - transition: opacity animation.$transition-base-timing; - } + &::placeholder { + color: transparent; } &:focus, &:not(:placeholder-shown) { - padding-top: forms.$form-floating-input-padding-t; - padding-bottom: forms.$form-floating-input-padding-b; + padding-top: tokens.get('input-spacing-padding-block-input-start'); + padding-bottom: tokens.get('input-spacing-padding-block-text2'); ~ label { - color: forms.$form-floating-label-color; - padding-top: 0.7rem; + color: tokens.get('input-color-selected-fg'); + padding-top: tokens.get('input-spacing-padding-block-label-focus-start'); max-width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale * + forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * 2} ); - transition: forms.$form-floating-transition-in; } } - &:disabled { - ~ label { - color: var(--post-gray-60); - } + // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped + &:-webkit-autofill { + padding-top: tokens.get('input-spacing-padding-block-input-start'); + padding-bottom: tokens.get('input-spacing-padding-block-text2'); } - &:hover { - ~ label { - color: c.$black; + @include forms-mx.placeholder { + opacity: 0; + } + + &:focus { + @include forms-mx.placeholder { + color: tokens.get('input-color-helptext-fg'); + opacity: 1; } } + &:disabled ~ label { + color: tokens.get('input-color-disabled-fg'); + } + + &:hover ~ label { + color: tokens.get('input-color-enabled-fg'); + } + &[type='file'] { &:focus, &:not(:placeholder-shown) { - padding-top: forms.$form-floating-input-padding-t * 1.33; + padding-top: tokens.get('input-spacing-padding-block-input-start') * 1.33; } } - - &[type='week'], - &[type='month'], - &[type='date'], - &[type='time'] { - background-position: right b.$input-height-inner-quarter bottom 0.5rem; - } } > .form-select { - // disable stylelint here, because the classes are coming from bs5 - @extend .form-control-lg; /* stylelint-disable-line */ - - padding-top: forms.$form-floating-input-padding-t; - padding-bottom: forms.$form-floating-input-padding-b; + padding-top: tokens.get('input-spacing-padding-block-input-start'); + padding-bottom: tokens.get('input-spacing-padding-block-text2'); ~ label { - color: forms.$form-floating-label-color; - padding-top: 0.7rem; + color: tokens.get('input-color-enabled-fg'); + padding-top: tokens.get('input-spacing-padding-block-label-focus-start'); max-width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale * + forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * 2} ); transition: forms.$form-floating-transition-in; @@ -120,46 +125,22 @@ &:disabled { ~ label { - color: var(--post-gray-60); + color: tokens.get('input-color-disabled-fg'); } } - // TODO: replace with :has &:empty, &.form-select-empty { - padding-top: forms.$form-floating-input-padding-t; - padding-bottom: forms.$form-floating-input-padding-b; + padding-top: tokens.get('input-spacing-padding-block-input-start'); + padding-bottom: tokens.get('input-spacing-padding-block-text2'); ~ label { - padding-top: forms.$form-floating-label-padding-t; - max-width: calc(100% - (#{forms.$input-border-width * 2})); + padding-top: tokens.get('input-spacing-padding-block-label-focus-start'); + max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); transform: none; } } - &.form-select-sm { - padding-inline: forms.$form-floating-padding-x-sm; - padding-top: forms.$form-floating-padding-y-sm * 2; - font-size: forms.$form-floating-label-font-size-placeholder-sm; - height: forms.$form-floating-label-height-sm; - min-height: forms.$form-floating-label-height-sm; - - ~ label { - padding-top: forms.$form-floating-padding-y-sm; - font-size: forms.$form-floating-label-font-size-sm; - padding-inline: forms.$form-floating-padding-x-sm; - } - - // TODO: replace with :has - &:empty, - &.form-select-empty { - ~ label { - padding-top: forms.$form-floating-label-padding-t-sm; - font-size: forms.$form-floating-label-font-size-placeholder-sm; - } - } - } - &[multiple] { padding-top: spacing.$size-big; padding-bottom: 0; @@ -170,19 +151,11 @@ padding-bottom: 0; width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale * + forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * 2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale} ); height: auto; - left: forms.$input-border-width * 3; - } - - &.form-select-sm { - padding-top: forms.$form-floating-input-padding-t; - - ~ label { - left: forms.$input-border-width * 2; - } + left: tokens.get('input-sizing-border-width') * 3; } &:not(:disabled) { @@ -196,25 +169,61 @@ padding-top: forms.$form-floating-padding-y; padding-bottom: forms.$form-floating-padding-y; width: calc( - 100% - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x} + 100% - (#{tokens.get('input-sizing-border-width') * 2}) - #{forms.$form-floating-padding-x} ); } } } } + > .form-control:focus, + > .form-control:not(:placeholder-shown), + > .form-select { + ~ label { + color: tokens.get('input-color-selected-fg'); + transform: forms.$form-floating-label-transform; + + &::after { + position: absolute; + inset: forms.$form-floating-padding-y (forms.$form-floating-padding-x * 0.5); + z-index: -1; + height: tokens.get('input-sizing-line-height'); + content: ''; + background-color: tokens.get('input-color-enabled-bg'); + } + } + } + + // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped + > .form-control:-webkit-autofill { + ~ label { + color: tokens.get('input-color-selected-fg'); + transform: forms.$form-floating-label-transform; + } + } + + > :disabled ~ label, + > .form-control:disabled ~ label { + // Required for `.form-control`s because of specificity + color: tokens.get('input-color-disabled-fg'); + + &::after { + background-color: tokens.get('input-color-disabled-bg'); + } + } + > textarea.form-control { padding-top: forms.$form-floating-textarea-padding-t !important; padding-bottom: spacing.$size-mini; padding-right: spacing.$size-large; min-height: (forms.$form-floating-label-font-size * forms.$input-line-height-lg) + forms.$form-floating-textarea-padding-t + spacing.$size-mini + - sizing.px-to-rem(forms.$input-border-width * 2); + sizing.px-to-rem(tokens.get('input-sizing-border-width') * 2); height: auto; ~ label { padding-bottom: 0; - width: calc(100% - (#{forms.$input-border-width * 2})); + width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); max-width: none; height: unset; padding-top: spacing.$size-regular; @@ -228,7 +237,7 @@ padding-top: spacing.$size-mini; width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale * + forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * 2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale} ); max-width: none; @@ -239,7 +248,7 @@ &:is(.is-valid, .is-invalid) { ~ label { width: calc( - 100% - (#{forms.$input-border-width * 2}) - #{form-validation.$form-feedback-icon-offset} - + 100% - (#{tokens.get('input-sizing-border-width') * 2}) - #{form-validation.$form-feedback-icon-offset} - #{forms.$form-bg-size} ); } @@ -249,7 +258,7 @@ ~ label { width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{forms.$input-border-width * forms.$form-floating-label-upscale * + forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * 2} - #{form-validation.$form-feedback-icon-offset * forms.$form-floating-label-upscale} - #{form-validation.$form-feedback-icon-size * forms.$form-floating-label-upscale} ); diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index 79b5c55140..6b88c6cc88 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -1,84 +1,41 @@ @forward './../variables/options'; -@use './../variables/commons'; -@use './../variables/components/forms'; @use './../variables/type'; -@use './../variables/spacing'; -@use './../variables/color'; -@use './../functions/sizing'; @use './../functions/tokens'; @use './../tokens/components'; @use './../mixins/utilities'; -@use './../mixins/forms' as form-mixins; - -@use './../themes/bootstrap/forms/form-text' as bfft; -@use './../themes/bootstrap/forms/form-control' as bffc; -@use './../themes/bootstrap/forms/input-group' as bfig; tokens.$default-map: components.$post-text-input; -.form-control-rg { - @include form-mixins.form-rg; -} - -.form-control-lg { - @include form-mixins.form-lg; -} - -textarea { - &.form-control-lg { - padding-top: spacing.$size-regular; - padding-bottom: spacing.$size-mini; - padding-right: spacing.$size-large; - min-height: (forms.$form-floating-label-font-size * forms.$input-line-height-lg) + - spacing.$size-regular + spacing.$size-mini + sizing.px-to-rem(forms.$input-border-width * 2); - } - - &.form-control-sm { - padding-top: spacing.$size-mini; - padding-right: spacing.$size-large; - padding-bottom: 0; - min-height: (forms.$form-floating-label-font-size-placeholder-sm * forms.$input-line-height-sm) + - (spacing.$size-mini * 2) + sizing.px-to-rem(forms.$input-border-width * 2); - } -} - -select.form-control-rg:not([size]):not([multiple]) { - height: forms.$input-height-rg; -} - -.form-control-wrapper { - @include utilities.focus-style { - border-radius: commons.$border-radius; - } -} - -:not(.form-control-wrapper) > { - .form-control { - @include utilities.focus-style { - border-radius: commons.$border-radius; - } - } -} - .form-control { + display: block; + width: 100%; + font-weight: tokens.get('input-font-weight'); + font-family: type.$font-family-sans-serif; + appearance: none; // Fix appearance for date inputs in Safari + background-clip: padding-box; + border: tokens.get('input-sizing-border-width') tokens.get('input-sizing-border-style') + tokens.get('input-color-enabled-stroke'); position: relative; border-radius: tokens.get('input-border-radius-surface'); - border-color: tokens.get('input-color-enabled-stroke'); background-color: tokens.get('input-color-enabled-bg'); color: tokens.get('input-color-enabled-fg'); padding-inline-start: tokens.get('input-spacing-padding-inline-text-start'); padding-inline-end: tokens.get('input-spacing-padding-inline-text-end'); padding-block-start: tokens.get('input-spacing-padding-block-text1'); padding-block-end: tokens.get('input-spacing-padding-block-text1'); - line-height: 30px; //TODO: This should be a token - font-size: 20px; //TODO Switch to token - height: 64px; //TODO: Should be token + line-height: tokens.get('input-sizing-line-height'); + font-size: tokens.get('input-sizing-font-size'); + height: tokens.get('input-sizing-height'); &:focus { - box-shadow: none; // Override bootstrap + border-color: tokens.get('input-color-hover-stroke'); + background-color: tokens.get('input-color-hover-bg'); + color: tokens.get('input-color-hover-fg'); + + @include utilities.focus-style; @include utilities.high-contrast-mode { border-color: FieldText !important; // On blink browser valid and invalid border colors are converted to Highlight color @@ -94,7 +51,10 @@ select.form-control-rg:not([size]):not([multiple]) { } &:hover { - border-color: color.$black; + border-color: tokens.get('input-color-hover-stroke'); + background-color: tokens.get('input-color-hover-bg'); + color: tokens.get('input-color-hover-fg'); + @include utilities.high-contrast-mode { border-color: Highlight; } @@ -108,11 +68,12 @@ select.form-control-rg:not([size]):not([multiple]) { } &[readonly]:not(:disabled) { - border-color: forms.$input-color; - background-color: forms.$input-bg; + border-color: tokens.get('input-color-enabled-stroke'); + background-color: tokens.get('input-color-enabled-bg'); } &[type='file'] { + overflow: hidden; position: relative; &:disabled { @@ -121,8 +82,20 @@ select.form-control-rg:not([size]):not([multiple]) { border-color: GrayText; } } - + // File input buttons theming &::file-selector-button { + padding: tokens.get('input-spacing-padding-block-text1') + tokens.get('input-spacing-padding-inline-text-start'); + margin: calc(#{tokens.get('input-spacing-padding-block-text1')} * -1) + calc(#{tokens.get('input-spacing-padding-inline-text-start')} * -1); + margin-inline-end: tokens.get('input-spacing-padding-inline-text-start'); + color: tokens.get('input-color-enabled-fg'); + pointer-events: none; + border-color: inherit; + border-style: solid; + border-width: 0; + border-inline-end-width: tokens.get('input-sizing-border-width'); + border-radius: 0; display: block; position: absolute; top: 0; @@ -156,7 +129,7 @@ select.form-control-rg:not([size]):not([multiple]) { bottom: 0; right: 0; z-index: 2; - padding-inline: forms.$input-padding-y; + padding-inline: tokens.get('input-spacing-padding-inline-text-start'); background-color: inherit; border-left: inherit; text-align: center; @@ -188,6 +161,47 @@ select.form-control-rg:not([size]):not([multiple]) { } } } + + &:not(:disabled):not([readonly]) { + cursor: pointer; + } + } + + &::-webkit-date-and-time-value { + min-width: 85px; // Seems to be a good minimum safe width + height: if( + unit(tokens.get('input-sizing-line-height')) == '', + tokens.get('input-sizing-line-height') * 1em, + tokens.get('input-sizing-line-height') + ); + margin: 0; + } + + &::-webkit-datetime-edit { + display: block; + padding: 0; + } + + &::placeholder { + color: tokens.get('input-color-placeholder-fg'); + opacity: 1; + } + + &:disabled { + color: tokens.get('input-color-disabled-fg'); + background-color: tokens.get('input-color-disabled-bg'); + border-color: tokens.get('input-color-disabled-stroke'); + opacity: 1; + } + + &:hover:not(:disabled):not([readonly])::file-selector-button { + background-color: tokens.get('input-color-hover-bg'); + } +} + +textarea { + &.form-control { + min-height: tokens.get('input-sizing-height'); } } @@ -196,3 +210,10 @@ select.form-control-rg:not([size]):not([multiple]) { color: var(--post-gray-60); } } + +.form-floating { + > .form-control { + height: tokens.get('input-sizing-height'); //TODO: Needed? + min-height: tokens.get('input-sizing-height'); //TODO: Needed? + } +} diff --git a/packages/styles/src/themes/bootstrap/_forms.scss b/packages/styles/src/themes/bootstrap/_forms.scss index 0407ffaa56..9d163b8c5e 100644 --- a/packages/styles/src/themes/bootstrap/_forms.scss +++ b/packages/styles/src/themes/bootstrap/_forms.scss @@ -1,6 +1,4 @@ @forward './forms/form-text'; -@forward './forms/form-control'; @forward './forms/form-select'; @forward './forms/form-range'; -@forward './forms/floating-labels'; @forward './forms/input-group'; diff --git a/packages/styles/src/themes/bootstrap/forms/_floating-labels.scss b/packages/styles/src/themes/bootstrap/forms/_floating-labels.scss deleted file mode 100644 index f7c69948dd..0000000000 --- a/packages/styles/src/themes/bootstrap/forms/_floating-labels.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use './../core' as *; -@import 'bootstrap/scss/forms/floating-labels'; diff --git a/packages/styles/src/themes/bootstrap/forms/_form-control.scss b/packages/styles/src/themes/bootstrap/forms/_form-control.scss deleted file mode 100644 index bb8933d8a9..0000000000 --- a/packages/styles/src/themes/bootstrap/forms/_form-control.scss +++ /dev/null @@ -1,2 +0,0 @@ -@use './../core' as *; -@import 'bootstrap/scss/forms/form-control'; diff --git a/packages/styles/src/tokens/_components.scss b/packages/styles/src/tokens/_components.scss index 88ed920268..5a4091b3f0 100644 --- a/packages/styles/src/tokens/_components.scss +++ b/packages/styles/src/tokens/_components.scss @@ -1 +1,50 @@ @forward './temp/components'; + +$post-text-input: ( + post-input-color-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1), + post-input-color-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1), + post-input-color-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg), + post-input-color-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1), + post-input-color-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg), + post-input-color-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1), + post-input-color-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg1), + post-input-color-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg1), + post-input-color-helptext-fg: var(--post-scheme-color-interactive-primary-enabled-fg2), + post-input-color-enabled-stroke: var(--post-scheme-color-interactive-primary-enabled-stroke), + post-input-color-hover-stroke: var(--post-scheme-color-interactive-primary-hover-stroke), + post-input-color-disabled-stroke: var(--post-scheme-color-interactive-primary-disabled-stroke), + post-input-color-selected-stroke: var(--post-scheme-color-interactive-primary-selected-stroke1), + post-input-color-signal-error: var(--post-scheme-color-signal-error-dark), + post-input-color-signal-success: var(--post-scheme-color-signal-success-dark), + post-input-spacing-gap-inline-1: var(--post-device-spacing-gap-1), + post-input-spacing-gap-inline-2: var(--post-device-spacing-gap-inline-4), + post-input-spacing-padding-block-text1: var(--post-device-spacing-padding-block-1), + post-input-spacing-padding-block-text2: var(--post-device-spacing-padding-block-3), + post-input-spacing-padding-block-text-assist: var(--post-device-spacing-padding-block-5), + post-input-spacing-padding-block-text5: var(--post-device-spacing-padding-block-2), + post-input-spacing-padding-inline-text-start: var(--post-device-spacing-padding-inline-1), + post-input-spacing-padding-inline-text-end: var(--post-device-spacing-padding-3), + post-input-spacing-padding-inline-text-assist: var(--post-device-spacing-padding-2), + post-input-sizing-icon: var(--post-device-sizing-notification-1), + post-input-border-radius-surface: var(--post-device-border-radius-1), + post-input-sizing-border-width: 2px, + post-input-sizing-border-style: solid, + post-input-sizing-height: 64px, + post-input-sizing-line-height: 30px, + post-input-sizing-font-size: 20px, + post-input-font-weight: regular, + post-input-color-placeholder-fg: var(--post-scheme-color-interactive-primary-disabled-fg1), + post-input-spacing-padding-block-label-start: 17px, + post-input-spacing-padding-block-label-end: 0px, + post-input-spacing-padding-inline-label-start: 16px, + post-input-spacing-padding-inline-label-end: 12px, + post-input-spacing-padding-block-label-focus-start: 6.5px, + post-input-spacing-padding-block-label-focus-end: 0px, + post-input-spacing-padding-inline-label-focus-start: 16px, + post-input-spacing-padding-inline-label-focus-end: 52px, + post-input-sizing-label-enabled: 20px, + post-input-sizing-label-focused: 14px, + post-input-spacing-padding-block-input-start: 25.5px, +); + +//TODO: Les noms avec les text1, text2, etc. sont pas dingue From 71c8e1c51d84fa2ed3cafebed34ad53d23f5005e Mon Sep 17 00:00:00 2001 From: leagrdv Date: Thu, 7 Nov 2024 15:23:39 +0100 Subject: [PATCH 03/15] update variables for form --- .../forms/input/input.snapshot.stories.ts | 20 ----- .../src/lib/primeng-theme/_variables.scss | 2 +- .../styles/src/components/floating-label.scss | 49 ++++++------ .../styles/src/components/timepicker.scss | 2 +- .../src/variables/components/_forms.scss | 75 ++----------------- 5 files changed, 37 insertions(+), 111 deletions(-) diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts index dcb5646e60..9ecedc6a91 100644 --- a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts @@ -32,26 +32,6 @@ function renderInputSnapshot(_args: Args, context: StoryContext) { ${['bg-white', 'bg-dark'].map( bg => html`
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -

Standard

${getCombinations('size', [true], combinations) .filter( diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss index 13146f2f17..7ca703a9fb 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss +++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss @@ -22,7 +22,7 @@ $shade300: post.$gray-10 !default; //border, divider $shade400: post.$input-border-color !default; //input border $shade500: post.$error !default; //unused $shade600: post.$text-muted !default; //text secondary color -$shade700: post.$input-color !default; //input text color +$shade700: post.$black !default; //input text color $shade800: post.$error !default; //unused $shade900: var(--post-contrast-color) !default; //text color diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index d88f40aa77..fe80b557ef 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -23,9 +23,9 @@ tokens.$default-map: components.$post-text-input; > .form-control, > .form-select { - height: tokens.get('post-input-sizing-height'); - min-height: tokens.get('post-input-sizing-height'); - line-height: tokens.get('post-input-sizing-line-height'); + height: tokens.get('input-sizing-height'); + min-height: tokens.get('input-sizing-height'); + line-height: tokens.get('input-sizing-line-height'); } > label { @@ -34,24 +34,24 @@ tokens.$default-map: components.$post-text-input; text-align: start; pointer-events: none; display: block; - top: tokens.get('post-input-sizing-border-width'); - left: tokens.get('post-input-sizing-border-width'); + top: tokens.get('input-sizing-border-width'); + left: tokens.get('input-sizing-border-width'); margin: 0; - padding: tokens.get('post-input-spacing-padding-block-label-start') - tokens.get('post-input-spacing-padding-inline-label-end') - tokens.get('post-input-spacing-padding-block-label-end') - tokens.get('post-input-spacing-padding-inline-label-start'); + padding: tokens.get('input-spacing-padding-block-label-start') + tokens.get('input-spacing-padding-inline-label-end') + tokens.get('input-spacing-padding-block-label-end') + tokens.get('input-spacing-padding-inline-label-start'); border: 0; - color: tokens.get('post-input-color-enabled-fg'); - font-size: tokens.get('post-input-sizing-label-enabled'); + color: tokens.get('input-color-enabled-fg'); + font-size: tokens.get('input-sizing-label-enabled'); width: auto; height: auto; - max-width: calc(100% - (#{tokens.get('post-input-sizing-border-width') * 2})); + max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - transform-origin: tokens.get('post-input-spacing-padding-inline-label-start') 0; - transition: forms.$form-floating-transition-in; + transform-origin: tokens.get('input-spacing-padding-inline-label-start') 0; + transition: forms.$form-floating-transition; } > .form-control { @@ -120,7 +120,7 @@ tokens.$default-map: components.$post-text-input; forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * 2} ); - transition: forms.$form-floating-transition-in; + transition: forms.$form-floating-transition; } &:disabled { @@ -152,7 +152,8 @@ tokens.$default-map: components.$post-text-input; width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * - 2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale} + 2} - #{tokens.get('input-spacing-padding-inline-label-start') * + forms.$form-floating-label-upscale} ); height: auto; left: tokens.get('input-sizing-border-width') * 3; @@ -160,7 +161,7 @@ tokens.$default-map: components.$post-text-input; &:not(:disabled) { ~ label { - background: forms.$input-bg; + background: tokens.get('input-color-enabled-fg'); } } @@ -169,7 +170,9 @@ tokens.$default-map: components.$post-text-input; padding-top: forms.$form-floating-padding-y; padding-bottom: forms.$form-floating-padding-y; width: calc( - 100% - (#{tokens.get('input-sizing-border-width') * 2}) - #{forms.$form-floating-padding-x} + 100% - (#{tokens.get('input-sizing-border-width') * 2}) - #{tokens.get( + 'input-spacing-padding-inline-label-start' + )} ); } } @@ -185,7 +188,8 @@ tokens.$default-map: components.$post-text-input; &::after { position: absolute; - inset: forms.$form-floating-padding-y (forms.$form-floating-padding-x * 0.5); + inset: forms.$form-floating-padding-y + (tokens.get('input-spacing-padding-inline-label-start') * 0.5); z-index: -1; height: tokens.get('input-sizing-line-height'); content: ''; @@ -238,10 +242,11 @@ tokens.$default-map: components.$post-text-input; width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * - 2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale} + 2} - #{tokens.get('input-spacing-padding-inline-label-start') * + forms.$form-floating-label-upscale} ); max-width: none; - background: forms.$input-bg; + background: tokens.get('input-color-enabled-fg'); } } @@ -249,7 +254,7 @@ tokens.$default-map: components.$post-text-input; ~ label { width: calc( 100% - (#{tokens.get('input-sizing-border-width') * 2}) - #{form-validation.$form-feedback-icon-offset} - - #{forms.$form-bg-size} + #{tokens.get('input-sizing-height')} ); } diff --git a/packages/styles/src/components/timepicker.scss b/packages/styles/src/components/timepicker.scss index 1129284fb4..ed42857a10 100644 --- a/packages/styles/src/components/timepicker.scss +++ b/packages/styles/src/components/timepicker.scss @@ -30,7 +30,7 @@ width: 6rem; padding: 1rem 1.375rem; @include form-mixins.placeholder { - color: forms.$input-placeholder-color; + color: color.$gray-60; } } diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss index 7ff0c0c9a3..130ac64ef2 100644 --- a/packages/styles/src/variables/components/_forms.scss +++ b/packages/styles/src/variables/components/_forms.scss @@ -9,16 +9,17 @@ @use './../animation'; @use './../../functions/utilities'; @use './../../functions/sizing'; +@use './../../functions/tokens'; +@use './../../tokens/components'; + +tokens.$default-map: components.$post-text-input; // Forms +// Used elsewhere than text input $form-bg-size: 32px !default; $form-bg-size-sm: 24px !default; -$form-label-margin-bottom: spacing.$size-mini !default; -$form-label-color: var(--post-contrast-color) !default; -$form-label-font-size-sm: type.$font-size-14; - $input-padding-y: button.$input-btn-padding-y !default; $input-padding-x: button.$input-btn-padding-x !default; $input-line-height: type.$line-height-copy !default; @@ -35,32 +36,20 @@ $input-padding-y-lg: button.$input-btn-padding-y-lg !default; $input-padding-x-lg: button.$input-btn-padding-x-lg !default; $input-line-height-lg: type.$line-height-copy !default; -$input-bg: color.$white !default; $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.4) !default; $input-disabled-color: var(--post-gray-60); // Design System only $input-disabled-border-color: var(--post-gray-40); // Design System only $input-disabled-border-style: spacing.$size-line dashed; -$input-color: color.$black !default; $input-border-color: color.$gray-80 !default; $input-border-width: button.$input-btn-border-width !default; -$input-box-shadow: none !default; $input-border-radius: 0 !default; -$input-border-radius-lg: 0 !default; -$input-border-radius-rg: 0 !default; -$input-border-radius-sm: 0 !default; -$input-focus-bg: inherit !default; -$input-focus-border-color: inherit !default; -$input-focus-color: inherit !default; $input-focus-width: button.$input-btn-focus-width !default; $input-focus-box-shadow: none !default; $input-focus-outline-thickness: spacing.$size-line; -$input-placeholder-color: color.$gray-60 !default; -$input-plaintext-color: var(--post-contrast-color) !default; - $input-height-border: $input-border-width * 2 !default; $input-height-content: type.$font-size-base * $input-line-height !default; @@ -71,12 +60,6 @@ $input-height-content-sm: type.$font-size-14 * 1 !default; $input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) + sizing.px-to-rem(2) !default; // + 2px approximation from Figma mockup $input-height-sm: $input-height-inner-sm + sizing.px-to-rem($input-height-border) !default; -$form-floating-input-height-content-sm: type.$font-size-14 * 1 !default; -$form-floating-input-height-inner-sm: $form-floating-input-height-content-sm + - (spacing.$size-regular * 2) - sizing.px-to-rem(2) !default; // - 2px approximation from Figma mockup -$form-floating-input-height-sm: $form-floating-input-height-inner-sm + - sizing.px-to-rem($input-height-border) !default; - $input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default; $input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default; $input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default; @@ -85,20 +68,6 @@ $input-height-content-lg: (type.$font-size-16 * $input-line-height-lg) - sizing. $input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; $input-height-lg: $input-height-inner-lg + sizing.px-to-rem($input-height-border) !default; -$input-transition: - border-color 0.15s ease-in-out, - box-shadow 0.15s ease-in-out !default; - -$form-text-color: var(--post-contrast-color); -$form-text-font-size: type.$font-size-tiny; -$form-text-margin-top: spacing.$size-micro !default; - -$form-group-margin-bottom: 1rem !default; - -$input-group-addon-color: $input-color !default; -$input-group-addon-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default; -$input-group-addon-border-color: $input-border-color !default; - $form-range-track-height: 0.2rem !default; $form-range-track-bg: color.$gray-20 !default; $form-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba(color.$black, 0.1) !default; @@ -118,17 +87,12 @@ $form-range-thumb-disabled-border-color: $input-disabled-border-color !default; $form-range-height: $form-range-thumb-height + $form-range-thumb-focus-box-shadow-width * 2; $form-range-input-height-ie: 6rem !default; -$form-file-button-hover-bg: $input-bg; - +// TODO: Rework this $form-floating-height: $input-height-lg * $input-line-height-lg; $form-floating-padding-x: $input-padding-x-lg; $form-floating-padding-y: $input-padding-y-lg; $form-floating-line-height: type.$line-height-copy; -$form-floating-input-padding-t: spacing.$size-large; -$form-floating-input-padding-b: 0; -$form-floating-label-opacity: 1; $form-floating-label-height: $form-floating-height; -$form-floating-label-color: color.$gray-80; $form-floating-label-font-size: type.$font-size-16; $form-floating-label-font-size-small: type.$font-size-12; $form-floating-label-scale: math.div( @@ -140,32 +104,9 @@ $form-floating-label-padding-t: $form-floating-label-height * 0.5 - $form-floati type.$line-height-copy * 0.5; $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale); $form-floating-label-transform: scale($form-floating-label-scale); -$form-floating-transition: animation.$transition-base; -$form-floating-transition-in: - $form-floating-transition, +$form-floating-transition: + animation.$transition-base, width 0ms list.nth(animation.$transition-base, 2); -$form-floating-transition-out: - $form-floating-transition, - width 0ms linear; -$form-floating-select-bg-size: 32px 32px; - -$form-floating-label-font-size-sm: type.$font-size-12; -$form-floating-label-font-size-placeholder-sm: type.$font-size-14; -$form-floating-label-scale-sm: math.div( - $form-floating-label-font-size-sm, - $form-floating-label-font-size-placeholder-sm -); -$form-floating-label-upscale-sm: math.div(1, $form-floating-label-scale-sm); -$form-floating-padding-x-sm: spacing.$size-regular; -$form-floating-padding-y-sm: $input-padding-y-sm; -$form-floating-label-translate-x-sm: $form-floating-padding-x-sm * - (1 - $form-floating-label-scale-sm); -$form-floating-label-height-sm: $form-floating-input-height-sm; -$form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 - - $form-floating-label-font-size-sm; $form-floating-textarea-padding-t: spacing.$size-mini + $form-floating-label-font-size * $form-floating-line-height * $form-floating-label-scale; // The Space needed for the label on focus -$form-floating-textarea-padding-t-sm: spacing.$size-mini + - $form-floating-label-font-size-placeholder-sm * $input-line-height-sm * - $form-floating-label-scale-sm; From 1facd47d2082fa1e09a41217155ed8f450ab4ffd Mon Sep 17 00:00:00 2001 From: leagrdv Date: Fri, 8 Nov 2024 14:32:24 +0100 Subject: [PATCH 04/15] handle validation of inputs --- .../src/components/form-validation.scss | 23 ---------------- packages/styles/src/components/forms.scss | 27 +++++++++++++++++-- 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss index c2abc00814..e6e048cccd 100644 --- a/packages/styles/src/components/form-validation.scss +++ b/packages/styles/src/components/form-validation.scss @@ -93,29 +93,6 @@ post-card-control ~ .invalid-feedback { display: inline-flex; } -.form-control, -.form-select { - &.is-invalid { - &:not(:disabled) { - border-color: form-validation.$form-feedback-invalid-color; - - &:focus { - border-color: form-validation.$form-feedback-invalid-color; - } - } - } - - &.is-valid { - &:not(:disabled) { - border-color: var(--post-success); - - &:focus { - border-color: var(--post-success); - } - } - } -} - .form-check-input { @include form-validation-mx.form-validation-state-selector(invalid) { border-color: form-validation.$form-feedback-invalid-color; diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index 6b88c6cc88..637423e4e4 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -5,6 +5,7 @@ @use './../functions/tokens'; @use './../tokens/components'; +@use './../mixins/icons'; @use './../mixins/utilities'; tokens.$default-map: components.$post-text-input; @@ -197,6 +198,28 @@ tokens.$default-map: components.$post-text-input; &:hover:not(:disabled):not([readonly])::file-selector-button { background-color: tokens.get('input-color-hover-bg'); } + + &.is-valid, + &.is-invalid { + &:not(:disabled) { + background-size: tokens.get('input-sizing-icon'); + background-position: center right tokens.get('input-spacing-padding-inline-text-end'); + background-repeat: no-repeat; + padding-inline-end: calc( + (#{tokens.get('input-spacing-padding-inline-text-end')} * 2) + #{tokens.get( + 'input-sizing-icon' + )} + ); + } + } + + &.is-valid:not(:disabled) { + background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + } + + &.is-invalid:not(:disabled) { + background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); + } } textarea { @@ -213,7 +236,7 @@ textarea { .form-floating { > .form-control { - height: tokens.get('input-sizing-height'); //TODO: Needed? - min-height: tokens.get('input-sizing-height'); //TODO: Needed? + height: tokens.get('input-sizing-height'); + min-height: tokens.get('input-sizing-height'); } } From a5072566d13121adb4d1efe89bfd5903c35234e0 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Fri, 8 Nov 2024 15:50:30 +0100 Subject: [PATCH 05/15] token name changes --- .../styles/src/components/floating-label.scss | 19 ++++++++++++------- packages/styles/src/components/forms.scss | 9 ++++----- packages/styles/src/tokens/_components.scss | 11 ++++------- 3 files changed, 20 insertions(+), 19 deletions(-) diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index fe80b557ef..52a0e7b81d 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -66,7 +66,7 @@ tokens.$default-map: components.$post-text-input; ~ label { color: tokens.get('input-color-selected-fg'); - padding-top: tokens.get('input-spacing-padding-block-label-focus-start'); + padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); max-width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * @@ -97,7 +97,7 @@ tokens.$default-map: components.$post-text-input; } &:hover ~ label { - color: tokens.get('input-color-enabled-fg'); + color: tokens.get('input-color-hover-fg'); } &[type='file'] { @@ -114,7 +114,7 @@ tokens.$default-map: components.$post-text-input; ~ label { color: tokens.get('input-color-enabled-fg'); - padding-top: tokens.get('input-spacing-padding-block-label-focus-start'); + padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); max-width: calc( (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * @@ -135,7 +135,7 @@ tokens.$default-map: components.$post-text-input; padding-bottom: tokens.get('input-spacing-padding-block-text2'); ~ label { - padding-top: tokens.get('input-spacing-padding-block-label-focus-start'); + padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); transform: none; } @@ -183,7 +183,6 @@ tokens.$default-map: components.$post-text-input; > .form-control:not(:placeholder-shown), > .form-select { ~ label { - color: tokens.get('input-color-selected-fg'); transform: forms.$form-floating-label-transform; &::after { @@ -193,7 +192,13 @@ tokens.$default-map: components.$post-text-input; z-index: -1; height: tokens.get('input-sizing-line-height'); content: ''; - background-color: tokens.get('input-color-enabled-bg'); + background-color: tokens.get('input-color-selected-bg'); + } + } + + &:not(:hover) { + ~ label { + color: tokens.get('input-color-selected-fg'); } } } @@ -246,7 +251,7 @@ tokens.$default-map: components.$post-text-input; forms.$form-floating-label-upscale} ); max-width: none; - background: tokens.get('input-color-enabled-fg'); + background: tokens.get('input-color-selected-fg'); } } diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index 637423e4e4..e28a4a6bc5 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -32,9 +32,9 @@ tokens.$default-map: components.$post-text-input; height: tokens.get('input-sizing-height'); &:focus { - border-color: tokens.get('input-color-hover-stroke'); - background-color: tokens.get('input-color-hover-bg'); - color: tokens.get('input-color-hover-fg'); + border-color: tokens.get('input-color-selected-stroke'); + background-color: tokens.get('input-color-selected-bg'); + color: tokens.get('input-color-selected-fg'); @include utilities.focus-style; @@ -54,7 +54,6 @@ tokens.$default-map: components.$post-text-input; &:hover { border-color: tokens.get('input-color-hover-stroke'); background-color: tokens.get('input-color-hover-bg'); - color: tokens.get('input-color-hover-fg'); @include utilities.high-contrast-mode { border-color: Highlight; @@ -230,7 +229,7 @@ textarea { .form-label { &:has(+ .form-control[disabled], + .form-select[disabled]) { - color: var(--post-gray-60); + color: tokens.get('input-color-disabled-fg'); } } diff --git a/packages/styles/src/tokens/_components.scss b/packages/styles/src/tokens/_components.scss index 5a4091b3f0..1f82fc588e 100644 --- a/packages/styles/src/tokens/_components.scss +++ b/packages/styles/src/tokens/_components.scss @@ -38,13 +38,10 @@ $post-text-input: ( post-input-spacing-padding-block-label-end: 0px, post-input-spacing-padding-inline-label-start: 16px, post-input-spacing-padding-inline-label-end: 12px, - post-input-spacing-padding-block-label-focus-start: 6.5px, - post-input-spacing-padding-block-label-focus-end: 0px, - post-input-spacing-padding-inline-label-focus-start: 16px, - post-input-spacing-padding-inline-label-focus-end: 52px, + post-input-spacing-padding-block-label-selected-start: 6.5px, + post-input-spacing-padding-inline-label-selected-start: 16px, + post-input-spacing-padding-inline-label-selected-end: 52px, post-input-sizing-label-enabled: 20px, - post-input-sizing-label-focused: 14px, + post-input-sizing-label-selected: 14px, post-input-spacing-padding-block-input-start: 25.5px, ); - -//TODO: Les noms avec les text1, text2, etc. sont pas dingue From 39e034d14ebfe2f551357f1f77e49cc784721c49 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Fri, 8 Nov 2024 15:54:18 +0100 Subject: [PATCH 06/15] lint fix --- packages/styles/src/components/forms.scss | 2 +- packages/styles/src/tokens/_components.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index e28a4a6bc5..e1784f3232 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -170,7 +170,7 @@ tokens.$default-map: components.$post-text-input; &::-webkit-date-and-time-value { min-width: 85px; // Seems to be a good minimum safe width height: if( - unit(tokens.get('input-sizing-line-height')) == '', + math.unit(tokens.get('input-sizing-line-height')) == '', tokens.get('input-sizing-line-height') * 1em, tokens.get('input-sizing-line-height') ); diff --git a/packages/styles/src/tokens/_components.scss b/packages/styles/src/tokens/_components.scss index 1f82fc588e..dc6d2ef05f 100644 --- a/packages/styles/src/tokens/_components.scss +++ b/packages/styles/src/tokens/_components.scss @@ -35,7 +35,7 @@ $post-text-input: ( post-input-font-weight: regular, post-input-color-placeholder-fg: var(--post-scheme-color-interactive-primary-disabled-fg1), post-input-spacing-padding-block-label-start: 17px, - post-input-spacing-padding-block-label-end: 0px, + post-input-spacing-padding-block-label-end: 0, post-input-spacing-padding-inline-label-start: 16px, post-input-spacing-padding-inline-label-end: 12px, post-input-spacing-padding-block-label-selected-start: 6.5px, From d251bc01b4bc7f023a2161af296bd87fc4b075b4 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Fri, 8 Nov 2024 15:56:20 +0100 Subject: [PATCH 07/15] remove unused code --- packages/styles/src/components/forms.scss | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index e1784f3232..b0d1793c4a 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -167,21 +167,6 @@ tokens.$default-map: components.$post-text-input; } } - &::-webkit-date-and-time-value { - min-width: 85px; // Seems to be a good minimum safe width - height: if( - math.unit(tokens.get('input-sizing-line-height')) == '', - tokens.get('input-sizing-line-height') * 1em, - tokens.get('input-sizing-line-height') - ); - margin: 0; - } - - &::-webkit-datetime-edit { - display: block; - padding: 0; - } - &::placeholder { color: tokens.get('input-color-placeholder-fg'); opacity: 1; From 9410e284d4a2dcebf1beb819710f523e6b2355b2 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Fri, 8 Nov 2024 17:20:30 +0100 Subject: [PATCH 08/15] remove transform + unused variables --- .../styles/src/components/floating-label.scss | 71 ++++--------------- .../src/variables/components/_forms.scss | 21 ++---- 2 files changed, 19 insertions(+), 73 deletions(-) diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index 52a0e7b81d..da18a47562 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -51,7 +51,7 @@ tokens.$default-map: components.$post-text-input; overflow: hidden; text-overflow: ellipsis; transform-origin: tokens.get('input-spacing-padding-inline-label-start') 0; - transition: forms.$form-floating-transition; + transition: all 0.25s ease-in-out; } > .form-control { @@ -65,22 +65,12 @@ tokens.$default-map: components.$post-text-input; padding-bottom: tokens.get('input-spacing-padding-block-text2'); ~ label { + font-size: tokens.get('input-sizing-label-enabled'); color: tokens.get('input-color-selected-fg'); padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); - max-width: calc( - (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * - 2} - ); } } - // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped - &:-webkit-autofill { - padding-top: tokens.get('input-spacing-padding-block-input-start'); - padding-bottom: tokens.get('input-spacing-padding-block-text2'); - } - @include forms-mx.placeholder { opacity: 0; } @@ -115,12 +105,8 @@ tokens.$default-map: components.$post-text-input; ~ label { color: tokens.get('input-color-enabled-fg'); padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); - max-width: calc( - (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * - 2} - ); - transition: forms.$form-floating-transition; + max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); + transition: all 0.25s ease-in-out; } &:disabled { @@ -137,7 +123,6 @@ tokens.$default-map: components.$post-text-input; ~ label { padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); - transform: none; } } @@ -147,21 +132,14 @@ tokens.$default-map: components.$post-text-input; height: auto; ~ label { - padding-top: forms.$input-padding-y-lg * forms.$form-floating-label-scale; padding-bottom: 0; - width: calc( - (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * - 2} - #{tokens.get('input-spacing-padding-inline-label-start') * - forms.$form-floating-label-upscale} - ); + max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); height: auto; - left: tokens.get('input-sizing-border-width') * 3; } &:not(:disabled) { ~ label { - background: tokens.get('input-color-enabled-fg'); + background-color: tokens.get('input-color-enabled-bg'); } } @@ -183,17 +161,7 @@ tokens.$default-map: components.$post-text-input; > .form-control:not(:placeholder-shown), > .form-select { ~ label { - transform: forms.$form-floating-label-transform; - - &::after { - position: absolute; - inset: forms.$form-floating-padding-y - (tokens.get('input-spacing-padding-inline-label-start') * 0.5); - z-index: -1; - height: tokens.get('input-sizing-line-height'); - content: ''; - background-color: tokens.get('input-color-selected-bg'); - } + font-size: tokens.get('input-sizing-label-selected'); } &:not(:hover) { @@ -205,9 +173,12 @@ tokens.$default-map: components.$post-text-input; // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped > .form-control:-webkit-autofill { + padding-top: tokens.get('input-spacing-padding-block-input-start'); + padding-bottom: tokens.get('input-spacing-padding-block-text2'); + ~ label { color: tokens.get('input-color-selected-fg'); - transform: forms.$form-floating-label-transform; + font-size: tokens.get('input-sizing-label-selected'); } } @@ -215,10 +186,6 @@ tokens.$default-map: components.$post-text-input; > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity color: tokens.get('input-color-disabled-fg'); - - &::after { - background-color: tokens.get('input-color-disabled-bg'); - } } > textarea.form-control { @@ -244,14 +211,9 @@ tokens.$default-map: components.$post-text-input; ~ label { padding-top: spacing.$size-mini; - width: calc( - (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * - 2} - #{tokens.get('input-spacing-padding-inline-label-start') * - forms.$form-floating-label-upscale} - ); + width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); max-width: none; - background: tokens.get('input-color-selected-fg'); + background-color: tokens.get('input-color-selected-bg'); } } @@ -266,12 +228,7 @@ tokens.$default-map: components.$post-text-input; &:focus, &:not(:placeholder-shown) { ~ label { - width: calc( - (100% * #{forms.$form-floating-label-upscale}) - #{forms.$form-floating-label-translate-x * - forms.$form-floating-label-upscale * 2} - #{tokens.get('input-sizing-border-width') * forms.$form-floating-label-upscale * - 2} - #{form-validation.$form-feedback-icon-offset * forms.$form-floating-label-upscale} - - #{form-validation.$form-feedback-icon-size * forms.$form-floating-label-upscale} - ); + width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); } } } diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss index 130ac64ef2..99470e2846 100644 --- a/packages/styles/src/variables/components/_forms.scss +++ b/packages/styles/src/variables/components/_forms.scss @@ -6,7 +6,6 @@ @use './../color'; @use './../type'; @use './../spacing'; -@use './../animation'; @use './../../functions/utilities'; @use './../../functions/sizing'; @use './../../functions/tokens'; @@ -17,6 +16,7 @@ tokens.$default-map: components.$post-text-input; // Forms // Used elsewhere than text input + $form-bg-size: 32px !default; $form-bg-size-sm: 24px !default; @@ -87,26 +87,15 @@ $form-range-thumb-disabled-border-color: $input-disabled-border-color !default; $form-range-height: $form-range-thumb-height + $form-range-thumb-focus-box-shadow-width * 2; $form-range-input-height-ie: 6rem !default; -// TODO: Rework this -$form-floating-height: $input-height-lg * $input-line-height-lg; -$form-floating-padding-x: $input-padding-x-lg; -$form-floating-padding-y: $input-padding-y-lg; -$form-floating-line-height: type.$line-height-copy; -$form-floating-label-height: $form-floating-height; $form-floating-label-font-size: type.$font-size-16; $form-floating-label-font-size-small: type.$font-size-12; $form-floating-label-scale: math.div( $form-floating-label-font-size-small, $form-floating-label-font-size ); -$form-floating-label-upscale: math.div(1, $form-floating-label-scale); -$form-floating-label-padding-t: $form-floating-label-height * 0.5 - $form-floating-label-font-size * - type.$line-height-copy * 0.5; -$form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale); -$form-floating-label-transform: scale($form-floating-label-scale); -$form-floating-transition: - animation.$transition-base, - width 0ms list.nth(animation.$transition-base, 2); + +$form-floating-height: $input-height-lg * $input-line-height-lg; +$form-floating-padding-y: $input-padding-y-lg; $form-floating-textarea-padding-t: spacing.$size-mini + $form-floating-label-font-size * - $form-floating-line-height * $form-floating-label-scale; // The Space needed for the label on focus + type.$line-height-copy * $form-floating-label-scale; // The Space needed for the label on focus From 1bf1620cd956839fa965910daa0be34103a484f2 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Mon, 11 Nov 2024 10:35:44 +0100 Subject: [PATCH 09/15] fix tests --- .../components/forms/input/input.snapshot.stories.ts | 9 ++++----- .../components/forms/select/select.snapshot.stories.ts | 5 ++++- .../forms/textarea/textarea.snapshot.stories.ts | 5 ++++- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts index 9ecedc6a91..ba15182dcf 100644 --- a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts @@ -22,16 +22,15 @@ function renderInputSnapshot(_args: Args, context: StoryContext) { label: `Label - with Value`, value: 'Lorem Ipsum', }, - { - label: `Label - Floating label`, - floatingLabel: true, - }, ]; return html`
${['bg-white', 'bg-dark'].map( bg => html` -
+

Standard

${getCombinations('size', [true], combinations) .filter( diff --git a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts index 1a895771f1..b5065a76fe 100644 --- a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts @@ -73,7 +73,10 @@ export const Select: Story = {
${['bg-white', 'bg-dark'].map(bg => { return html` -
+

Default

${bombArgsGeneratedDefault.map((args: Args) => { return html` diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts index 5e75638ff2..b71f41a0d6 100644 --- a/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts @@ -39,7 +39,10 @@ export const Textarea: Story = {
${['bg-white', 'bg-dark'].map( bg => html` -
+

Sizes

${getCombinations('size', context.argTypes.size.options, combinations).map( (args: Args) => { From f025bed231f3edeb51624070a7845bda3de2ca6b Mon Sep 17 00:00:00 2001 From: leagrdv Date: Mon, 11 Nov 2024 11:24:14 +0100 Subject: [PATCH 10/15] fix docs --- .../src/stories/components/forms/input/input.stories.ts | 7 +++---- packages/styles/src/variables/components/_forms.scss | 5 ----- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts index 6c138bb98a..0444ce44b8 100644 --- a/packages/documentation/src/stories/components/forms/input/input.stories.ts +++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts @@ -17,17 +17,15 @@ const meta: MetaComponent = { badges: [], design: { type: 'figma', - url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=21923-74274&mode=design&t=3lniLiZhl7q9Gqgn-4', + url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-168&node-type=canvas&t=BXfJ1qmQAdwMxjBE-0', }, }, args: { label: 'Label', - floatingLabel: false, + floatingLabel: true, hiddenLabel: false, placeholder: 'Placeholder', type: 'text', - size: 'form-control-lg', - sizeFloatingLabel: 'form-control-lg', hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.', disabled: false, validation: 'null', @@ -209,5 +207,6 @@ export const Validation: Story = { args: { validation: 'is-invalid', hint: '', + floatingLabel: true, }, }; diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss index 99470e2846..821a1a9231 100644 --- a/packages/styles/src/variables/components/_forms.scss +++ b/packages/styles/src/variables/components/_forms.scss @@ -6,12 +6,7 @@ @use './../color'; @use './../type'; @use './../spacing'; -@use './../../functions/utilities'; @use './../../functions/sizing'; -@use './../../functions/tokens'; -@use './../../tokens/components'; - -tokens.$default-map: components.$post-text-input; // Forms From 48983c4a455572d27012f38c13cc66996b1c398a Mon Sep 17 00:00:00 2001 From: leagrdv Date: Mon, 11 Nov 2024 13:44:56 +0100 Subject: [PATCH 11/15] update with new tokens --- .../forms/input/input.snapshot.stories.ts | 2 +- .../styles/src/components/floating-label.scss | 59 +++++++++---------- packages/styles/src/components/forms.scss | 34 +++++------ packages/styles/src/mixins/_utilities.scss | 2 +- packages/styles/src/tokens/_components.scss | 52 ++++++++-------- 5 files changed, 73 insertions(+), 76 deletions(-) diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts index ba15182dcf..9523aa24bf 100644 --- a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts @@ -32,7 +32,7 @@ function renderInputSnapshot(_args: Args, context: StoryContext) { data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'} >

Standard

- ${getCombinations('size', [true], combinations) + ${getCombinations('floatingLabel', [false], combinations) .filter( (args: Args) => !args.value || diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index da18a47562..377280cbc1 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -34,23 +34,22 @@ tokens.$default-map: components.$post-text-input; text-align: start; pointer-events: none; display: block; - top: tokens.get('input-sizing-border-width'); - left: tokens.get('input-sizing-border-width'); + top: tokens.get('input-border-width'); + left: tokens.get('input-border-width'); margin: 0; - padding: tokens.get('input-spacing-padding-block-label-start') - tokens.get('input-spacing-padding-inline-label-end') - tokens.get('input-spacing-padding-block-label-end') - tokens.get('input-spacing-padding-inline-label-start'); + padding-inline: tokens.get('input-label-empty-padding-inline-start') + tokens.get('input-label-empty-padding-inline-end'); + padding-block-start: tokens.get('input-label-empty-padding-block-start'); border: 0; color: tokens.get('input-color-enabled-fg'); font-size: tokens.get('input-sizing-label-enabled'); width: auto; height: auto; - max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); + max-width: calc(100% - (#{tokens.get('input-border-width')} * 2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - transform-origin: tokens.get('input-spacing-padding-inline-label-start') 0; + transform-origin: tokens.get('input-label-empty-padding-inline-start') 0; transition: all 0.25s ease-in-out; } @@ -61,13 +60,13 @@ tokens.$default-map: components.$post-text-input; &:focus, &:not(:placeholder-shown) { - padding-top: tokens.get('input-spacing-padding-block-input-start'); - padding-bottom: tokens.get('input-spacing-padding-block-text2'); + padding-top: tokens.get('input-filled-padding-block-start'); + padding-bottom: tokens.get('input-padding-block-text2'); ~ label { font-size: tokens.get('input-sizing-label-enabled'); color: tokens.get('input-color-selected-fg'); - padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); + padding-top: tokens.get('input-label-empty-padding-inline-start'); } } @@ -93,19 +92,19 @@ tokens.$default-map: components.$post-text-input; &[type='file'] { &:focus, &:not(:placeholder-shown) { - padding-top: tokens.get('input-spacing-padding-block-input-start') * 1.33; + padding-top: calc(#{tokens.get('input-filled-padding-block-start')} * 1.33); } } } > .form-select { - padding-top: tokens.get('input-spacing-padding-block-input-start'); - padding-bottom: tokens.get('input-spacing-padding-block-text2'); + padding-top: tokens.get('input-filled-padding-block-start'); + padding-bottom: tokens.get('input-padding-block-text2'); ~ label { color: tokens.get('input-color-enabled-fg'); - padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); - max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); + padding-top: tokens.get('input-label-empty-padding-inline-start'); + max-width: calc(100% - (#{tokens.get('input-border-width')} * 2)); transition: all 0.25s ease-in-out; } @@ -117,12 +116,12 @@ tokens.$default-map: components.$post-text-input; &:empty, &.form-select-empty { - padding-top: tokens.get('input-spacing-padding-block-input-start'); - padding-bottom: tokens.get('input-spacing-padding-block-text2'); + padding-top: tokens.get('input-filled-padding-block-start'); + padding-bottom: tokens.get('input-padding-block-text2'); ~ label { - padding-top: tokens.get('input-spacing-padding-block-label-selected-start'); - max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); + padding-top: tokens.get('input-label-empty-padding-inline-start'); + max-width: calc(100% - (#{tokens.get('input-border-width')} * 2)); } } @@ -133,7 +132,7 @@ tokens.$default-map: components.$post-text-input; ~ label { padding-bottom: 0; - max-width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); + max-width: calc(100% - (#{tokens.get('input-border-width')} * 2)); height: auto; } @@ -148,8 +147,8 @@ tokens.$default-map: components.$post-text-input; padding-top: forms.$form-floating-padding-y; padding-bottom: forms.$form-floating-padding-y; width: calc( - 100% - (#{tokens.get('input-sizing-border-width') * 2}) - #{tokens.get( - 'input-spacing-padding-inline-label-start' + 100% - (#{tokens.get('input-border-width')} * 2) - #{tokens.get( + 'input-label-empty-padding-inline-start' )} ); } @@ -173,8 +172,8 @@ tokens.$default-map: components.$post-text-input; // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped > .form-control:-webkit-autofill { - padding-top: tokens.get('input-spacing-padding-block-input-start'); - padding-bottom: tokens.get('input-spacing-padding-block-text2'); + padding-top: tokens.get('input-filled-padding-block-start'); + padding-bottom: tokens.get('input-padding-block-text2'); ~ label { color: tokens.get('input-color-selected-fg'); @@ -194,12 +193,12 @@ tokens.$default-map: components.$post-text-input; padding-right: spacing.$size-large; min-height: (forms.$form-floating-label-font-size * forms.$input-line-height-lg) + forms.$form-floating-textarea-padding-t + spacing.$size-mini + - sizing.px-to-rem(tokens.get('input-sizing-border-width') * 2); + sizing.px-to-rem(forms.$input-border-width * 2); height: auto; ~ label { padding-bottom: 0; - width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); + width: calc(100% - (#{tokens.get('input-border-width')} * 2)); max-width: none; height: unset; padding-top: spacing.$size-regular; @@ -211,7 +210,7 @@ tokens.$default-map: components.$post-text-input; ~ label { padding-top: spacing.$size-mini; - width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); + width: calc(100% - (#{tokens.get('input-border-width')} * 2)); max-width: none; background-color: tokens.get('input-color-selected-bg'); } @@ -220,7 +219,7 @@ tokens.$default-map: components.$post-text-input; &:is(.is-valid, .is-invalid) { ~ label { width: calc( - 100% - (#{tokens.get('input-sizing-border-width') * 2}) - #{form-validation.$form-feedback-icon-offset} - + 100% - (#{tokens.get('input-border-width')} * 2) - #{form-validation.$form-feedback-icon-offset} - #{tokens.get('input-sizing-height')} ); } @@ -228,7 +227,7 @@ tokens.$default-map: components.$post-text-input; &:focus, &:not(:placeholder-shown) { ~ label { - width: calc(100% - (#{tokens.get('input-sizing-border-width') * 2})); + width: calc(100% - (#{tokens.get('input-border-width')} * 2)); } } } diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index b0d1793c4a..f22b7f282b 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -13,20 +13,19 @@ tokens.$default-map: components.$post-text-input; .form-control { display: block; width: 100%; - font-weight: tokens.get('input-font-weight'); font-family: type.$font-family-sans-serif; appearance: none; // Fix appearance for date inputs in Safari background-clip: padding-box; - border: tokens.get('input-sizing-border-width') tokens.get('input-sizing-border-style') + border: tokens.get('input-border-width') tokens.get('input-border-style-default') tokens.get('input-color-enabled-stroke'); position: relative; border-radius: tokens.get('input-border-radius-surface'); background-color: tokens.get('input-color-enabled-bg'); color: tokens.get('input-color-enabled-fg'); - padding-inline-start: tokens.get('input-spacing-padding-inline-text-start'); - padding-inline-end: tokens.get('input-spacing-padding-inline-text-end'); - padding-block-start: tokens.get('input-spacing-padding-block-text1'); - padding-block-end: tokens.get('input-spacing-padding-block-text1'); + padding-inline-start: tokens.get('input-padding-inline-start'); + padding-inline-end: tokens.get('input-padding-inline-end'); + padding-block-start: tokens.get('input-padding-block-text1'); + padding-block-end: tokens.get('input-padding-block-text1'); line-height: tokens.get('input-sizing-line-height'); font-size: tokens.get('input-sizing-font-size'); height: tokens.get('input-sizing-height'); @@ -84,17 +83,16 @@ tokens.$default-map: components.$post-text-input; } // File input buttons theming &::file-selector-button { - padding: tokens.get('input-spacing-padding-block-text1') - tokens.get('input-spacing-padding-inline-text-start'); - margin: calc(#{tokens.get('input-spacing-padding-block-text1')} * -1) - calc(#{tokens.get('input-spacing-padding-inline-text-start')} * -1); - margin-inline-end: tokens.get('input-spacing-padding-inline-text-start'); + padding: tokens.get('input-padding-block-text1') tokens.get('input-padding-inline-start'); + margin: calc(#{tokens.get('input-padding-block-text1')} * -1) + calc(#{tokens.get('input-padding-inline-start')} * -1); + margin-inline-end: tokens.get('input-padding-inline-start'); color: tokens.get('input-color-enabled-fg'); pointer-events: none; border-color: inherit; border-style: solid; border-width: 0; - border-inline-end-width: tokens.get('input-sizing-border-width'); + border-inline-end-width: tokens.get('input-border-width'); border-radius: 0; display: block; position: absolute; @@ -129,7 +127,7 @@ tokens.$default-map: components.$post-text-input; bottom: 0; right: 0; z-index: 2; - padding-inline: tokens.get('input-spacing-padding-inline-text-start'); + padding-inline: tokens.get('input-padding-inline-start'); background-color: inherit; border-left: inherit; text-align: center; @@ -168,7 +166,7 @@ tokens.$default-map: components.$post-text-input; } &::placeholder { - color: tokens.get('input-color-placeholder-fg'); + color: tokens.get('input-color-helptext-fg'); opacity: 1; } @@ -187,12 +185,12 @@ tokens.$default-map: components.$post-text-input; &.is-invalid { &:not(:disabled) { background-size: tokens.get('input-sizing-icon'); - background-position: center right tokens.get('input-spacing-padding-inline-text-end'); + background-position: center right tokens.get('input-padding-inline-end'); background-repeat: no-repeat; padding-inline-end: calc( - (#{tokens.get('input-spacing-padding-inline-text-end')} * 2) + #{tokens.get( - 'input-sizing-icon' - )} + #{tokens.get('input-padding-inline-end')} + #{tokens.get( + 'input-validation-icon-position-inline-end' + )} + #{tokens.get('input-sizing-icon')} ); } } diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss index e53329dc65..361d1fb98d 100644 --- a/packages/styles/src/mixins/_utilities.scss +++ b/packages/styles/src/mixins/_utilities.scss @@ -173,7 +173,7 @@ pointer-events: none; color: tokens.get('input-color-disabled-fg', components.$post-text-input); border-color: tokens.get('input-color-disabled-stroke', components.$post-text-input); - border-style: dashed; + border-style: tokens.get('input-border-style-disabled', components.$post-text-input); background-clip: padding-box; // In case rules need to be slightly adjusted @content; diff --git a/packages/styles/src/tokens/_components.scss b/packages/styles/src/tokens/_components.scss index dc6d2ef05f..d94fa56c3b 100644 --- a/packages/styles/src/tokens/_components.scss +++ b/packages/styles/src/tokens/_components.scss @@ -1,6 +1,12 @@ @forward './temp/components'; $post-text-input: ( + post-input-sizing-height: 64px, + post-input-sizing-line-height: 30px, + post-input-sizing-font-size: 20px, + post-input-sizing-label-enabled: 20px, + post-input-sizing-label-selected: 14px, + post-input-color-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1), post-input-color-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1), post-input-color-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg), @@ -16,32 +22,26 @@ $post-text-input: ( post-input-color-selected-stroke: var(--post-scheme-color-interactive-primary-selected-stroke1), post-input-color-signal-error: var(--post-scheme-color-signal-error-dark), post-input-color-signal-success: var(--post-scheme-color-signal-success-dark), - post-input-spacing-gap-inline-1: var(--post-device-spacing-gap-1), - post-input-spacing-gap-inline-2: var(--post-device-spacing-gap-inline-4), - post-input-spacing-padding-block-text1: var(--post-device-spacing-padding-block-1), - post-input-spacing-padding-block-text2: var(--post-device-spacing-padding-block-3), - post-input-spacing-padding-block-text-assist: var(--post-device-spacing-padding-block-5), - post-input-spacing-padding-block-text5: var(--post-device-spacing-padding-block-2), - post-input-spacing-padding-inline-text-start: var(--post-device-spacing-padding-inline-1), - post-input-spacing-padding-inline-text-end: var(--post-device-spacing-padding-3), - post-input-spacing-padding-inline-text-assist: var(--post-device-spacing-padding-2), + post-input-gap-inline-1: var(--post-device-spacing-gap-1), + post-input-gap-inline-2: var(--post-device-spacing-gap-inline-4), + post-input-padding-block-text1: var(--post-device-spacing-padding-block-1), + post-input-padding-block-text2: var(--post-device-spacing-padding-block-3), + post-input-padding-block-text-assist: var(--post-device-spacing-padding-block-5), + post-input-padding-block-text5: var(--post-device-spacing-padding-block-2), + post-input-padding-inline-start: var(--post-device-spacing-padding-inline-1), + post-input-padding-inline-end: var(--post-device-spacing-padding-3), + post-input-padding-inline-text-assist: var(--post-device-spacing-padding-2), post-input-sizing-icon: var(--post-device-sizing-notification-1), post-input-border-radius-surface: var(--post-device-border-radius-1), - post-input-sizing-border-width: 2px, - post-input-sizing-border-style: solid, - post-input-sizing-height: 64px, - post-input-sizing-line-height: 30px, - post-input-sizing-font-size: 20px, - post-input-font-weight: regular, - post-input-color-placeholder-fg: var(--post-scheme-color-interactive-primary-disabled-fg1), - post-input-spacing-padding-block-label-start: 17px, - post-input-spacing-padding-block-label-end: 0, - post-input-spacing-padding-inline-label-start: 16px, - post-input-spacing-padding-inline-label-end: 12px, - post-input-spacing-padding-block-label-selected-start: 6.5px, - post-input-spacing-padding-inline-label-selected-start: 16px, - post-input-spacing-padding-inline-label-selected-end: 52px, - post-input-sizing-label-enabled: 20px, - post-input-sizing-label-selected: 14px, - post-input-spacing-padding-block-input-start: 25.5px, + post-input-border-width: var(--post-device-border-width-default), + post-input-border-style-default: var(--post-core-border-style-solid), + post-input-border-style-disabled: var(--post-core-border-style-dash), + post-input-empty-padding-block: var(--post-device-spacing-padding-block-1), + post-input-label-empty-padding-block-start: var(--post-device-spacing-padding-block-28), + post-input-label-empty-padding-inline-start: var(--post-device-spacing-padding-5), + post-input-label-empty-padding-inline-end: var(--post-device-spacing-padding-inline-4), + post-input-label-validated-padding-inline-end: var(--post-core-dimension-48), + post-input-filled-padding-block-start: var(--post-device-spacing-padding-block-29), + post-input-filled-padding-block-end: var(--post-device-spacing-padding-block-3), + post-input-validation-icon-position-inline-end: var(--post-device-position-2), ); From 5cb21115a4c112a5b165d3d1c78238e0e47661e5 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Mon, 11 Nov 2024 15:41:18 +0100 Subject: [PATCH 12/15] use tokens generated only --- .../styles/src/components/floating-label.scss | 60 +++++++++---------- packages/styles/src/components/forms.scss | 43 ++++++------- packages/styles/src/mixins/_utilities.scss | 2 +- packages/styles/src/tokens/_components.scss | 46 -------------- 4 files changed, 47 insertions(+), 104 deletions(-) diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index 377280cbc1..14db565f9c 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -25,7 +25,6 @@ tokens.$default-map: components.$post-text-input; > .form-select { height: tokens.get('input-sizing-height'); min-height: tokens.get('input-sizing-height'); - line-height: tokens.get('input-sizing-line-height'); } > label { @@ -37,19 +36,17 @@ tokens.$default-map: components.$post-text-input; top: tokens.get('input-border-width'); left: tokens.get('input-border-width'); margin: 0; - padding-inline: tokens.get('input-label-empty-padding-inline-start') - tokens.get('input-label-empty-padding-inline-end'); + padding-inline-start: tokens.get('input-label-empty-padding-inline-start'); + padding-inline-end: tokens.get('input-label-empty-padding-inline-end'); padding-block-start: tokens.get('input-label-empty-padding-block-start'); border: 0; color: tokens.get('input-color-enabled-fg'); - font-size: tokens.get('input-sizing-label-enabled'); width: auto; height: auto; max-width: calc(100% - (#{tokens.get('input-border-width')} * 2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - transform-origin: tokens.get('input-label-empty-padding-inline-start') 0; transition: all 0.25s ease-in-out; } @@ -60,13 +57,12 @@ tokens.$default-map: components.$post-text-input; &:focus, &:not(:placeholder-shown) { - padding-top: tokens.get('input-filled-padding-block-start'); - padding-bottom: tokens.get('input-padding-block-text2'); + padding-block-start: tokens.get('input-filled-padding-block-start'); + padding-block-end: tokens.get('input-filled-padding-block-end'); ~ label { - font-size: tokens.get('input-sizing-label-enabled'); color: tokens.get('input-color-selected-fg'); - padding-top: tokens.get('input-label-empty-padding-inline-start'); + padding-block-start: tokens.get('input-label-filled-padding-block-start'); } } @@ -92,18 +88,18 @@ tokens.$default-map: components.$post-text-input; &[type='file'] { &:focus, &:not(:placeholder-shown) { - padding-top: calc(#{tokens.get('input-filled-padding-block-start')} * 1.33); + padding-block-start: calc(#{tokens.get('input-filled-padding-block-start')} * 1.33); } } } > .form-select { - padding-top: tokens.get('input-filled-padding-block-start'); - padding-bottom: tokens.get('input-padding-block-text2'); + padding-block-start: tokens.get('input-filled-padding-block-start'); + padding-block-end: tokens.get('input-filled-padding-block-end'); ~ label { color: tokens.get('input-color-enabled-fg'); - padding-top: tokens.get('input-label-empty-padding-inline-start'); + padding-block-start: tokens.get('input-label-filled-padding-block-start'); max-width: calc(100% - (#{tokens.get('input-border-width')} * 2)); transition: all 0.25s ease-in-out; } @@ -116,22 +112,22 @@ tokens.$default-map: components.$post-text-input; &:empty, &.form-select-empty { - padding-top: tokens.get('input-filled-padding-block-start'); - padding-bottom: tokens.get('input-padding-block-text2'); + padding-block-start: tokens.get('input-filled-padding-block-start'); + padding-block-end: tokens.get('input-filled-padding-block-end'); ~ label { - padding-top: tokens.get('input-label-empty-padding-inline-start'); + padding-block-start: tokens.get('input-label-empty-padding-block-start'); max-width: calc(100% - (#{tokens.get('input-border-width')} * 2)); } } &[multiple] { - padding-top: spacing.$size-big; - padding-bottom: 0; + padding-block-start: spacing.$size-big; + padding-block-end: 0; height: auto; ~ label { - padding-bottom: 0; + padding-block-end: 0; max-width: calc(100% - (#{tokens.get('input-border-width')} * 2)); height: auto; } @@ -144,8 +140,8 @@ tokens.$default-map: components.$post-text-input; &:empty { ~ label { - padding-top: forms.$form-floating-padding-y; - padding-bottom: forms.$form-floating-padding-y; + padding-block-start: forms.$form-floating-padding-y; + padding-block-end: forms.$form-floating-padding-y; width: calc( 100% - (#{tokens.get('input-border-width')} * 2) - #{tokens.get( 'input-label-empty-padding-inline-start' @@ -160,7 +156,7 @@ tokens.$default-map: components.$post-text-input; > .form-control:not(:placeholder-shown), > .form-select { ~ label { - font-size: tokens.get('input-sizing-label-selected'); + font-size: tokens.get('input-label-filled-font-size'); } &:not(:hover) { @@ -172,12 +168,12 @@ tokens.$default-map: components.$post-text-input; // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped > .form-control:-webkit-autofill { - padding-top: tokens.get('input-filled-padding-block-start'); - padding-bottom: tokens.get('input-padding-block-text2'); + padding-block-start: tokens.get('input-filled-padding-block-start'); + padding-block-end: tokens.get('input-filled-padding-block-end'); ~ label { color: tokens.get('input-color-selected-fg'); - font-size: tokens.get('input-sizing-label-selected'); + font-size: tokens.get('input-label-filled-font-size'); } } @@ -188,28 +184,28 @@ tokens.$default-map: components.$post-text-input; } > textarea.form-control { - padding-top: forms.$form-floating-textarea-padding-t !important; - padding-bottom: spacing.$size-mini; - padding-right: spacing.$size-large; + padding-block-start: forms.$form-floating-textarea-padding-t !important; + padding-block-end: spacing.$size-mini; + padding-inline-end: spacing.$size-large; min-height: (forms.$form-floating-label-font-size * forms.$input-line-height-lg) + forms.$form-floating-textarea-padding-t + spacing.$size-mini + sizing.px-to-rem(forms.$input-border-width * 2); height: auto; ~ label { - padding-bottom: 0; + padding-block-end: 0; width: calc(100% - (#{tokens.get('input-border-width')} * 2)); max-width: none; height: unset; - padding-top: spacing.$size-regular; + padding-block-start: spacing.$size-regular; } &:focus, &:not(:placeholder-shown) { - padding-bottom: spacing.$size-mini; + padding-block-end: spacing.$size-mini; ~ label { - padding-top: spacing.$size-mini; + padding-block-start: spacing.$size-mini; width: calc(100% - (#{tokens.get('input-border-width')} * 2)); max-width: none; background-color: tokens.get('input-color-selected-bg'); diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index f22b7f282b..f79612cbe8 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -17,21 +17,18 @@ tokens.$default-map: components.$post-text-input; appearance: none; // Fix appearance for date inputs in Safari background-clip: padding-box; border: tokens.get('input-border-width') tokens.get('input-border-style-default') - tokens.get('input-color-enabled-stroke'); + tokens.get('input-color-enabled-border'); position: relative; border-radius: tokens.get('input-border-radius-surface'); background-color: tokens.get('input-color-enabled-bg'); color: tokens.get('input-color-enabled-fg'); padding-inline-start: tokens.get('input-padding-inline-start'); padding-inline-end: tokens.get('input-padding-inline-end'); - padding-block-start: tokens.get('input-padding-block-text1'); - padding-block-end: tokens.get('input-padding-block-text1'); - line-height: tokens.get('input-sizing-line-height'); - font-size: tokens.get('input-sizing-font-size'); + padding-block: tokens.get('input-empty-padding-block'); height: tokens.get('input-sizing-height'); &:focus { - border-color: tokens.get('input-color-selected-stroke'); + border-color: tokens.get('input-color-selected-border'); background-color: tokens.get('input-color-selected-bg'); color: tokens.get('input-color-selected-fg'); @@ -51,7 +48,7 @@ tokens.$default-map: components.$post-text-input; } &:hover { - border-color: tokens.get('input-color-hover-stroke'); + border-color: tokens.get('input-color-hover-border'); background-color: tokens.get('input-color-hover-bg'); @include utilities.high-contrast-mode { @@ -67,7 +64,7 @@ tokens.$default-map: components.$post-text-input; } &[readonly]:not(:disabled) { - border-color: tokens.get('input-color-enabled-stroke'); + border-color: tokens.get('input-color-enabled-border'); background-color: tokens.get('input-color-enabled-bg'); } @@ -83,8 +80,10 @@ tokens.$default-map: components.$post-text-input; } // File input buttons theming &::file-selector-button { - padding: tokens.get('input-padding-block-text1') tokens.get('input-padding-inline-start'); - margin: calc(#{tokens.get('input-padding-block-text1')} * -1) + padding-block: tokens.get('input-empty-padding-block'); + padding-inline-start: tokens.get('input-padding-inline-start'); + padding-inline-end: tokens.get('input-padding-inline-end'); + margin: calc(#{tokens.get('input-empty-padding-block')} * -1) calc(#{tokens.get('input-padding-inline-start')} * -1); margin-inline-end: tokens.get('input-padding-inline-start'); color: tokens.get('input-color-enabled-fg'); @@ -173,7 +172,7 @@ tokens.$default-map: components.$post-text-input; &:disabled { color: tokens.get('input-color-disabled-fg'); background-color: tokens.get('input-color-disabled-bg'); - border-color: tokens.get('input-color-disabled-stroke'); + border-color: tokens.get('input-color-disabled-border'); opacity: 1; } @@ -185,7 +184,7 @@ tokens.$default-map: components.$post-text-input; &.is-invalid { &:not(:disabled) { background-size: tokens.get('input-sizing-icon'); - background-position: center right tokens.get('input-padding-inline-end'); + background-position: center right tokens.get('input-validation-icon-position-inline-end'); background-repeat: no-repeat; padding-inline-end: calc( #{tokens.get('input-padding-inline-end')} + #{tokens.get( @@ -204,21 +203,15 @@ tokens.$default-map: components.$post-text-input; } } -textarea { - &.form-control { - min-height: tokens.get('input-sizing-height'); - } +textarea.form-control { + min-height: tokens.get('input-sizing-height'); } -.form-label { - &:has(+ .form-control[disabled], + .form-select[disabled]) { - color: tokens.get('input-color-disabled-fg'); - } +.form-label:has(+ .form-control[disabled], + .form-select[disabled]) { + color: tokens.get('input-color-disabled-fg'); } -.form-floating { - > .form-control { - height: tokens.get('input-sizing-height'); - min-height: tokens.get('input-sizing-height'); - } +.form-floating > .form-control { + height: tokens.get('input-sizing-height'); + min-height: tokens.get('input-sizing-height'); } diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss index 361d1fb98d..98cee329a3 100644 --- a/packages/styles/src/mixins/_utilities.scss +++ b/packages/styles/src/mixins/_utilities.scss @@ -172,7 +172,7 @@ &:disabled#{$additional-selector} { pointer-events: none; color: tokens.get('input-color-disabled-fg', components.$post-text-input); - border-color: tokens.get('input-color-disabled-stroke', components.$post-text-input); + border-color: tokens.get('input-color-disabled-border', components.$post-text-input); border-style: tokens.get('input-border-style-disabled', components.$post-text-input); background-clip: padding-box; // In case rules need to be slightly adjusted diff --git a/packages/styles/src/tokens/_components.scss b/packages/styles/src/tokens/_components.scss index d94fa56c3b..88ed920268 100644 --- a/packages/styles/src/tokens/_components.scss +++ b/packages/styles/src/tokens/_components.scss @@ -1,47 +1 @@ @forward './temp/components'; - -$post-text-input: ( - post-input-sizing-height: 64px, - post-input-sizing-line-height: 30px, - post-input-sizing-font-size: 20px, - post-input-sizing-label-enabled: 20px, - post-input-sizing-label-selected: 14px, - - post-input-color-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1), - post-input-color-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1), - post-input-color-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg), - post-input-color-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1), - post-input-color-disabled-bg: var(--post-scheme-color-interactive-primary-disabled-bg), - post-input-color-disabled-fg: var(--post-scheme-color-interactive-primary-disabled-fg1), - post-input-color-selected-bg: var(--post-scheme-color-interactive-primary-selected-bg1), - post-input-color-selected-fg: var(--post-scheme-color-interactive-primary-selected-fg1), - post-input-color-helptext-fg: var(--post-scheme-color-interactive-primary-enabled-fg2), - post-input-color-enabled-stroke: var(--post-scheme-color-interactive-primary-enabled-stroke), - post-input-color-hover-stroke: var(--post-scheme-color-interactive-primary-hover-stroke), - post-input-color-disabled-stroke: var(--post-scheme-color-interactive-primary-disabled-stroke), - post-input-color-selected-stroke: var(--post-scheme-color-interactive-primary-selected-stroke1), - post-input-color-signal-error: var(--post-scheme-color-signal-error-dark), - post-input-color-signal-success: var(--post-scheme-color-signal-success-dark), - post-input-gap-inline-1: var(--post-device-spacing-gap-1), - post-input-gap-inline-2: var(--post-device-spacing-gap-inline-4), - post-input-padding-block-text1: var(--post-device-spacing-padding-block-1), - post-input-padding-block-text2: var(--post-device-spacing-padding-block-3), - post-input-padding-block-text-assist: var(--post-device-spacing-padding-block-5), - post-input-padding-block-text5: var(--post-device-spacing-padding-block-2), - post-input-padding-inline-start: var(--post-device-spacing-padding-inline-1), - post-input-padding-inline-end: var(--post-device-spacing-padding-3), - post-input-padding-inline-text-assist: var(--post-device-spacing-padding-2), - post-input-sizing-icon: var(--post-device-sizing-notification-1), - post-input-border-radius-surface: var(--post-device-border-radius-1), - post-input-border-width: var(--post-device-border-width-default), - post-input-border-style-default: var(--post-core-border-style-solid), - post-input-border-style-disabled: var(--post-core-border-style-dash), - post-input-empty-padding-block: var(--post-device-spacing-padding-block-1), - post-input-label-empty-padding-block-start: var(--post-device-spacing-padding-block-28), - post-input-label-empty-padding-inline-start: var(--post-device-spacing-padding-5), - post-input-label-empty-padding-inline-end: var(--post-device-spacing-padding-inline-4), - post-input-label-validated-padding-inline-end: var(--post-core-dimension-48), - post-input-filled-padding-block-start: var(--post-device-spacing-padding-block-29), - post-input-filled-padding-block-end: var(--post-device-spacing-padding-block-3), - post-input-validation-icon-position-inline-end: var(--post-device-position-2), -); From 813b6f498de01f8cd4ee629d1e51525fdca63010 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Mon, 11 Nov 2024 15:55:55 +0100 Subject: [PATCH 13/15] add changesets --- .changeset/metal-pens-explode.md | 6 ++++++ .changeset/soft-moles-whisper.md | 5 +++++ 2 files changed, 11 insertions(+) create mode 100644 .changeset/metal-pens-explode.md create mode 100644 .changeset/soft-moles-whisper.md diff --git a/.changeset/metal-pens-explode.md b/.changeset/metal-pens-explode.md new file mode 100644 index 0000000000..2fe2e9b893 --- /dev/null +++ b/.changeset/metal-pens-explode.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-styles': minor +--- + +Updated `.form-control` text input to v2. diff --git a/.changeset/soft-moles-whisper.md b/.changeset/soft-moles-whisper.md new file mode 100644 index 0000000000..f3125cf3b1 --- /dev/null +++ b/.changeset/soft-moles-whisper.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': major +--- + +Removed sizes option for text inputs. From f065edb238feacaf8583e3c14961797167ce0f07 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 12 Nov 2024 16:24:09 +0100 Subject: [PATCH 14/15] use token for input font --- packages/styles/src/components/forms.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index f79612cbe8..5a8ae55a84 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -1,9 +1,6 @@ -@forward './../variables/options'; - -@use './../variables/type'; - @use './../functions/tokens'; @use './../tokens/components'; +@use './../tokens/elements'; @use './../mixins/icons'; @use './../mixins/utilities'; @@ -13,7 +10,7 @@ tokens.$default-map: components.$post-text-input; .form-control { display: block; width: 100%; - font-family: type.$font-family-sans-serif; + font-family: tokens.get('body-font-family', elements.$post-body); appearance: none; // Fix appearance for date inputs in Safari background-clip: padding-box; border: tokens.get('input-border-width') tokens.get('input-border-style-default') From 877b20a537c4133a79a309b6ffb011201e6bfc99 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 12 Nov 2024 16:33:29 +0100 Subject: [PATCH 15/15] fix unit tests --- packages/styles/src/components/forms.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index 5a8ae55a84..c6ea0e47a4 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -1,3 +1,5 @@ +@forward './../variables/options'; + @use './../functions/tokens'; @use './../tokens/components'; @use './../tokens/elements'; @@ -204,7 +206,7 @@ textarea.form-control { min-height: tokens.get('input-sizing-height'); } -.form-label:has(+ .form-control[disabled], + .form-select[disabled]) { +.form-label:has(+ .form-control[disabled]) { color: tokens.get('input-color-disabled-fg'); }