feat(autocomplete): add autocomplete component #10562

driskull · 2024-10-18T22:04:34Z

Related Issue: #10044

Summary

Adds calcite-autocomplete, calcite-autocomplete-item, and calcite-autocomplete-item-group
Adds e2e tests
Adds storybook
Adds HTML demos
Adds t9n strings
Follows Figma designs
Adds CSS tokens
role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete

Tokens

Autocomplete

--calcite-autocomplete-background-color: Specifies the background color of the component.
--calcite-autocomplete-corner-radius: Specifies the component's corner radius.
--calcite-autocomplete-text-color: Specifies the text color of the component.

--calcite-autocomplete-input-prefix-size: Specifies the Input's prefix width, when present.
--calcite-autocomplete-input-suffix-size: Specifies the Input's suffix width, when present.

--calcite-autocomplete-input-background-color: Specifies the background color of the Input.
--calcite-autocomplete-input-border-color: Specifies the border color of the Input.
--calcite-autocomplete-input-corner-radius: Specifies the corner radius of the Input.
--calcite-autocomplete-input-shadow: Specifies the shadow of the Input.

--calcite-autocomplete-input-icon-color: Specifies the icon color of the Input.
--calcite-autocomplete-input-text-color: Specifies the text color of the Input.
--calcite-autocomplete-input-placeholder-text-color: Specifies the color of placeholder text in the Input.

--calcite-autocomplete-input-actions-background-color: Specifies the background color of Input's clearable element.
--calcite-autocomplete-input-actions-background-color-hover: Specifies the background color of Input's clearable element when hovered.
--calcite-autocomplete-input-actions-background-color-press: Specifies the background color of Input's clearable element when pressed.
--calcite-autocomplete-input-actions-icon-color: Specifies the icon color of Input's clearable element.
--calcite-autocomplete-input-actions-icon-color-hover: Specifies the icon color of Input's clearable element when hovered.
--calcite-autocomplete-input-actions-icon-color-press: Specifies the icon color of Input's clearable element when pressed.

--calcite-autocomplete-input-loading-background-color: Specifies the background color of the Input's loading element, when present.
--calcite-autocomplete-input-loading-fill-color: Specifies the fill color of the Input's loading element, when present.

--calcite-autocomplete-input-prefix-background-color: Specifies the background color of the Input's prefix, when present.
--calcite-autocomplete-input-prefix-text-color: Specifies the text color of the Input's prefix, when present.

--calcite-autocomplete-input-suffix-background-color: Specifies the background color of the Input's suffix, when present.
--calcite-autocomplete-input-suffix-text-color: Specifies the text color of the Input's suffix, when present.

Autocomplete item

--calcite-autocomplete-background-color: Specifies the background color of the component.
--calcite-autocomplete-description-text-color: Specifies the text color of the component's description.
--calcite-autocomplete-heading-text-color: Specifies the text color of the component's heading.
--calcite-autocomplete-text-color: Specifies the text color of the component.

Autocomplete item group

--calcite-autocomplete-background-color: Specifies the background color of the component.
--calcite-autocomplete-border-color: Specifies the border color of the component.
--calcite-autocomplete-text-color: Specifies the text color of the component.

…n-system into dris0000/autocomplete

github-actions · 2024-11-08T01:57:27Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

# Conflicts: # packages/calcite-components/index.html # packages/calcite-components/src/components.d.ts # packages/calcite-components/stencil.config.ts

driskull · 2024-12-12T22:34:42Z

@jcfranco @benelan can you review when you get a chance? Thanks!

# Conflicts: # t9nmanifest.txt

benelan

Code LGTM! Do you need additional manual testing or has that already been taken care of?

packages/calcite-components/src/components/autocomplete-item/autocomplete-item.tsx

benelan · 2024-12-17T19:56:37Z

packages/calcite-components/src/components/autocomplete-item/resources.ts

+  heading: "heading",
+  iconEnd: "icon-end",
+  iconStart: "icon-start",
+  scale: (scale: Scale) => `scale--${scale}` as const,


Is this a new pattern we're using to avoid the more costly attribute selector?

