feat(datepicker): flexible width for datepicker (#989)

Trendyol · Jan 14, 2025 · 16d4dad · 16d4dad
1 parent 78faf53
commit 16d4dad
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/src/components/datepicker/bl-datepicker.css b/src/components/datepicker/bl-datepicker.css
@@ -1,22 +1,20 @@
 :host {
-  width: fit-content;
+  width: 314px;
   display: block;
 }
 
 .datepicker-content {
   --bl-input-cursor: pointer;
   --icon-size: var(--line-height);
   --icon-color: var(--bl-color-neutral-light);
-  --datepicker-width: 314px;
 
-  display: flex;
-  flex-direction: column;
-  gap: var(--bl-size-2xs);
-  width: fit-content;
+  width: 100%;
+  position: relative;
+  display: grid;
 }
 
 .datepicker-input {
-  width: var(--bl-datepicker-input-width, var(--datepicker-width));
+  width: var(--bl-datepicker-input-width, auto);
   white-space: nowrap;
   text-overflow: ellipsis;
 }

diff --git a/src/components/datepicker/bl-datepicker.stories.mdx b/src/components/datepicker/bl-datepicker.stories.mdx
@@ -110,7 +110,7 @@ You can set dates which you want to disable from Datepicker.
 <Canvas>
   <Story name="Disabled Dates" args={{
     type: 'multiple',
-    label: 'Multiple Datepicker',
+    label: 'Disabled Dates',
     placeholder: 'Set disabled dates',
     disabledDates: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
   }}>