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

feat(sbb-autocomplete): favourites PoC #1772

Closed
wants to merge 132 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
132 commits
Select commit Hold shift + click to select a range
434798a
feat(sbb-autocomplete): deprecated sbb-autocomplete
TomMenga Feb 3, 2023
e23e05e
feat(sbb-option): initial implementation
TomMenga Feb 7, 2023
99a7f5b
feat(sbb-option): implemented preserveIconSpace property
TomMenga Feb 7, 2023
a102128
feat(sbb-autocomplete): fix deprecated tests
TomMenga Feb 7, 2023
da5fcca
feat(sbb-option): prettier run
TomMenga Feb 7, 2023
d0ac200
feat(sbb-option): styling and accessibility
TomMenga Feb 8, 2023
f04bff3
feat(sbb-autocomplete): generate component
TomMenga Feb 8, 2023
dc9bcea
feat(sbb-option): styling
TomMenga Feb 10, 2023
5af8dfa
feat(sbb-autocomplete): partial implementation
TomMenga Feb 14, 2023
ac8f5f9
fix: css fixes
federicoisepponfincons Feb 16, 2023
6f278b3
feat(sbb-autocomplete): implemented open/close behaviour
TomMenga Feb 16, 2023
139444a
feat(sbb-autocomplete): removed the dialog tag
TomMenga Feb 16, 2023
b346a3a
feat: global css + borderless variant
federicoisepponfincons Feb 17, 2023
6ec411a
feat(sbb-autocomplete): handled aria attributes
TomMenga Feb 16, 2023
8c15d96
feat(sbb-autocomplete): implemented keyboard interactions
TomMenga Feb 20, 2023
3005bd6
feat(sbb-autocomplete): styling anchor patch
TomMenga Feb 20, 2023
6647aa6
feat: added open above variant
federicoisepponfincons Feb 20, 2023
749e79b
fix: css and stories
federicoisepponfincons Feb 23, 2023
a00168b
fix: borderless variant additional shadow
federicoisepponfincons Feb 23, 2023
1ac2f46
fix: decorators
federicoisepponfincons Feb 23, 2023
e8a8a1e
feat(sbb-autocomplete): implemented option selection
TomMenga Feb 23, 2023
b5dc490
fix: added animation
federicoisepponfincons Feb 24, 2023
22d8185
fix: animation
federicoisepponfincons Feb 27, 2023
ec3449a
feat(sbb-autocomplete): implemented open on input change and down arrow
TomMenga Feb 28, 2023
92f38d7
feat(sbb-autocomplete): implemented option highlight
TomMenga Feb 28, 2023
905324e
feat(sbb-autocomplete): implemented 'disableAnimation' prop
TomMenga Mar 2, 2023
977a950
feat(sbb-autocomplete): bug fix
TomMenga Mar 2, 2023
fcf3b88
feat(sbb-autocomplete): implemented storybook
TomMenga Mar 2, 2023
59b091d
feat(sbb-autocomplete): fix animation problems
TomMenga Mar 2, 2023
3664d09
feat(sbb-autocomplete): fix aria attributes
TomMenga Mar 2, 2023
923b7f7
feat(sbb-autocomplete): implemented close on tab out
TomMenga Mar 2, 2023
0ab5af7
feat(sbb-autocomplete): open/close animation tweak
TomMenga Mar 2, 2023
ce9a052
feat(sbb-option): fix active state outline
TomMenga Mar 6, 2023
4c45298
fix: updated option documentation
federicoisepponfincons Mar 7, 2023
ac6ff12
docs(sbb-autocomplete): written componente documentation
TomMenga Mar 7, 2023
5c4fa71
docs(sbb-autocomplete): moved storybook to first level
TomMenga Mar 7, 2023
d68e310
feat(sbb-autocomplete): deleted the old implementation
TomMenga Mar 7, 2023
2f8ddd5
feat(sbb-autocomplete): deleted the old implementation
TomMenga Mar 7, 2023
7ff4287
docs(sbb-autocomplete): fix slot documentation
TomMenga Mar 7, 2023
ec4c92a
docs(sbb-autocomplete): enhanced code doc
TomMenga Mar 7, 2023
d6c8c68
feat(sbb-autocomplete): implemented scroll to active option on keyboa…
TomMenga Mar 7, 2023
ad9ba0f
chore(sbb-autocomplete): lint
TomMenga Mar 7, 2023
34d587d
feat(sbb-autocomplete): fix aria attributes fo a11y
TomMenga Mar 7, 2023
fea3214
docs(sbb-option): fix readme
TomMenga Mar 7, 2023
760765b
docs(sbb-autocomplete): fix code doc
TomMenga Mar 7, 2023
bb1c674
chore: minor fixes
DavideMininni-Fincons Mar 7, 2023
029005f
feat(sbb-autocomplete): minor refactoring
TomMenga Mar 8, 2023
cc977ad
docs(sbb-autocomplete): minor storybook improvement
TomMenga Mar 8, 2023
85c8a47
fix(sbb-autocomplete): fix 'wrap' visual style
TomMenga Mar 9, 2023
0323b0f
fix: css fix
federicoisepponfincons Mar 10, 2023
59a435b
feat(sbb-autocomplete): fix combobox aria pattern
TomMenga Mar 9, 2023
ac0afa9
test(sbb-autocomplete): improved arrow-navigation tests
TomMenga Mar 9, 2023
f291787
fix: review changes
federicoisepponfincons Mar 13, 2023
e71ec93
feat(sbb-autocomplete): added throw error if trigger/origin is not found
TomMenga Mar 13, 2023
7beb754
feat(sbb-option): removed tabindex
TomMenga Mar 13, 2023
b83e7e2
feat(sbb-option): removed unused file
TomMenga Mar 13, 2023
8fb3824
feat(sbb-option): refactor highlight API
TomMenga Mar 13, 2023
31cdffa
feat(sbb-autocomplete): refactor preserveIconSpace API
TomMenga Mar 15, 2023
0d0845b
feat(sbb-autocomplete): now selecting an option trigger the change an…
TomMenga Mar 15, 2023
4d25aed
feat(sbb-autocomplete): 'origin' and 'trigger' prop api change
TomMenga Mar 15, 2023
f430b7e
feat: changed selection on sbb-option, minor fixes
DavideMininni-Fincons Mar 15, 2023
db36adc
feat(sbb-autocomplete): fix onOptionSelected listener
TomMenga Mar 16, 2023
b82bff0
feat(sbb-autocomplete): removed the 'disableHighlight' property
TomMenga Mar 16, 2023
fbdddfe
feat(sbb-autocomplete): minor ui fixes
TomMenga Mar 20, 2023
62270c7
fix: animation
federicoisepponfincons Mar 21, 2023
93e82a9
feat: introduce sbb-option-group
DavideMininni-Fincons Mar 21, 2023
92d8d86
feat(sbb-autocomplete): option group implementation (WIP)
TomMenga Mar 21, 2023
9c6d01a
feat(sbb-autocomplete): option group implementation (WIP)
TomMenga Mar 21, 2023
07b89e1
feat(sbb-autocomplete): option group implementation (WIP)
TomMenga Mar 21, 2023
fdb86f1
fix: animation
federicoisepponfincons Mar 21, 2023
7640167
test: add e2e tests for optgroup
DavideMininni-Fincons Mar 21, 2023
71e36dd
feat(sbb-otion): accessibility test (WIP)
TomMenga Mar 22, 2023
c1e038d
feat(sbb-otion): fix grouping accessibility
TomMenga Mar 22, 2023
128b41d
feat: add variant to sbb-option and sbb-option-group
DavideMininni-Fincons Mar 23, 2023
e47e646
fix: animation
federicoisepponfincons Mar 24, 2023
61e9558
feat(sbb-autocomplete): fix pointer events when panel is open
TomMenga Mar 24, 2023
2881a34
feat(sbb-autocomplete): add open panel on input click
TomMenga Mar 24, 2023
4576905
feat: changed label detection, add tests
DavideMininni-Fincons Mar 24, 2023
a3250a2
feat: create common type for overlay state
DavideMininni-Fincons Mar 24, 2023
3762153
test: add tests on autocomplete
DavideMininni-Fincons Mar 24, 2023
cdb0904
chore: automatically open on chromatic (wip)
DavideMininni-Fincons Mar 27, 2023
a3a8503
chore: automatically open on chromatic
DavideMininni-Fincons Mar 27, 2023
7d4a362
test: add missing waitForChanges
DavideMininni-Fincons Mar 27, 2023
f2eef7f
feat(sbb-autocomplete): fix preserve-icon-space
TomMenga Mar 27, 2023
2028783
docs(sbb-autocomplete): removed the use of 'divider' from the doc
TomMenga Mar 27, 2023
d6c2b69
docs: docs improvements
DavideMininni-Fincons Mar 28, 2023
5afc289
chore: remove throw error
DavideMininni-Fincons Mar 29, 2023
6709f77
test: fix broken test (WIP)
DavideMininni-Fincons Mar 29, 2023
409c757
fix: minor PR fixes
DavideMininni-Fincons Mar 29, 2023
961176b
fix: fix broken tests (WIP)
DavideMininni-Fincons Mar 29, 2023
90bd3e9
feat(sbb-autocomplete): added platform consts
TomMenga Mar 29, 2023
0e45fe8
feat(sbb-option): add tabindex on android
TomMenga Mar 29, 2023
1a9cf7b
fix: option group css
federicoisepponfincons Mar 30, 2023
64489aa
feat: add disabled state for css and arrow navigation
DavideMininni-Fincons Mar 30, 2023
b84ed11
feat(sbb-option-group): handled VoiceOver bug on Safari
TomMenga Mar 30, 2023
61daa82
style: fix hover and disable states
DavideMininni-Fincons Mar 30, 2023
b3a6769
feat(sbb-option-group): codestyle
TomMenga Mar 30, 2023
caa9b17
fix: preserve icon space in stories
federicoisepponfincons Mar 30, 2023
fa537b3
feat(sbb-option-group): fix tests
TomMenga Mar 30, 2023
75c0dde
feat(sbb-option): fix a11y on safari
TomMenga Mar 30, 2023
52000cf
docs(sbb-autocomplete): improve documentation
TomMenga Mar 30, 2023
5bd5596
style: high contrast impl, minor fixes
DavideMininni-Fincons Mar 30, 2023
18aacd4
feat: group fixes and variants added
federicoisepponfincons Mar 31, 2023
c2ddc85
docs(sbb-autocomplete): fix accessibility problem with groups on chrome
TomMenga Apr 4, 2023
916510c
docs(sbb-autocomplete): fix tests
TomMenga Apr 4, 2023
b7d05d4
docs(sbb-autocomplete): improved comments
TomMenga Apr 4, 2023
50f0169
chore: refactor story, add story with error
DavideMininni-Fincons Apr 4, 2023
f945669
feat(sbb-autocomplete): reset scroll on panel close
TomMenga Apr 4, 2023
7fd9927
feat(sbb-autocomplete): close panel on option click
TomMenga Apr 4, 2023
0f0fcf8
feat(sbb-autocomplete): fix anchor when the form field is in error state
TomMenga Apr 5, 2023
9b8831d
feat: alternative solution for animation
dauriamarco Apr 4, 2023
a97beea
fix: handle stacking context correctly
dauriamarco Apr 5, 2023
c373fed
feat: make overlay gap fixing global
dauriamarco Apr 5, 2023
3c4e1ef
fix: add watch, fix tests
DavideMininni-Fincons Apr 5, 2023
8dd31c8
feat: improve stories
dauriamarco Apr 6, 2023
9722e75
fix: tests
dauriamarco Apr 6, 2023
634c691
style: fix for high contrast
DavideMininni-Fincons Apr 7, 2023
c089e85
chore(sbb-autocomplete): fixes for storybook 7
TomMenga Apr 17, 2023
3900af5
test: add waitForCondition function
DavideMininni-Fincons Apr 20, 2023
457ee3d
Revert "docs(sbb-autocomplete): fix accessibility problem with groups…
TomMenga Apr 20, 2023
cc807a9
test(sbb-autocomplete): fix spec
TomMenga Apr 20, 2023
137d322
fix(sbb-autocomplete): fix accessibility problem with groups on safari
TomMenga Apr 20, 2023
dc2255a
Revert "test(sbb-autocomplete): fix spec"
TomMenga Apr 20, 2023
c28bfc7
docs(sbb-autocomplete): moved the stories inside the 'form elements' …
TomMenga Apr 27, 2023
64ad772
feat(sbb-autocomplete-favourites): first grid implementation WIP
TomMenga May 2, 2023
a7aca1a
feat(sbb-autocomplete-favourites): disabled tests
TomMenga May 2, 2023
8eaecca
feat(sbb-autocomplete-favourites): prototype fixes
TomMenga May 4, 2023
f439b7e
feat(sbb-autocomplete-favourites): integrity fix
TomMenga May 4, 2023
1bc820f
feat(sbb-autocomplete-favourites): implemented star toggle
TomMenga May 18, 2023
a857d7c
Merge branch 'master' into feat/sbb-autocomplete-favourites
TomMenga May 24, 2023
7fcf0fa
feat(sbb-autocomplete): things
TomMenga May 24, 2023
6bb287b
feat(sbb-autocomplete): test fix
TomMenga May 24, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions react-library/src/components/stencil-generated/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export const SbbNavigationMarker = /*@__PURE__*/createReactComponent<JSX.SbbNavi
export const SbbNavigationSection = /*@__PURE__*/createReactComponent<JSX.SbbNavigationSection, HTMLSbbNavigationSectionElement>('sbb-navigation-section');
export const SbbOptgroup = /*@__PURE__*/createReactComponent<JSX.SbbOptgroup, HTMLSbbOptgroupElement>('sbb-optgroup');
export const SbbOption = /*@__PURE__*/createReactComponent<JSX.SbbOption, HTMLSbbOptionElement>('sbb-option');
export const SbbOptionGroup = /*@__PURE__*/createReactComponent<JSX.SbbOptionGroup, HTMLSbbOptionGroupElement>('sbb-option-group');
export const SbbOverlay = /*@__PURE__*/createReactComponent<JSX.SbbOverlay, HTMLSbbOverlayElement>('sbb-overlay');
export const SbbPearlChain = /*@__PURE__*/createReactComponent<JSX.SbbPearlChain, HTMLSbbPearlChainElement>('sbb-pearl-chain');
export const SbbPearlChainTime = /*@__PURE__*/createReactComponent<JSX.SbbPearlChainTime, HTMLSbbPearlChainTimeElement>('sbb-pearl-chain-time');
Expand Down
36 changes: 36 additions & 0 deletions src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1112,6 +1112,7 @@ export namespace Components {
* Whether the option is currently active.
*/
"active"?: boolean;
"activeColumn"?: number;
/**
* Whether the option is disabled. TBI: missing disabled style, will be implemented with the select component.
*/
Expand All @@ -1134,11 +1135,22 @@ export namespace Components {
* @param value the label of the option group
*/
"setGroupLabel": (value: string) => Promise<void>;
"toggleFavourite": () => Promise<void>;
/**
* Value of the option.
*/
"value"?: string;
}
interface SbbOptionGroup {
/**
* Whether the group is disabled.
*/
"disabled": boolean;
/**
* Option group label.
*/
"label": string;
}
interface SbbOverlay {
/**
* Dismiss the overlay.
Expand Down Expand Up @@ -2146,6 +2158,12 @@ declare global {
prototype: HTMLSbbOptionElement;
new (): HTMLSbbOptionElement;
};
interface HTMLSbbOptionGroupElement extends Components.SbbOptionGroup, HTMLStencilElement {
}
var HTMLSbbOptionGroupElement: {
prototype: HTMLSbbOptionGroupElement;
new (): HTMLSbbOptionGroupElement;
};
interface HTMLSbbOverlayElement extends Components.SbbOverlay, HTMLStencilElement {
}
var HTMLSbbOverlayElement: {
Expand Down Expand Up @@ -2427,6 +2445,7 @@ declare global {
"sbb-navigation-section": HTMLSbbNavigationSectionElement;
"sbb-optgroup": HTMLSbbOptgroupElement;
"sbb-option": HTMLSbbOptionElement;
"sbb-option-group": HTMLSbbOptionGroupElement;
"sbb-overlay": HTMLSbbOverlayElement;
"sbb-pearl-chain": HTMLSbbPearlChainElement;
"sbb-pearl-chain-time": HTMLSbbPearlChainTimeElement;
Expand Down Expand Up @@ -3535,6 +3554,7 @@ declare namespace LocalJSX {
* Whether the option is currently active.
*/
"active"?: boolean;
"activeColumn"?: number;
/**
* Whether the option is disabled. TBI: missing disabled style, will be implemented with the select component.
*/
Expand All @@ -3543,6 +3563,10 @@ declare namespace LocalJSX {
* The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://lyne.sbb.ch/tokens/icons/.
*/
"iconName"?: string;
/**
* Emits when the option is clicked.
*/
"onOption-click"?: (event: SbbOptionCustomEvent<SbbOptionEventData>) => void;
/**
* Emits when the option selection status changes.
*/
Expand All @@ -3556,6 +3580,16 @@ declare namespace LocalJSX {
*/
"value"?: string;
}
interface SbbOptionGroup {
/**
* Whether the group is disabled.
*/
"disabled"?: boolean;
/**
* Option group label.
*/
"label"?: string;
}
interface SbbOverlay {
"onDidDismiss"?: (event: SbbOverlayCustomEvent<InterfaceOverlayEventDetail>) => void;
"onDidPresent"?: (event: SbbOverlayCustomEvent<void>) => void;
Expand Down Expand Up @@ -4319,6 +4353,7 @@ declare namespace LocalJSX {
"sbb-navigation-section": SbbNavigationSection;
"sbb-optgroup": SbbOptgroup;
"sbb-option": SbbOption;
"sbb-option-group": SbbOptionGroup;
"sbb-overlay": SbbOverlay;
"sbb-pearl-chain": SbbPearlChain;
"sbb-pearl-chain-time": SbbPearlChainTime;
Expand Down Expand Up @@ -4407,6 +4442,7 @@ declare module "@stencil/core" {
"sbb-navigation-section": LocalJSX.SbbNavigationSection & JSXBase.HTMLAttributes<HTMLSbbNavigationSectionElement>;
"sbb-optgroup": LocalJSX.SbbOptgroup & JSXBase.HTMLAttributes<HTMLSbbOptgroupElement>;
"sbb-option": LocalJSX.SbbOption & JSXBase.HTMLAttributes<HTMLSbbOptionElement>;
"sbb-option-group": LocalJSX.SbbOptionGroup & JSXBase.HTMLAttributes<HTMLSbbOptionGroupElement>;
"sbb-overlay": LocalJSX.SbbOverlay & JSXBase.HTMLAttributes<HTMLSbbOverlayElement>;
"sbb-pearl-chain": LocalJSX.SbbPearlChain & JSXBase.HTMLAttributes<HTMLSbbPearlChainElement>;
"sbb-pearl-chain-time": LocalJSX.SbbPearlChainTime & JSXBase.HTMLAttributes<HTMLSbbPearlChainTimeElement>;
Expand Down
10 changes: 5 additions & 5 deletions src/components/sbb-autocomplete/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Standalone, by setting the `origin` and `trigger` properties:
</sbb-autocomplete>
```
### Option grouping
`sbb-option` can be collected into groups using `sbb-optgroup` element:
`sbb-option` can be collected into groups using `sbb-option-group` element:

```html
<!-- Origin element -->
Expand All @@ -57,13 +57,13 @@ Standalone, by setting the `origin` and `trigger` properties:
<input placeholder="Trigger element" />

<sbb-autocomplete>
<sbb-optgroup label="Group 1">
<sbb-option-group label="Group 1">
<sbb-option icon-name="clock-small" value="Option 1"> Option 1 </sbb-option>
...
</sbb-optgroup>
<sbb-optgroup label="Group 2">
</sbb-option-group>
<sbb-option-group label="Group 2">
...
</sbb-optgroup>
</sbb-option-group>
</sbb-autocomplete>
</sbb-form-field>
```
Expand Down
Loading