fundamental-ngx
fundamental-ngx copied to clipboard
SAP
[WIP] feat(core): update combobox shellbar mode
Related Issue(s)
closes #7966
Description
Updated shellbar mode of combobox to enable hide & show of Input field.
Deploy Preview for fundamental-ngx ready!
| Name | Link |
|---|---|
| Latest commit | aa0993c0360785916bea357a67ace39ab209c6ac |
| Latest deploy log | https://app.netlify.com/sites/fundamental-ngx/deploys/63beccd0f1993d0007cbf9ea |
| Deploy Preview | https://deploy-preview-8347--fundamental-ngx.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request introduces 1 alert when merging 0e8d5416d406ce5e9fa8b3fd590f1421bf78ad46 into 58cb7880aa9fca9a137c26e44e7228ae32dbcd9e - view on LGTM.com
new alerts:
- 1 for Syntax error
![lgtm-com[bot] avatar](https://avatars.githubusercontent.com/in/17324?v=4 "Published by a pub.dev verified publisher"){kind=small}
Visit the preview URL for this PR (updated for commit b184ecd):
https://fundamental-ngx-gh--pr8347-feat-7966-shellbar-e-x8ovsd7q.web.app
(expires Sun, 25 Sep 2022 16:18:30 GMT)
🔥 via Firebase Hosting GitHub Action 🌎
This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days
This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days
This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days
This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days
This pull request is stale because it has been open 2 days with no activity. Remove stale label or comment or this will be closed in 3 days
Also, FYI please check https://github.com/SAP/fundamental-ngx/issues/8607 The search field should open in a new full screen dialog in which items can be selected from a list of suggestions. But let's leave it out of the scope of this PR.
No margin between these two elements:
If the small size combobox is open and the screen size changes (this could happen when the user resizes the page or something), combobox still takes the full width
Visit the preview URL for this PR (updated for commit aa0993c):
https://fundamental-ngx-gh--pr8347-feat-7966-shellbar-e-d9naau30.web.app
(expires Sat, 14 Jan 2023 15:09:13 GMT)
🔥 via Firebase Hosting GitHub Action 🌎
Sign: 41b993ee8e451bd7c6770b342ce142dc886eacff
https://github.com/SAP/fundamental-ngx/pull/8347#discussion_r1014250538
@mikerodonnell89 Hm, no. I agree that it should be under the hood and hidden from API. Will change that.
But I don't think @HostBinding can be used here, because we are applying css classes to different elements of the components e.g. button, input, etc..
@mikerodonnell89 Hm, no. I agree that it should be under the hood and hidden from API. Will change that.
But I don't think
@HostBindingcan be used here, because we are applying css classes to different elements of the components e.g.button, input, etc..
Oops yes you are right, let's use hidden variables.
On the smallest screens search takes the whole widths and logo goes hidden accordingly to the designs
@platon-rov
I have migrated some changes to fundamental-styles. so please use latest RC of styles to test it. 😅
Can we avoid resizing the search field?
Screen.Recording.2022-11-10.at.12.09.48.mov
@platon-rov One solution to solve this to give full width to combobox. Check https://github.com/SAP/fundamental-ngx/pull/8347/commits/1a6e6599ea1f28c8dc314b7b395dc3638eba1e2f
Before:
After:
