Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: fix the broken select UI of the new storage folder dialog #2280

Merged
merged 3 commits into from
Apr 1, 2024

Conversation

agatha197
Copy link
Contributor

@agatha197 agatha197 commented Mar 28, 2024

follows #2268

Before
image

After
image

Checklist: (if applicable)

  • Mention to the original issue
  • Documentation
  • Minium required manager version
  • Specific setting for review (eg., KB link, endpoint or how to setup)
  • Minimum requirements to check during review
  • Test case(s) to demonstrate the difference of before/after

@github-actions github-actions bot added the size:S 10~30 LoC label Mar 28, 2024
@agatha197 agatha197 requested a review from yomybaby March 28, 2024 06:56
@agatha197 agatha197 added type:fix Fix features that are not working effort:easy Need to understand only a specific region of codes (good first issue, easy). area:ux UI / UX issue. urgency:3 Must be finished within a certain time frame. platform:general impact:visible This change is visible to users. field:UI / UX labels Mar 28, 2024
@agatha197 agatha197 added this to the 23.09 milestone Mar 28, 2024
Comment on lines 1 to 25
diff --git a/node_modules/@material/mwc-select/mwc-select-base.js b/node_modules/@material/mwc-select/mwc-select-base.js
index 66a2c20..6914121 100644
index 66a2c20..efcbb8e 100644
--- a/node_modules/@material/mwc-select/mwc-select-base.js
+++ b/node_modules/@material/mwc-select/mwc-select-base.js
@@ -128,6 +128,14 @@ export class SelectBase extends FormElement {
@@ -128,6 +128,16 @@ export class SelectBase extends FormElement {
const labelledby = !!this.label ? 'label' : undefined;
const describedby = this.shouldRenderHelperText ? 'helper-text' : undefined;
return html `
+ <style>
+ .mdc-select__anchor {
+ min-width: var(--mdc-select-min-width, 200px);
+ max-width: var(--mwc-select-max-width, 100%);
+ }
+ .mdc-select--filled {
+ min-width: var(--mdc-select-min-width, 200px);
+ max-width: var(--mwc-select-max-width, 100%);
+ }
+ </style>
<div
class="mdc-select ${classMap(classes)}">
<input
@@ -247,7 +255,7 @@ export class SelectBase extends FormElement {
@@ -247,7 +257,7 @@ export class SelectBase extends FormElement {
if (!this.icon) {
return nothing;
}
Copy link
Member

Choose a reason for hiding this comment

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

Without this patch file, it works properly with backend-ai-data-view.ts changes. Is this paths is required? @agatha197

Copy link
Contributor Author

Choose a reason for hiding this comment

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

You are right. I reverted it.

@github-actions github-actions bot added size:XS ~10 LoC and removed field:UI / UX size:S 10~30 LoC labels Apr 1, 2024
@agatha197 agatha197 requested a review from yomybaby April 1, 2024 04:16
@agatha197 agatha197 changed the title fix: modify select's width which is side effect of patching mwc select style: fix the broken select UI of the new storage folder dialog Apr 1, 2024
Copy link
Member

@yomybaby yomybaby left a comment

Choose a reason for hiding this comment

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

LGTM

@yomybaby yomybaby merged commit 5760744 into main Apr 1, 2024
5 checks passed
@yomybaby yomybaby deleted the style/mwc-select-patch-side-effect branch April 1, 2024 06:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area:ux UI / UX issue. effort:easy Need to understand only a specific region of codes (good first issue, easy). impact:visible This change is visible to users. platform:general size:XS ~10 LoC type:fix Fix features that are not working urgency:3 Must be finished within a certain time frame.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants