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

[Dialog]: Change Storybook example headings to h1 #409

Merged
merged 5 commits into from
Aug 1, 2024
Merged

[Dialog]: Change Storybook example headings to h1 #409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe65312
DS-321: Change Dialog example headings to h1
RiinaKuu Jul 12, 2024
3f94997
DS-321: Update docs examples
RiinaKuu Jul 12, 2024
abe21ac
Merge branch 'main' into DS-321-dialog-fixes
RiinaKuu Jul 12, 2024
3bce3ad
Merge branch 'main' into DS-321-dialog-fixes
MayaMarjut Aug 1, 2024
851ea22
Merge branch 'main' into DS-321-dialog-fixes
MayaMarjut Aug 1, 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
9 changes: 5 additions & 4 deletions ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.docs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ Directives written with `kebab-case` are meant to be used as HTML element.

```
<fudis-dialog>
<fudis-heading [level]="2" fudisDialogTitle>
<fudis-heading fudisDialogTitle [level]="1" [variant]="'xl'">
Heading for a dialog
</fudis-heading>
</fudis-dialog>
Expand Down Expand Up @@ -143,7 +143,7 @@ Directives written with `kebab-case` are meant to be used as HTML element.
<fudis-button (handleClick)="openDialog(dialogFromTemplate)" [label]="'Open dialog'" />
<ng-template #dialogFromTemplate>
<fudis-dialog>
<fudis-heading [level]="2" fudisDialogTitle>This is Dialog Heading</fudis-heading>
<fudis-heading fudisDialogTitle [level]="1" [variant]="'xl'">This is Dialog Heading</fudis-heading>
<fudis-dialog-content>
<fudis-body-text>Some content for Dialog</fudis-body-text>
</fudis-dialog-content>
Expand All @@ -165,7 +165,7 @@ class SimpleDialogComponent {

## Fudis Form inside Dialog

When using Form inside Dialog, wrap the Form inside `fudis-dialog-content` and use it normally. Meaning, add all the necessary Error Summary properties, such as `errorSummaryHelpText`. Also add `title` and `level`, this title will be the title of the dialog and have initial focus when dialog is opened with keyboard.
When using [Form](/docs/components-form-form--documentation) inside Dialog, wrap the Form inside `fudis-dialog-content` and use it normally. Meaning, add all the necessary Error Summary properties, such as `errorSummaryHelpText`. Also add `title`, `level` and possible `titleVariant`, this title will be the title of the dialog and have initial focus when dialog is opened with keyboard.

In `fudisContent` template add form components and in `fudisActions` template add action button(s). Unlike normal form, where buttons are positioned on top of the form, **these action buttons will be positioned at the bottom** after the form content, in order to follow dialog look and feel.

Expand All @@ -181,7 +181,8 @@ In `fudisContent` template add form components and in `fudisActions` template ad
<fudis-dialog-content>
<fudis-form>
[title]="'Dialog with fudis-form'"
[level]="2"
[level]="1"
[titleVariant]="'xl'"
[errorSummaryHelpText]="'You need to fill up the information.'">
<ng-template fudisContent [type]="'form'">
<fudis-fieldset [label]="'Question about your power animal'">
Expand Down
17 changes: 3 additions & 14 deletions ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ class DialogLaucherComponent {
<fudis-dialog-content>
<fudis-form
[title]="'Dialog with fudis-form'"
[level]="2"
[level]="1"
[titleVariant]="'xl'"
[errorSummaryHelpText]="'You need to fill up the information.'"
>
<ng-template fudisContent [type]="'form'">
Expand Down Expand Up @@ -137,7 +138,7 @@ class DialogWithFormComponent {

<ng-template #dialogWithGrid>
<fudis-dialog [size]="size">
<fudis-heading fudisDialogTitle [level]="2"
<fudis-heading fudisDialogTitle [level]="1" [variant]="'xl'"
>Dialog with fudis-grid and scrollable content</fudis-heading
>
<fudis-dialog-content>
Expand Down Expand Up @@ -166,18 +167,6 @@ class DialogWithFormComponent {
hendrerit ante nisl sed quam. Vestibulum euismod leo ac magna pretium.
</fudis-body-text>
</fudis-grid>
<!-- <fudis-description-list
[columns]="{ xs: 1, sm: 2, md: 3 }"
[data]="[
{ key: 'Name', value: 'Mary Rhubarb', subHeading: 'The lady boss' },
{ key: 'Occupation', value: 'Pie maker' },
{ key: 'Special skill', value: 'Spicing it up' },
{
key: 'Awards',
value: 'Pie maker 2023, Mix it up master 2008, Place setting champion 1987'
}
]"
></fudis-description-list> -->
<hr />
<fudis-grid [columns]="{ xs: 1, sm: 2, md: 3 }" [marginTop]="'sm'" [marginBottom]="'sm'">
<div style="border: 2px solid lightblue">
Expand Down
Loading