[MM-28199] Dropdown Input Common Component #6543

devinbinnie · 2020-09-23T19:49:08Z

Summary

Dropdown Input using react-select, needed for Cloud Billing.
Demo in System Console > Biling > Subscription

Ticket Link

https://mattermost.atlassian.net/browse/MM-28199

stevemudie

LGTM

matthewbirtch

Hey @devinbinnie, this is looking good.

I believe we called this out before, but the focused state stroke is supposed to be on the inside of the input box, not the outside. I thought we resolved this with the text input components, but I'm seeing it again here (and on the inputs in the Getting Started screen.

It might be hard to see, but it does cause the border radius to look larger and does cause the actual size of the input box to be larger in the focus state.

ethervoid · 2020-09-24T19:45:03Z

Given my little expertise with React, I think @ali-farooq0 is better suited to give you a better review here

matthewbirtch · 2020-09-25T02:19:01Z

As mentioned in our chat @devinbinnie, I'm now seeing a shift in the other direction when I focus

devinbinnie · 2020-09-25T13:14:16Z

/update-branch

matthewbirtch

Thanks @devinbinnie! Looks great

alifarooq0

Nice work @devinbinnie!

alifarooq0 · 2020-09-25T13:46:45Z

components/dropdown_input.scss

+
+.DropdownInput__option.focused > div {
+ background-color: rgba(var(--center-channel-color-rgb), 0.08);
+}


nit: empty line

alifarooq0 · 2020-09-25T13:49:24Z

components/dropdown_input.tsx

+ }
+ };
+
+ let inputClass = className ? `Input ${className}` : 'Input';


Would it be better to use pkg Classnames here? might help inline these as opposed to using the ternary operator.

Yeah, this was pulled from CWS where I don't think we're using this. Should be a quick refactor.

devinbinnie · 2020-10-01T15:29:00Z

/update-branch

deanwhillier · 2020-10-01T16:37:36Z

components/admin_console/billing/billing_subscriptions.tsx

