Skip to content

feat: #1125 tree select component#1158

Open
gokhanakn wants to merge 8 commits into
nextfrom
#1125-tree-select-component
Open

feat: #1125 tree select component#1158
gokhanakn wants to merge 8 commits into
nextfrom
#1125-tree-select-component

Conversation

@gokhanakn
Copy link
Copy Markdown

No description provided.

Comment thread .storybook/preview-body.html Outdated
Comment thread src/components/popover/bl-popover.ts Outdated
Comment thread src/components/tree-select/bl-tree-select.css Outdated
Comment thread src/components/tree-select/bl-tree-select.ts
Comment thread src/components/tree-select/bl-tree-select.ts Outdated
Comment thread src/components/tree-select/bl-tree-select.css Outdated
Comment thread src/baklava.ts Outdated
Comment thread src/components/tree-select/bl-tree-select.ts Outdated
Comment thread src/components/tree-select/bl-tree-select.ts Outdated
kind="neutral"
size="small"
icon="close"
label="Temizle"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bunu da lit localize dahil edebilir miyiz

Comment on lines +478 to +515
const injectedStyle = document.createElement("style");

injectedStyle.textContent = [
".popover-no-result { display: none !important; }",
".popover { max-height: 400px !important; padding: 0 !important; }",
":host([has-tree-value]) .select-wrapper { --placeholder-color: var(--bl-color-neutral-darker); }",
].join("\n");
this._selectEl.shadowRoot?.appendChild(injectedStyle);

const origOpen = this._selectEl.open.bind(this._selectEl);
const origClose = this._selectEl.close.bind(this._selectEl);

this._selectEl.open = () => {
if (this.disabled) return;
origOpen();
this._open = true;
};

this._selectEl.close = () => {
origClose();
this._open = false;
this._searchText = "";
this._focusedIndex = 0;
};

this._selectEl.addEventListener(
"keydown",
(e: KeyboardEvent) => {
if (!this._open) return;
if (["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight", " ", "Enter"].includes(e.key)) {
e.preventDefault();
e.stopPropagation();
this._onPanelKeydown(e);
}
},
true
);
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bl-select elementini hacky kullanmışız.

  • bl-select t anında güncellendiğinde bu kod kırılabilir.
  • monkey patching yapıyoruz belki event dinleyebilirdik debug edilmesi zor hale getirebilir.
  • style inject etmemizde encapsulation'ı bozmuş

Buradaki ilk yaptığımız yaklaşım buraya göre daha temizdi aslında kendi popover'ı ve input'u olabilir.

Comment thread src/components/tree-select/doc/ADR.md Outdated
| `view-select-all` | `boolean` | Show "Select All" row (only when `is-multiple`) | `false` |
| `select-all-text` | `string` | Text for Select All row | `"Select All"` |
| `search-placeholder` | `string` | Placeholder for search inside dropdown | `""` |
| `empty-result-text` | `string` | Message when search has no results | `"Sonuç Bulunamadı."` |
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bu default value elementte uygulanmamış lit-localize kapsamında ekleyebilriiz

@buseselvi
Copy link
Copy Markdown
Contributor

Selection works perfect but inputs are way different than our styles. We can use the exact features of select inputs here, too. Thank you @gokhanakn 🙏🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants