feat(prototypes): mention scenario with dropdown

[bmdalex]

feat(prototypes): mention scenario with dropdown

Description

This PR attempts to create a prototype to show users how they can mention people using @ key in a rich text editor.

I am using a contentEditable div as rich text input and the Dropdown component to leverage the list of users and filtering through them. The rest of the functionality is in the prototype section

Screenshot

Issues:

• feat(dropdown): autocontrolled mode for open state #900 and issue in description - blocker
• styling regression when using the filtering capability caused by docs: Removing Semantic UI from Stardust- DocSite #679

Later edit:

all issues and blocking items for this PR are fixed

[codecov]

Codecov Report

Merging #931 into master will increase coverage by <.01%.
The diff coverage is 22.22%.

@@            Coverage Diff             @@
##           master     #931      +/-   ##
==========================================
+ Coverage   80.38%   80.39%   +<.01%     
==========================================
  Files         657      657              
  Lines        8398     8396       -2     
  Branches     1488     1488              
==========================================
- Hits         6751     6750       -1     
+ Misses       1632     1631       -1     
  Partials       15       15

Impacted Files	Coverage Δ
...s/components/Dropdown/dropdownSearchInputStyles.ts	40% <ø> (ø)	⬆️
...ct/src/components/Dropdown/DropdownSearchInput.tsx	48.14% <ø> (ø)	⬆️
packages/react/src/components/Input/Input.tsx	100% <ø> (ø)	⬆️
...themes/teams/components/Dropdown/dropdownStyles.ts	24.13% <0%> (ø)	⬆️
...ackages/react/src/components/Dropdown/Dropdown.tsx	33.96% <24%> (+0.09%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b0dd20c...6340697. Read the comment docs.

[codecov]

Codecov Report

Merging #931 into master will increase coverage by 0.01%.
The diff coverage is 25.92%.

@@            Coverage Diff             @@
##           master     #931      +/-   ##
==========================================
+ Coverage   80.42%   80.43%   +0.01%     
==========================================
  Files         659      659              
  Lines        8412     8412              
  Branches     1488     1424      -64     
==========================================
+ Hits         6765     6766       +1     
+ Misses       1632     1631       -1     
  Partials       15       15

Impacted Files	Coverage Δ
...themes/teams/components/Dropdown/dropdownStyles.ts	24.13% <0%> (ø)	⬆️
...ackages/react/src/components/Dropdown/Dropdown.tsx	34.13% <26.92%> (+0.26%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ec4827b...27e2526. Read the comment docs.

[codecov]

Codecov Report

Merging #931 into master will decrease coverage by <.01%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master     #931      +/-   ##
==========================================
- Coverage   80.51%   80.51%   -0.01%     
==========================================
  Files         659      659              
  Lines        8448     8447       -1     
  Branches     1492     1428      -64     
==========================================
- Hits         6802     6801       -1     
  Misses       1631     1631              
  Partials       15       15

Impacted Files	Coverage Δ
...s/components/Dropdown/dropdownSearchInputStyles.ts	40% <ø> (ø)	⬆️
...ackages/react/src/components/Dropdown/Dropdown.tsx	34.13% <ø> (ø)	⬆️
packages/react/src/components/Input/Input.tsx	100% <ø> (ø)	⬆️
...ct/src/components/Dropdown/DropdownSearchInput.tsx	48.14% <ø> (ø)	⬆️
...themes/teams/components/Dropdown/dropdownStyles.ts	24.13% <0%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ccc755b...a57f371. Read the comment docs.

[DustyTheBot]

	Fails
🚫	All of your entries in CHANGELOG.md should be in the **Unreleased** section!

Generated by 🚫 dangerJS

[kuzhelov]

nice work 👍 just couple of things that I would like to be addressed before merge (apart from minor comments:

• sizing for input slot of dropdown input (could we remove this size altogether?): https://github.com/stardust-ui/react/pull/931/files#r259296667
• at-mentions dropdown is opened on 2 character typed: https://github.com/stardust-ui/react/pull/931/files#r259297611

[bmdalex]

thanks @kuzhelov , here are my responses:

• sizing for input slot of dropdown input (could we remove this size altogether?): https://github.com/stardust-ui/react/pull/931/files#r259296667

see: #931 (comment)

• at-mentions dropdown is opened on 2 character typed: https://github.com/stardust-ui/react/pull/931/files#r259297611

fixed

[kuzhelov]

please, just introduce changelog entry before merging 👍