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

feat: add css class for normal error flow inside sbb-form-field #853

Merged
merged 1 commit into from
Jul 27, 2021
Merged

feat: add css class for normal error flow inside sbb-form-field #853

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 12 additions & 3 deletions src/angular-public/form-field/form-field.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,25 @@ messages can be shown at the same time if desired, but the `<sbb-form-field>` on
space to display one error message at a time. Ensuring that enough space is available to display
multiple errors is up to the user.

#### Display error messages outside sbb-form-field
#### Remove reserved space for error messages

`<sbb-form-field>` reserves space below the input field for a potential error message.
To remove this reserved space, apply the css class `sbb-form-field-errorless` to the `<sbb-form-field>` tag.
To remove this reserved space, apply the css class `sbb-form-field-flexible-errors` to the
`<sbb-form-field>` tag or any ancestor (e.g. `<body class="sbb-form-field-flexible-errors">`).
Place the `<sbb-error>` below the `<sbb-form-field>` and conditionally add the aria-describedby attribute.
Please note that this will lead to the content below the `<sbb-error>` to be pushed downward when
the error is being displayed and upward when it is being hidden.

#### Display error messages outside sbb-form-field

`<sbb-form-field>` constrains error messages to its width. In order to display errors with a wider width
the `<sbb-error>` element can be placed outside the `<sbb-form-field>`. Apply the css class
`sbb-form-field-flexible-errors` to the `<sbb-form-field>` tag or any ancestor to remove the reserved
error space. You will also manually need to assign the aria-describedby, as `<sbb-form-field>` is only
able to detect and automatically assign `<sbb-error>` instances inside of itself.

```html
<sbb-form-field label="Name" class="sbb-form-field-errorless">
<sbb-form-field label="Name" class="sbb-form-field-flexible-errors">
<input
type="text"
sbbInput
Expand Down
7 changes: 6 additions & 1 deletion src/angular-public/form-field/form-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
.sbb-form-field-wrapper {
padding-bottom: if($sbbBusiness, pxToEm(16, 13), pxToEm(21, 14));

.sbb-form-field-errorless & {
.sbb-form-field-errorless &,
.sbb-form-field-flexible-errors & {
padding-bottom: 0;
}
}
Expand Down Expand Up @@ -199,6 +200,10 @@ select.sbb-input-element {
box-sizing: border-box;
width: 100%;
overflow: hidden;

.sbb-form-field-flexible-errors & {
position: relative;
}
}

// Scale down icons in the label and error to be the same size as the text.
Expand Down
15 changes: 12 additions & 3 deletions src/angular/form-field/form-field.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,16 +41,25 @@ messages can be shown at the same time if desired, but the `<sbb-form-field>` on
space to display one error message at a time. Ensuring that enough space is available to display
multiple errors is up to the user.

#### Display error messages outside sbb-form-field
#### Remove reserved space for error messages

`<sbb-form-field>` reserves space below the input field for a potential error message.
To remove this reserved space, apply the css class `sbb-form-field-errorless` to the `<sbb-form-field>` tag.
To remove this reserved space, apply the css class `sbb-form-field-flexible-errors` to the
`<sbb-form-field>` tag or any ancestor (e.g. `<body class="sbb-form-field-flexible-errors">`).
Place the `<sbb-error>` below the `<sbb-form-field>` and conditionally add the aria-describedby attribute.
Please note that this will lead to the content below the `<sbb-error>` to be pushed downward when
the error is being displayed and upward when it is being hidden.

#### Display error messages outside sbb-form-field

`<sbb-form-field>` constrains error messages to its width. In order to display errors with a wider width
the `<sbb-error>` element can be placed outside the `<sbb-form-field>`. Apply the css class
`sbb-form-field-flexible-errors` to the `<sbb-form-field>` tag or any ancestor to remove the reserved
error space. You will also manually need to assign the aria-describedby, as `<sbb-form-field>` is only
able to detect and automatically assign `<sbb-error>` instances inside of itself.

```html
<sbb-form-field label="Name" class="sbb-form-field-errorless">
<sbb-form-field label="Name" class="sbb-form-field-flexible-errors">
<input
type="text"
sbbInput
Expand Down
6 changes: 5 additions & 1 deletion src/angular/form-field/form-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
padding-bottom: pxToRem(16);
}

