Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-21 11:35:34 +01:00
Code Issues Projects Releases Wiki Activity

[CL-342] make overflow text wrap in simple dialog (#10418)

Browse Source 
* add overflow story and fix to simple dialog

* Update libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts

Co-authored-by: Victoria League <vleague@bitwarden.com>

---------

Co-authored-by: Victoria League <vleague@bitwarden.com>
This commit is contained in:
Will Martin 2024-08-07 10:30:13 -04:00 committed by GitHub
parent f997a094f7
commit 181c697ff7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
libs/components/src/dialog/simple-dialog/simple-dialog.component.html
View File

@ -9,11 +9,16 @@
<ng-template #elseBlock>
<i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
</ng-template>
<h1 bitDialogTitleContainer class="tw-mb-0 tw-text-base tw-font-semibold">
<h1
bitDialogTitleContainer
class="tw-mb-0 tw-text-base tw-font-semibold tw-w-full tw-break-words tw-hyphens-auto"
>
<ng-content select="[bitDialogTitle]"></ng-content>
</h1>
</div>
<div class="tw-overflow-y-auto tw-px-4 tw-pb-4 tw-pt-2 tw-text-center tw-text-base">
<div
class="tw-overflow-y-auto tw-px-4 tw-pb-4 tw-pt-2 tw-text-center tw-text-base tw-break-words tw-hyphens-auto"
>
<ng-content select="[bitDialogContent]"></ng-content>
</div>
<div

16
libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
View File

@ -82,3 +82,19 @@ export const ScrollingContent: Story = {
useDefaultIcon: true,
},
};
export const TextOverflow: Story = {
render: (args) => ({
props: args,
template: `
<bit-simple-dialog>
<span bitDialogTitle>Alert Dialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialogdialog</span>
<span bitDialogContent>Message Contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</span>
<ng-container bitDialogFooter>
<button bitButton buttonType="primary">Yes</button>
<button bitButton buttonType="secondary">No</button>
</ng-container>
</bit-simple-dialog>
`,
}),
};