Merge pull request #902 from Trendyol/dialog-width-caption-line-clamp…

…-737

feat(dialog): add width and caption line clamp css property

src/components/dialog/bl-dialog.css

@@ -8,6 +8,7 @@
   display: flex;
   flex-direction: column;
   background: var(--background-color);
+  width: var(--bl-dialog-width, auto);
   max-width: calc(100vw - var(--bl-size-4xl));
   max-height: calc(100vh - var(--bl-size-4xl));
   min-width: 424px;
@@ -52,7 +53,7 @@
 header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--bl-size-2xs);
   padding: var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl);
 }
@@ -64,9 +65,10 @@ header bl-button {
 header h2 {
   font: var(--bl-font-title-1-medium);
   color: var(--bl-color-neutral-darker);
-  white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--bl-dialog-caption-line-clamp, 1);
   margin: 0;
   padding: 0;
 }

src/components/dialog/bl-dialog.mdx

@@ -54,8 +54,16 @@ Critical dialogs are used to inform users about critical information or actions.
 The dialog doesn't have any default size, it will be fluidly sized regarding its content. You can give your own width and height style to your content.
 But dialog keeps itself inside the viewport. So dialog can not be bigger than the viewport.
 
+You can use the `--bl-dialog-width` css property to adjust the width of the dialog.
+
 <Canvas of={DialogStories.DialogSizing} />
 
+### Set the line clamp of the caption
+
+If your title has a width larger than the dialog width, you can specify how much of it you want to show by adjusting the `--bl-dialog-caption-line-clamp` property.
+
+<Canvas of={DialogStories.CaptionLineClampDialog} />
+
 ## Autofocusing elements in Dialog
 
 By default, when you open a dialog, "close" button get focus automatically. But you can also auto focus on a dialog action this by using

src/components/dialog/bl-dialog.stories.ts

@@ -160,8 +160,11 @@ ${BasicTemplate({...args, className: "limited-width", content: `<div class="cont
 
 const SizingTemplate = (args: DialogArgs) => html`
 <style>
+  #dl-sizing {
+    --bl-dialog-width: 31rem;
+  }
+
   .my-dialog-content {
-    width: 400px;
     height:200px;
     margin:0;
     padding:0;
@@ -202,6 +205,17 @@ when an unknown printer took a galley of type and scrambled it to make a type sp
 ` })}
 `;
 
+const CaptionLineClampTemplate = (args: DialogArgs) => html`
+<style>
+  #dl-caption-line-clamp {
+    --bl-dialog-width: 31rem;
+    --bl-dialog-caption-line-clamp: 2;
+  }
+</style>
+
+${BasicTemplate({...args, caption: "I am a very long text I am a very long text I am a very long text", content: "You can adjust the line clamp" })}
+`;
+
 export const BasicUsage: Story = {
   args: {
     id: "dl-basic",
@@ -231,7 +245,8 @@ export const DialogSizing: Story = {
     id: "dl-sizing",
     primaryAction: "Agree",
     secondaryAction: "Disagree",
-    tertiaryAction: "Cancel"
+    tertiaryAction: "Cancel",
+    caption: "I am a long text but I will not block the width."
   },
   render: SizingTemplate,
   play: dialogOpener("dl-sizing")
@@ -311,3 +326,12 @@ export const CriticalDialog: Story = {
   render: FullWidthActionsTemplate,
   play: dialogOpener("dl-critical")
 };
+
+export const CaptionLineClampDialog: Story = {
+  args: {
+    id: "dl-caption-line-clamp",
+    closeAction: "Confirm"
+  },
+  render: CaptionLineClampTemplate,
+  play: dialogOpener("dl-caption-line-clamp")
+};

src/components/dialog/bl-dialog.test.ts

@@ -101,7 +101,7 @@ describe("bl-dialog", () => {
               <bl-button
                 icon="close"
                 kind="neutral"
-                size="medium"
+                size="small"
                 variant="tertiary"
               >
               </bl-button>

src/components/dialog/bl-dialog.ts

@@ -13,6 +13,9 @@ type DialogElement = {
 /**
  * @tag bl-dialog
  * @summary Baklava Dialog component
+ *
+ * @cssproperty [--bl-dialog-width=auto] Sets the width of the dialog content
+ * @cssproperty [--bl-dialog-caption-line-clamp=1] Sets the line clamp of the caption
  */
 @customElement("bl-dialog")
 export default class BlDialog extends LitElement {
@@ -182,6 +185,7 @@ export default class BlDialog extends LitElement {
           icon="close"
           variant="tertiary"
           kind="neutral"
+          size="small"
         ></bl-button>`
       : null;