@@ -142,8 +145,18 @@ const BillingSubscriptions: React.FC<Props> = () => {
 className='BillingSubscriptions__topWrapper'
 style={{marginTop: '20px'}}
 >
- <div style={{border: '1px solid #000', width: '568px'}}>
+ <div style={{border: '1px solid #000', width: '568px', padding: '8px', backgroundColor: '#fff'}}>


Are you planning on moving inline styles (these and others) out to a css module or global styles at some point?

These are temporary just so I can get an idea of the layout.
All of these in-line styles will be going away and replaced with actual components or divs with classes attached.

deanwhillier

LGTM, again with the understanding that these components will be iterated on as part of the upcoming common components initiative.

@devinbinnie, I chatted briefly with @matthewbirtch and we were thinking that we should have the mouse cursor change to show the interaction hand when mousing over the input field and dropdown options.

mm-cloud-bot · 2020-10-01T17:55:11Z

Test server destroyed

mm-cloud-bot · 2020-10-01T17:55:11Z

Test server destroyed

…o MM-20462 * 'master' of github.com:Tak-Iwamoto/mattermost-webapp: (23 commits) [MM-25553] favicon added for unread messages without mention (mattermost#6431) fix intermittent failing tests at common commands (mattermost#6606) [MM-28260] Automate backlogs - Integrations > Slash Commands (mattermost#6429) [MM-27207] e2e archived channels I (4) (mattermost#6511) MM-24813 Add e2e tests for archive post menu options (mattermost#6571) fix MM-T1467 (mattermost#6588) MM-23345 - MM-T187 Inline markdown images open preview window (mattermost#6455) [Mm-27817] e2e add user to gm (mattermost#6278) [MM-28199] Dropdown Input Common Component (mattermost#6543) [MM-28783] migrate string refs in edit post modal (mattermost#6560) MM-24811 Archive channels should not have options to manage users (mattermost#6570) MM-28263: Cypress/E2E: Automate backlogs - Messaging > Pinned Posts part 2 (mattermost#6519) Cypress/E2E: Fix MM-T1462 accessibility for incoming message (mattermost#6589) Added legal text to upgrade button, and showing again the Edition section in team edition (mattermost#6470) add uiClickPostDropdownMenu (mattermost#6581) Fix nested a tags in Marketplace labels (mattermost#6520) [MM-27277] Enable stream mode for file uploads (mattermost#6568) move cypress plugin api (mattermost#6496) [MM-28361] User limit reached and overage banners for Mattermost Cloud (mattermost#6548) MM-28409 Add e2e for testing archive channel header (mattermost#6522) ...

marianunez · 2020-10-07T19:21:28Z

@devinbinnie just a reminder to cherry-pick this to cloud-ga

marianunez · 2020-10-07T19:25:44Z

@devinbinnie Ignore my comment above, this is already in cloud-ga 🤦‍♀️

* WIP * [MM-28199] Dropdown Input Common Component * Remove commented code * Inset focus borders * More CSS fixes * Refactor to use classnames * Blank line * Added cursor:pointer for the input and menu Co-authored-by: Mattermod <[email protected]>

devinbinnie added 2 commits September 22, 2020 15:00

WIP

02014d8

[MM-28199] Dropdown Input Common Component

9b19136

devinbinnie added 2: Dev Review Requires review by a core commiter 3: QA Review Requires review by a QA tester 1: UX Review Requires review by a UX Designer labels Sep 23, 2020

devinbinnie requested review from ethervoid, matthewbirtch, deanwhillier and stevemudie September 23, 2020 19:49

Remove commented code

36dc5d2

devinbinnie changed the title ~~@devinbinnie [MM-28199] Dropdown Input Common Component~~ [MM-28199] Dropdown Input Common Component Sep 23, 2020

stevemudie added the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Sep 23, 2020

stevemudie approved these changes Sep 23, 2020

View reviewed changes

stevemudie added QA Review Done and removed 3: QA Review Requires review by a QA tester labels Sep 23, 2020

matthewbirtch reviewed Sep 23, 2020

View reviewed changes

Inset focus borders

52230ab

devinbinnie requested a review from matthewbirtch September 24, 2020 17:10

ethervoid requested review from alifarooq0 and removed request for ethervoid September 24, 2020 19:44

More CSS fixes

6fb0b2f

Merge branch 'master' into MM-28199

8166f2b

matthewbirtch approved these changes Sep 25, 2020

View reviewed changes

devinbinnie removed the 1: UX Review Requires review by a UX Designer label Sep 25, 2020

alifarooq0 approved these changes Sep 25, 2020

View reviewed changes

devinbinnie added 2 commits September 25, 2020 10:57

Refactor to use classnames

6e942c0

Blank line

cbee46f

devinbinnie mentioned this pull request Sep 30, 2020

[MM-27142] In-Web-App purchase of Mattermost Cloud #6583

Merged

Merge branch 'master' into MM-28199

2dde870

deanwhillier reviewed Oct 1, 2020

View reviewed changes

devinbinnie requested a review from deanwhillier October 1, 2020 16:38

deanwhillier approved these changes Oct 1, 2020

View reviewed changes

devinbinnie added the 4: Reviews Complete All reviewers have approved the pull request label Oct 1, 2020

Added cursor:pointer for the input and menu

b7e8d70

devinbinnie merged commit f8e7fc9 into mattermost:master Oct 1, 2020

mattermod removed the Setup Cloud Test Server Setup a test server using Mattermost Cloud label Oct 1, 2020

amyblais removed the 2: Dev Review Requires review by a core commiter label Oct 2, 2020

amyblais added Changelog/Not Needed Does not require a changelog entry Docs/Not Needed Does not require documentation labels Oct 13, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MM-28199] Dropdown Input Common Component #6543

[MM-28199] Dropdown Input Common Component #6543

devinbinnie commented Sep 23, 2020

stevemudie left a comment

matthewbirtch left a comment

ethervoid commented Sep 24, 2020

matthewbirtch commented Sep 25, 2020 •

edited

Loading

devinbinnie commented Sep 25, 2020

matthewbirtch left a comment

alifarooq0 left a comment

alifarooq0 Sep 25, 2020

alifarooq0 Sep 25, 2020

devinbinnie Sep 25, 2020

devinbinnie commented Oct 1, 2020

deanwhillier Oct 1, 2020 •

edited

Loading

devinbinnie Oct 1, 2020

deanwhillier left a comment

mm-cloud-bot commented Oct 1, 2020

mm-cloud-bot commented Oct 1, 2020

marianunez commented Oct 7, 2020

marianunez commented Oct 7, 2020

[MM-28199] Dropdown Input Common Component #6543

[MM-28199] Dropdown Input Common Component #6543

Conversation

devinbinnie commented Sep 23, 2020

Summary

Ticket Link

stevemudie left a comment

Choose a reason for hiding this comment

matthewbirtch left a comment

Choose a reason for hiding this comment

ethervoid commented Sep 24, 2020

matthewbirtch commented Sep 25, 2020 • edited Loading

devinbinnie commented Sep 25, 2020

matthewbirtch left a comment

Choose a reason for hiding this comment

alifarooq0 left a comment

Choose a reason for hiding this comment

alifarooq0 Sep 25, 2020

Choose a reason for hiding this comment

alifarooq0 Sep 25, 2020

Choose a reason for hiding this comment

devinbinnie Sep 25, 2020

Choose a reason for hiding this comment

devinbinnie commented Oct 1, 2020

deanwhillier Oct 1, 2020 • edited Loading

Choose a reason for hiding this comment

devinbinnie Oct 1, 2020

Choose a reason for hiding this comment

deanwhillier left a comment

Choose a reason for hiding this comment

mm-cloud-bot commented Oct 1, 2020

mm-cloud-bot commented Oct 1, 2020

marianunez commented Oct 7, 2020

marianunez commented Oct 7, 2020

matthewbirtch commented Sep 25, 2020 •

edited

Loading

deanwhillier Oct 1, 2020 •

edited

Loading