Skip to content

Commit

Permalink
feat(styles, documentation): styles update text input (#3229)
Browse files Browse the repository at this point in the history
Co-authored-by: Oliver Schürch <[email protected]>
  • Loading branch information
davidritter-dotcom and oliverschuerch authored Jul 23, 2024
1 parent 0822c0e commit 384b11d
Show file tree
Hide file tree
Showing 7 changed files with 28 additions and 154 deletions.
6 changes: 6 additions & 0 deletions .changeset/gold-rabbits-train.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@swisspost/design-system-documentation': patch
'@swisspost/design-system-styles': patch
---

Removed the icon from inside form-controls (`input`, `select`, `textarea`).
Original file line number Diff line number Diff line change
Expand Up @@ -189,19 +189,19 @@ function renderTextarea(args: Args, context: StoryContext) {
: null;
const contextual = [
args.validation === 'is-valid'
? html` <div class="valid-feedback">Ggranda sukceso!</div> `
? html`<div class="valid-feedback">Ggranda sukceso!</div>`
: null,
args.validation === 'is-invalid'
? html` <div class="invalid-feedback">Eraro okazis!</div> `
? html`<div class="invalid-feedback">Eraro okazis!</div>`
: null,
args.hint !== '' ? html` <div class="form-text">${args.hint}</div> ` : null,
args.hint !== '' ? html`<div class="form-text">${args.hint}</div>` : null,
];
const control = html`
<textarea
id=${context.id}
class=${classes}
defaultValue=${args.value ?? nothing}
placeholder=${useAriaLabel ? args.label : ' '}
placeholder=${useAriaLabel ? args.label : ''}
rows=${args.rows}
?disabled=${args.disabled}
aria-label=${useAriaLabel ? args.label : nothing}
Expand Down
16 changes: 15 additions & 1 deletion packages/styles/src/components/floating-label.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
@use './../variables/spacing';
@use './../variables/components/forms';
@use './../variables/components/form-validation';
@use './../variables/animation';
@use './../variables/color' as c;

.form-floating {
> label {
Expand Down Expand Up @@ -43,9 +45,15 @@
// 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;
}
}

Expand All @@ -72,6 +80,12 @@
}
}

&:hover {
~ label {
color: c.$black;
}
}

&[type='file'] {
&:focus,
&:not(:placeholder-shown) {
Expand All @@ -98,7 +112,7 @@
~ label {
font-size: forms.$form-floating-label-font-size-placeholder-sm;
padding-top: forms.$form-floating-label-padding-t-sm;
padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
padding-inline: forms.$form-floating-padding-x-sm;
}

&:focus,
Expand Down
50 changes: 0 additions & 50 deletions packages/styles/src/components/form-select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@

.form-select {
--form-select-indicator: #{form-select.$form-select-indicator};
--form-select-indicator-success: #{b.escape-svg(form-select.$form-select-indicator-success)};
--form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error)};

&:focus {
box-shadow: none; // Override bootstrap
Expand Down Expand Up @@ -63,62 +61,14 @@
background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
var(--form-select-indicator), var(--bs-form-select-bg-icon, none);
}

&.is-valid,
&.is-invalid {
background-position:
right b.$form-select-padding-x * 2.5 center,
b.$form-select-bg-position;

&.form-select-lg {
background-position:
right b.$form-select-padding-x * 3 center,
b.$form-select-bg-position;
}
}

&.is-valid {
background-image: var(--form-select-indicator-success), var(--form-select-indicator),
var(--bs-form-select-bg-icon, none);
}

&.is-invalid {
background-image: var(--form-select-indicator-error), var(--form-select-indicator),
var(--bs-form-select-bg-icon, none);
}
}

&[multiple] {
&.is-valid,
&.is-invalid {
background-position: right b.$form-select-padding-x * 1.5 center;
}

&.is-valid {
background-image: var(--form-select-indicator-success), var(--bs-form-select-bg-icon, none);
}

&.is-invalid {
background-image: var(--form-select-indicator-error), var(--bs-form-select-bg-icon, none);
}
}

@include utilities.high-contrast-mode() {
--form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-dark)};
--form-select-indicator-success: #{b.escape-svg(
form-select.$form-select-indicator-success-hcm-dark
)};
--form-select-indicator-error: #{b.escape-svg(form-select.$form-select-indicator-error-hcm-dark)};
background-image: b.escape-svg(form-select.$form-select-indicator-hcm-dark);

@media (prefers-color-scheme: light) {
--form-select-indicator: #{b.escape-svg(form-select.$form-select-indicator-hcm-light)};
--form-select-indicator-success: #{b.escape-svg(
form-select.$form-select-indicator-success-hcm-light
)};
--form-select-indicator-error: #{b.escape-svg(
form-select.$form-select-indicator-error-hcm-light
)};
background-image: b.escape-svg(form-select.$form-select-indicator-hcm-light);
}

Expand Down
81 changes: 0 additions & 81 deletions packages/styles/src/components/form-validation.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,30 +71,6 @@
}
}

.form-control {
@include b.form-validation-state-selector($state) {
padding-right: b.$input-height-inner;
background-repeat: no-repeat;
background-position: right b.$input-height-inner-quarter center;
background-size: form-validation.$form-feedback-icon-size;

&.form-control-sm {
background-size: forms.$form-bg-size-sm;
}

&.form-control-lg {
background-size: forms.$form-bg-size;
}
}
}

textarea.form-control {
@include b.form-validation-state-selector($state) {
padding-right: b.$input-height-inner;
background-position: top b.$input-height-inner-quarter right b.$input-height-inner-quarter;
}
}

.input-group {
> .form-control:not(:focus),
> .form-select:not(:focus),
Expand Down Expand Up @@ -145,63 +121,6 @@ post-card-control ~ .invalid-feedback {
padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x;
}
}

&.is-invalid,
&.is-valid {
padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
background-repeat: no-repeat;
background-size: forms.$form-bg-size; // Duplicated rule in form-select for arrow size.
background-position: right b.$input-height-inner-quarter center;

&.form-select-sm,
&.form-control-sm {
padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
}

&.form-select-lg,
&.form-control-lg {
padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon
background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size.
}
}
}

textarea.form-control {
&.is-invalid,
&.is-valid {
background-position: right spacing.$size-micro top spacing.$size-mini;

&.form-control-sm {
background-position: right spacing.$size-micro top spacing.$size-mini;
}
}
}

.form-control:not([type='file']) {
&.is-invalid {
background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);

@include utilities-mx.high-contrast-mode() {
background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark);

@media (prefers-color-scheme: light) {
background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light);
}
}
}

&.is-valid {
background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);

@include utilities-mx.high-contrast-mode() {
background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark);

@media (prefers-color-scheme: light) {
background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-light);
}
}
}
}

.form-check-input {
Expand Down
13 changes: 3 additions & 10 deletions packages/styles/src/components/forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@use './../variables/components/forms';
@use './../variables/type';
@use './../variables/spacing';
@use './../variables/color';

@use './../functions/sizing';

Expand Down Expand Up @@ -85,25 +86,17 @@ select.form-control-rg:not([size]):not([multiple]) {
}

&:hover {
border-color: color.$black;
@include utilities.high-contrast-mode {
border-color: Highlight;
}
}
}

&:disabled {
color: forms.$input-disabled-border-color;
border: forms.$input-disabled-border-style;

@include utilities.disabled-style {
~ .form-text {
color: var(--post-gray-60);
}

@include utilities.high-contrast-mode {
border-color: GrayText !important;
background-color: Field !important;
color: GrayText;
}
}

&[readonly]:not(:disabled) {
Expand Down
8 changes: 0 additions & 8 deletions packages/styles/src/variables/components/_form-select.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,3 @@ $form-select-indicator: url('#{icons.get-colored-svg-url('2113', $form-select-in
$form-select-indicator-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-border-color)}') !default;
$form-select-indicator-hcm-dark: url('#{icons.get-colored-svg-url('2113', color.$white)}') !default;
$form-select-indicator-hcm-light: url('#{icons.get-colored-svg-url('2113', color.$black)}') !default;

$form-select-indicator-success: url('#{icons.get-colored-svg-url('2105', color.$success)}') !default;
$form-select-indicator-success-hcm-dark: url('#{icons.get-colored-svg-url('2105', color.$white)}') !default;
$form-select-indicator-success-hcm-light: url('#{icons.get-colored-svg-url('2105', color.$black)}') !default;

$form-select-indicator-error: url('#{icons.get-colored-svg-url('2104', color.$error)}') !default;
$form-select-indicator-error-hcm-dark: url('#{icons.get-colored-svg-url('2104', color.$white)}') !default;
$form-select-indicator-error-hcm-light: url('#{icons.get-colored-svg-url('2104', color.$black)}') !default;

0 comments on commit 384b11d

Please sign in to comment.