.sbb-form-field-errorless & {
.sbb-form-field-flexible-errors & {
padding-bottom: 0;
}
}
Expand Down Expand Up @@ -109,6 +109,10 @@
box-sizing: border-box;
width: 100%;
overflow: hidden;

.sbb-form-field-flexible-errors & {
position: relative;
}
}

// Scale down icons in the label and error to be the same size as the text.
Expand Down
2 changes: 2 additions & 0 deletions src/angular/schematics/ng-add/migrations/merge-refactor-migration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { BadgeMigration } from './merge-refactor/badge-migration';
import { ButtonMigration } from './merge-refactor/button-migration';
import { CheckboxPanelMigration } from './merge-refactor/checkbox-panel-migration';
import { ChipsMigration } from './merge-refactor/chips-migration';
import { FormFieldMigration } from './merge-refactor/form-field-migration';
import { LinkMigration } from './merge-refactor/link-migration';
import { PaginationMigration } from './merge-refactor/pagination-migration';
import { ProcessflowMigration } from './merge-refactor/processflow-migration';
Expand All @@ -26,6 +27,7 @@ export class MergeRefactorMigration extends Migration<null, DevkitContext> {
new ButtonMigration(this),
new CheckboxPanelMigration(this),
new ChipsMigration(this),
new FormFieldMigration(this),
new LinkMigration(this),
new PaginationMigration(this),
new ProcessflowMigration(this),
Expand Down
32 changes: 32 additions & 0 deletions src/angular/schematics/ng-add/migrations/merge-refactor/form-field-migration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import type { Element } from 'parse5';

import { MigrationElement } from '../../../utils';

import { RefactorMigration } from './refactor-migration';

/**
* Migration that replaces .sbb-form-field-errorless with .sbb-form-field-flexible-errors.
*/
export class FormFieldMigration extends RefactorMigration {
protected _migrateMessage: string =
'Replacing .sbb-form-field-errorless with .sbb-form-field-flexible-errors';

protected _shouldMigrate(element: Element): boolean {
return (
element.attrs &&
element.attrs.some(
(a) => a.name.toLowerCase() === 'class' && a.value.includes('sbb-form-field-errorless')
)
);
}

protected _migrate(element: MigrationElement) {
const classAttribute = element.findProperty('class');
classAttribute?.replaceValue(
classAttribute.nativeValue.replace(
'sbb-form-field-errorless',
'sbb-form-field-flexible-errors'
)
);
}
}
11 changes: 11 additions & 0 deletions src/angular/schematics/ng-add/test-cases/merge/form-field_expected_output.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,13 @@
import { Component } from '@angular/core';
import { SbbFormFieldModule } from '@sbb-esta/angular/form-field';
import { SbbFormFieldControl } from '@sbb-esta/angular/form-field';

@Component({
selector: 'test',
template: `
<sbb-form-field label="Test" class="sbb-form-field-flexible-errors">
<input sbbInput>
</sbb-form-field>
`,
})
export class TestComponent {}
11 changes: 11 additions & 0 deletions src/angular/schematics/ng-add/test-cases/merge/form-field_input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,13 @@
import { Component } from '@angular/core';
import { SbbFormFieldModule } from '@sbb-esta/angular-public/form-field';
import { SbbFormFieldControl } from '@sbb-esta/angular-core/forms';

@Component({
selector: 'test',
template: `
<sbb-form-field label="Test" class="sbb-form-field-errorless">
<input sbbInput>
</sbb-form-field>
`,
})
export class TestComponent {}