diff --git a/.prettierrc.json b/.prettierrc.json index de753c537d..29ca392ce1 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,3 +1,11 @@ { - "printWidth": 100 + "printWidth": 100, + "overrides": [ + { + "files": "*.mdx", + "options": { + "proseWrap": "always" + } + } + ] } diff --git a/libs/components/src/async-actions/in-forms.stories.mdx b/libs/components/src/async-actions/in-forms.stories.mdx index 07db5f4e2a..e0715fed41 100644 --- a/libs/components/src/async-actions/in-forms.stories.mdx +++ b/libs/components/src/async-actions/in-forms.stories.mdx @@ -4,10 +4,12 @@ import { Meta } from "@storybook/addon-docs"; # Async Actions In Forms -These directives should be used when building forms with buttons that trigger long running tasks in the background, -eg. Submit or Delete buttons. For buttons that are not associated with a form see [Standalone Async Actions](?path=/story/component-library-async-actions-standalone-documentation--page). +These directives should be used when building forms with buttons that trigger long running tasks in +the background, eg. Submit or Delete buttons. For buttons that are not associated with a form see +[Standalone Async Actions](?path=/story/component-library-async-actions-standalone-documentation--page). -There are two separately supported use-cases: Submit buttons and standalone form buttons (eg. Delete buttons). +There are two separately supported use-cases: Submit buttons and standalone form buttons (eg. Delete +buttons). ## Usage: Submit buttons @@ -15,17 +17,19 @@ Adding async actions to submit buttons requires the following 3 steps ### 1. Add a handler to your `Component` -A handler is a function that returns a promise or an observable. Functions that return `void` are also supported which is -useful because `return;` can be used to abort an action. +A handler is a function that returns a promise or an observable. Functions that return `void` are +also supported which is useful because `return;` can be used to abort an action. -**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler needs access to the parent -component using the variable `this`. +**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler +needs access to the parent component using the variable `this`. -**NOTE:** `formGroup.invalid` will always return `true` after the first `await` operation, event if the form is not actually -invalid. This is due to the form getting disabled by the `bitSubmit` directive while waiting for the async action to complete. +**NOTE:** `formGroup.invalid` will always return `true` after the first `await` operation, event if +the form is not actually invalid. This is due to the form getting disabled by the `bitSubmit` +directive while waiting for the async action to complete. -**NOTE:** Handlers do not need to check if any previous requests have finished because the directives have built in protection against -users attempting to trigger new actions before the previous ones have finished. +**NOTE:** Handlers do not need to check if any previous requests have finished because the +directives have built in protection against users attempting to trigger new actions before the +previous ones have finished. ```ts @Component({...}) @@ -51,8 +55,8 @@ class Component { Add the `bitSubmit` directive and supply the handler defined in step 1. -**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`. -This is different from how submit handlers are usually defined with the output syntax `(ngSubmit)="handler()"`. +**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`. This is different +from how submit handlers are usually defined with the output syntax `(ngSubmit)="handler()"`. **NOTE:** `[bitSubmit]` is used instead of `(ngSubmit)`. Using both is not supported. @@ -76,14 +80,15 @@ Adding async actions to standalone form buttons requires the following 3 steps. ### 1. Add a handler to your `Component` -A handler is a function that returns a promise or an observable. Functions that return `void` are also supported which is -useful for aborting an action. +A handler is a function that returns a promise or an observable. Functions that return `void` are +also supported which is useful for aborting an action. -**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler needs access to the parent -component using the variable `this`. +**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler +needs access to the parent component using the variable `this`. -**NOTE:** Handlers do not need to check if any previous requests have finished because the directives have built in protection against -users attempting to trigger new actions before the previous ones have finished. +**NOTE:** Handlers do not need to check if any previous requests have finished because the +directives have built in protection against users attempting to trigger new actions before the +previous ones have finished. ```ts @Component({...}) @@ -113,7 +118,8 @@ The `bitSubmit` directive is required because of its coordinating role inside of ### 3. Add directives to the `button` element -Add `bitButton`, `bitFormButton`, `bitAction` directives to the button. Make sure to supply a handler. +Add `bitButton`, `bitFormButton`, `bitAction` directives to the button. Make sure to supply a +handler. **NOTE:** A summary of what each directive does can be found inside the source code. @@ -124,7 +130,8 @@ Add `bitButton`, `bitFormButton`, `bitAction` directives to the button. Make sur ## `[bitSubmit]` Disabled Form Submit -If you need your form to be able to submit even when the form is disabled, then add `[allowDisabledFormSubmit]="true"` to your `
diff --git a/libs/components/src/async-actions/overview.stories.mdx b/libs/components/src/async-actions/overview.stories.mdx index 9ec792aefd..7cffd379b8 100644 --- a/libs/components/src/async-actions/overview.stories.mdx +++ b/libs/components/src/async-actions/overview.stories.mdx @@ -4,14 +4,14 @@ import { Meta } from "@storybook/addon-docs"; # Async Actions -The directives in this module makes it easier for developers to reflect the progress of async actions in the UI when using -buttons, while also providing robust and standardized error handling. +The directives in this module makes it easier for developers to reflect the progress of async +actions in the UI when using buttons, while also providing robust and standardized error handling. -These buttons can either be standalone (such as Refresh buttons), submit buttons for forms or as standalone buttons -that are part of a form (such as Delete buttons). +These buttons can either be standalone (such as Refresh buttons), submit buttons for forms or as +standalone buttons that are part of a form (such as Delete buttons). -These directives are meant to replace the older `appApiAction` directive, providing the option to use `observables` and reduce -clutter inside our view `components`. +These directives are meant to replace the older `appApiAction` directive, providing the option to +use `observables` and reduce clutter inside our view `components`. ## When to use? diff --git a/libs/components/src/async-actions/standalone.stories.mdx b/libs/components/src/async-actions/standalone.stories.mdx index 9ff5753388..efde494f2d 100644 --- a/libs/components/src/async-actions/standalone.stories.mdx +++ b/libs/components/src/async-actions/standalone.stories.mdx @@ -4,8 +4,9 @@ import { Meta } from "@storybook/addon-docs"; # Standalone Async Actions -These directives should be used when building a standalone button that triggers a long running task in the background, -eg. Refresh buttons. For non-submit buttons that are associated with forms see [Async Actions In Forms](?path=/story/component-library-async-actions-in-forms-documentation--page). +These directives should be used when building a standalone button that triggers a long running task +in the background, eg. Refresh buttons. For non-submit buttons that are associated with forms see +[Async Actions In Forms](?path=/story/component-library-async-actions-in-forms-documentation--page). ## Usage @@ -13,14 +14,15 @@ Adding async actions to standalone buttons requires the following 2 steps ### 1. Add a handler to your `Component` -A handler is a function that returns a promise or an observable. Functions that return `void` are also supported which is -useful because `return;` can be used to abort an action. +A handler is a function that returns a promise or an observable. Functions that return `void` are +also supported which is useful because `return;` can be used to abort an action. -**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler needs access to the parent -component using the variable `this`. +**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler +needs access to the parent component using the variable `this`. -**NOTE:** Handlers do not need to check if any previous requests have finished because the directives have built in protection against -users attempting to trigger new actions before the previous ones have finished. +**NOTE:** Handlers do not need to check if any previous requests have finished because the +directives have built in protection against users attempting to trigger new actions before the +previous ones have finished. #### Example using promises @@ -48,8 +50,8 @@ class Component { Add the `bitAction` directive and supply the handler defined in step 1. -**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`. -This is different from how click handlers are usually defined with the output syntax `(click)="handler()"`. +**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`. This is different +from how click handlers are usually defined with the output syntax `(click)="handler()"`. **NOTE:** `[bitAction]` is used instead of `(click)`. Using both is not supported. diff --git a/libs/components/src/form-field/form-field.stories.ts b/libs/components/src/form-field/form-field.stories.ts index 64080acc66..1b46e6e6c5 100644 --- a/libs/components/src/form-field/form-field.stories.ts +++ b/libs/components/src/form-field/form-field.stories.ts @@ -95,18 +95,12 @@ const Template: Story