Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

feat(styles, documentation): styles update text input #3229

Merged
merged 13 commits into from
Jul 23, 2024
Merged

feat(styles, documentation): styles update text input #3229

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
2e8a667
feat(styles, documentation): disabled and animation
davidritter-dotcom Jul 2, 2024
0aa6dd8
feat(styles): input hover style
davidritter-dotcom Jul 3, 2024
8b1729f
feat(styles, documentation): removed valid success message on textare…
davidritter-dotcom Jul 3, 2024
f159c65
fix(styles): fix inline-padding floating label small
davidritter-dotcom Jul 10, 2024
387384e
fix(styles): fix paddings and valid icon inside
davidritter-dotcom Jul 10, 2024
03ee43d
feat(styles): add changeset
davidritter-dotcom Jul 10, 2024
ea0549e
Merge branch 'main' into 2527-styles-update-text-input
davidritter-dotcom Jul 10, 2024
2f0ad11
Merge branch 'main' into 2527-styles-update-text-input
davidritter-dotcom Jul 17, 2024
7fa8d5b
Merge branch 'main' into 2527-styles-update-text-input
oliverschuerch Jul 22, 2024
cefb30f
Update .changeset/gold-rabbits-train.md
oliverschuerch Jul 23, 2024
69519ae
chore(styles, docs): remove success icon on textarea elements and upd…
oliverschuerch Jul 23, 2024
9783fb8
chore(styles): remove select validation icons
oliverschuerch Jul 23, 2024
ce4b306
Merge branch '2527-styles-update-text-input' of https://github.com/sw…
oliverschuerch Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/gold-rabbits-train.md
View file
Open in desktop
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 the input and invalid textarea
oliverschuerch marked this conversation as resolved.
Show resolved Hide resolved
5 changes: 1 addition & 4 deletions packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,6 @@ function renderTextarea(args: Args, context: StoryContext) {
? html` <label for=${context.id} class="form-label">${args.label}</label> `
: null;
const contextual = [
args.validation === 'is-valid'
? html` <div class="valid-feedback">Ggranda sukceso!</div> `
: null,
args.validation === 'is-invalid'
? html` <div class="invalid-feedback">Eraro okazis!</div> `
: null,
Expand All @@ -201,7 +198,7 @@ function renderTextarea(args: Args, context: StoryContext) {
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
View file
Open in desktop
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
71 changes: 8 additions & 63 deletions packages/styles/src/components/form-validation.scss
View file
Open in desktop
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,54 +121,23 @@ 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;
padding-right: b.$input-height-inner;
background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
background-position: right spacing.$size-regular top spacing.$size-mini;
background-repeat: no-repeat;
background-size: form-validation.$form-feedback-icon-size;

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

.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);
}
&.form-control-lg {
background-size: forms.$form-bg-size;
}
}

&.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);
Expand Down
13 changes: 3 additions & 10 deletions packages/styles/src/components/forms.scss
View file
Open in desktop
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