feat(datepicker): fix css custom property

Trendyol · Oct 10, 2024 · f3df7cd · f3df7cd
1 parent f929160
commit f3df7cd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/src/components/datepicker/bl-datepicker.css b/src/components/datepicker/bl-datepicker.css
@@ -3,6 +3,7 @@
  --bl-input-cursor: pointer;
  --icon-size: var(--line-height);
  --icon-color: var(--bl-color-neutral-light);
+ --datepicker-width: 314px;
  display: block;
 }
 
@@ -14,7 +15,7 @@
 }
 
 .datepicker-input {
- width: 314px;
+ width: var(--bl-datepicker-input-width, var(--datepicker-width));
  white-space: nowrap;
  text-overflow: ellipsis;
 }

diff --git a/src/components/datepicker/bl-datepicker.stories.mdx b/src/components/datepicker/bl-datepicker.stories.mdx
@@ -26,7 +26,7 @@ export const DatepickerTemplate = (args) => html`
  start-of-week=${ifDefined(args.startOfWeek)}
  locale=${ifDefined(args.locale)}
  default-value=${ifDefined(args.defaultValue)}
- input-width=${ifDefined(args.inputWidth)}
+ style=${ifDefined(args.style)}
  disabled-dates=${ifDefined(args.disabledDates)}>${unsafeHTML(args.content)}
  </bl-datepicker>`
 
@@ -37,7 +37,7 @@ export const Template = (args) => html`${DatepickerTemplate({ ...args })}`;
 # Datepicker
 
 <bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/894)</bl-badge>
-<bl-badge
+ <bl-badge
  icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=1412-8914&mode=design&t=b0kU7tBfJQFvz2at-0)</bl-badge>
 
 Datepicker renders the calendar component within itself and provides the functionality provided by the calendar component.
@@ -125,7 +125,12 @@ You can set input width of datepicker as you wish.
 
 <Canvas>
  <Story name="İnput Width"
- args={{ type: 'single', label: 'Change input width', placeholder: 'Set input width', inputWidth: 200 }}>
+ args={{
+ type: 'single',
+ label: 'Change input width',
+ placeholder: 'Set input width',
+ style: '--bl-datepicker-input-width: 200px;'
+ }}>
  {Template.bind({})}
  </Story>
 </Canvas>

diff --git a/src/components/datepicker/bl-datepicker.ts b/src/components/datepicker/bl-datepicker.ts
@@ -18,6 +18,8 @@ export const blDatepickerChangedEvent = "bl-datepicker-change";
 /**
  * @tag bl-datepicker
  * @summary Baklava DatePicker component
+ *
+ * @cssproperty [--bl-datepicker-input-width] - Sets the width of datepicker input
  **/
 @customElement(blDatepickerTag)
 export default class BlDatepicker extends DatepickerCalendarMixin {
@@ -51,11 +53,6 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
  */
  @property({ type: String, attribute: "help-text", reflect: true })
  helpText: string;
- /**
- * Defines input width of datepicker
- */
- @property({ type: Number, attribute: "input-width", reflect: true })
- inputWidth: number;
 
  @state()
  _value = "";
@@ -178,8 +175,6 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
  }
 
  async firstUpdated() {
- this._inputEl?.style.setProperty("width", `${this.inputWidth}px`, "important");
-
  this._inputEl?.addEventListener("mousedown", event => {
  event.preventDefault();
  });
@@ -203,7 +198,7 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
 
  render() {
  const renderCalendar = html`
- <bl-popover target="datepicker-content">
+ <bl-popover target="datepicker-content" placement="bottom-start">
  <bl-calendar
  type=${this.type}
  .minDate=${this.minDate}
@@ -227,7 +222,7 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
 
  const additionalDatesView =
  this._floatingDateCount > 0
- ? html` <bl-tooltip placement="bottom-start">
+ ? html` <bl-tooltip>
  <span slot="tooltip-trigger">+${this._floatingDateCount}</span>
  <div>${formattedAdditionalDates}</div>
  </bl-tooltip>`