Its used in combobox-item.

calcite-design-system/packages/calcite-components/src/components/combobox-item/resources.ts

Line 13 in e0f5a85

scale: (scale: Scale) => `scale--${scale}` as const,

I copied it from there. Is that ok?

Gotcha, yeah this was just a sidebar; I was curious if that's something we should be doing instead of using the attribute selector like this:

calcite-design-system/packages/calcite-components/src/components/icon/icon.scss

Lines 18 to 37 in e0f5a85

:host([scale="s"]) {

inline-size: $icon-size-s;

block-size: $icon-size-s;

min-inline-size: $icon-size-s;

min-block-size: $icon-size-s;

}

:host([scale="m"]) {

inline-size: $icon-size-m;

block-size: $icon-size-m;

min-inline-size: $icon-size-m;

min-block-size: $icon-size-m;

}

:host([scale="l"]) {

inline-size: $icon-size-l;

block-size: $icon-size-l;

min-inline-size: $icon-size-l;

min-block-size: $icon-size-l;

}

I think either are fine, I just hadn't seen the scale--s pattern in our codebase yet. After a quick grep I also found instances of scale-s, e.g.

calcite-design-system/packages/calcite-components/src/components/tab/tab.scss

Lines 29 to 42 in e0f5a85

.scale-s {

--calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.1"));

@apply text-n2h;

}

.scale-m {

--calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.2"));

@apply text-n1h;

}

.scale-l {

--calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.[2.5]"));

@apply text-0h;

}

Do we have any conventions on whether we should be using BEM in our CSS class names @jcfranco? It seems rather inconsistent between components.

I agree .scale--s would be better than .scale-s to align with a standardized pattern. We don't really need BEM for specificity since our components are shadowed. Probably an issue to cleanup class names.

I do prefer classes over using attribute selectors because it forces those attributes to be reflected and can make some selectors quite complex.

I agree .scale--s would be better than .scale-s to align with a standardized pattern. We don't really need BEM for specificity since our components are shadowed. Probably an issue to cleanup class names.

I also prefer .scale--s since it follows convention. I don't think it's worth an issue because the classes aren't exposed to users. But maybe we can recommend the block--modifier-value naming convention for future PRs so the codebase doesn't diverge any further, cc @jcfranco.

I do prefer classes over using attribute selectors because it forces those attributes to be reflected and can make some selectors quite complex.

Yeah makes sense, thanks!

packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts

packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts

packages/calcite-components/src/components/autocomplete/autocomplete.tsx

driskull · 2024-12-17T21:56:15Z

Code LGTM! Do you need additional manual testing or has that already been taken care of?

@benelan additional manual testing would be great if you have some time.

benelan · 2024-12-17T22:05:01Z

Code LGTM! Do you need additional manual testing or has that already been taken care of?

@benelan additional manual testing would be great if you have some time.

I have to run off to an hour appointment but I can do some later today. I'll focus on form validation stuff.

driskull · 2024-12-18T00:14:32Z

Going to install tonight. If there are follow up issues let me know @benelan @jcfranco

driskull added 2 commits October 8, 2024 16:25

feat(autocomplete): add autocomplete component. #10044

e91067a

WIP

f775c65

github-actions bot assigned driskull Oct 18, 2024

github-actions bot added the enhancement Issues tied to a new feature or request. label Oct 18, 2024

driskull added 13 commits October 18, 2024 16:09

WIP

f9281c3

WIP

26ef117

WIP

895fb3d

revert

551a4ef

Update .stylelintrc.cjs

1647737

WIP

40ff5a4

Merge branch 'dris0000/autocomplete' of github.com:Esri/calcite-desig…

74e8475

…n-system into dris0000/autocomplete

cleanup

50bd853

test app

5003bd5

cleanup

08ddfc6

test app

4b63467

test app

d576694

Merge branch 'dev' into dris0000/autocomplete

83b6e04

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Nov 8, 2024

driskull added 4 commits November 15, 2024 09:28

Merge branch 'dev' into dris0000/autocomplete

eaff04d

# Conflicts: # packages/calcite-components/index.html # packages/calcite-components/src/components.d.ts # packages/calcite-components/stencil.config.ts

Merge branch 'dev' into dris0000/autocomplete

d134939

feat(autocomplete): add autocomplete component

ea844e0

cleanup

023f40a

github-actions bot removed the Stale Issues or pull requests that have not had recent activity. label Nov 16, 2024

driskull added 6 commits November 18, 2024 14:54

WIP

ef0e707

cleanup

f5a8775

WIP

b287e24

wip

c3ec799

WIP

183d4da

html demo

ae99b87

review fixes

4e384e5

driskull requested a review from anveshmekala December 12, 2024 00:33

Merge branch 'dev' into dris0000/autocomplete

f3d1892

driskull added 2 commits December 17, 2024 11:55

Merge branch 'dev' into dris0000/autocomplete

a18e247

# Conflicts: # t9nmanifest.txt

Merge branch 'dev' into dris0000/autocomplete

3432c7f

benelan approved these changes Dec 17, 2024

View reviewed changes

review fixes

c676592

link issue

c519582

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 17, 2024

stories

100dd99

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 17, 2024

cleanup stories

eb8facb

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 18, 2024

story

13b669f

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 18, 2024

driskull added 2 commits December 17, 2024 16:39

cleanup

8d7f297

Merge branch 'dev' into dris0000/autocomplete

72dba5c

driskull added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Dec 18, 2024

driskull merged commit 0da4cc6 into dev Dec 18, 2024
14 checks passed

driskull deleted the dris0000/autocomplete branch December 18, 2024 01:04

github-actions bot added this to the 2025-01-30 - 3.0.0 Jan Breaking Change Release milestone Dec 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(autocomplete): add autocomplete component #10562

feat(autocomplete): add autocomplete component #10562

driskull commented Oct 18, 2024 •

edited

Loading

github-actions bot commented Nov 8, 2024

driskull commented Dec 12, 2024

benelan left a comment

benelan Dec 17, 2024

driskull Dec 17, 2024

benelan Dec 17, 2024 •

edited

Loading

driskull Dec 17, 2024

benelan Dec 17, 2024

driskull commented Dec 17, 2024

benelan commented Dec 17, 2024

driskull commented Dec 18, 2024

	:host([scale="s"]) {
	inline-size: $icon-size-s;
	block-size: $icon-size-s;
	min-inline-size: $icon-size-s;
	min-block-size: $icon-size-s;
	}

	:host([scale="m"]) {
	inline-size: $icon-size-m;
	block-size: $icon-size-m;
	min-inline-size: $icon-size-m;
	min-block-size: $icon-size-m;
	}

	:host([scale="l"]) {
	inline-size: $icon-size-l;
	block-size: $icon-size-l;
	min-inline-size: $icon-size-l;
	min-block-size: $icon-size-l;
	}

	.scale-s {
	--calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.1"));
	@apply text-n2h;
	}

	.scale-m {
	--calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.2"));
	@apply text-n1h;
	}

	.scale-l {
	--calcite-internal-tab-content-block-padding: var(--calcite-tab-content-block-padding, theme("spacing.[2.5]"));
	@apply text-0h;
	}

feat(autocomplete): add autocomplete component #10562

feat(autocomplete): add autocomplete component #10562

Conversation

driskull commented Oct 18, 2024 • edited Loading

Summary

Tokens

Autocomplete

Autocomplete item

Autocomplete item group

github-actions bot commented Nov 8, 2024

driskull commented Dec 12, 2024

benelan left a comment

Choose a reason for hiding this comment

benelan Dec 17, 2024

Choose a reason for hiding this comment

driskull Dec 17, 2024

Choose a reason for hiding this comment

benelan Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

driskull Dec 17, 2024

Choose a reason for hiding this comment

benelan Dec 17, 2024

Choose a reason for hiding this comment

driskull commented Dec 17, 2024

benelan commented Dec 17, 2024

driskull commented Dec 18, 2024

driskull commented Oct 18, 2024 •

edited

Loading

benelan Dec 17, 2024 •

edited

Loading