Skip to content

add chip component#10199

Merged
brad-decker merged 1 commit intodevelopfrom
add-chip-component
Jan 20, 2021
Merged

add chip component#10199
brad-decker merged 1 commit intodevelopfrom
add-chip-component

Conversation

@brad-decker
Copy link
Copy Markdown
Contributor

@brad-decker brad-decker commented Jan 15, 2021

Requires: #10193, #10197

Adds a new Chip component based on designs from various parts of figma:

  1. The Origin display here
  2. The network indicator in confirmations here
  3. An older version of the add network chain UI that had a callout inside a chip.

CC @rachelcope -- I think this component is very useful, I've managed to refactor (in a different, forthcoming PR) a few different things to use this component effectively (anywhere the network is displayed with an indicator color, with the exception of the networks in the dropdown). I just want to make sure there is some distinction between a chip and a button Our buttons are rounded, like this chip, and we have buttons with just an outline. I have, for example, converted the dropdown for choosing network in the extension app header to be a chip. This is where the confusion comes for me because it has a click action, and is effectively a button. Chips in material design can have actions but they are generally reserved for the icons themselves and not the entire chip.

chip

@brad-decker brad-decker force-pushed the improve-design-system-scss branch from 7ac9372 to b7b60c3 Compare January 18, 2021 18:35
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [ac968ac]
Page Load Metrics (470 ± 48 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint33604784
domContentLoaded29761746810048
load29861947010048
domInteractive29761746810048

@brad-decker brad-decker changed the base branch from improve-design-system-scss to typography-component January 18, 2021 19:31
@brad-decker brad-decker force-pushed the typography-component branch 2 times, most recently from 5b8f87f to b6a1c02 Compare January 19, 2021 17:54
@github-actions
Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [0fa8434]
Page Load Metrics (483 ± 45 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint39635073
domContentLoaded3416074819345
load3426084839345
domInteractive3406064819345

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [ed947a9]
Page Load Metrics (537 ± 55 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint38575073
domContentLoaded31183353511555
load31383453711655
domInteractive31183253511555

Base automatically changed from typography-component to develop January 20, 2021 22:13
@brad-decker
Copy link
Copy Markdown
Contributor Author

Reviewed with @rachelcope and the distinction between button and chip will be tackled later, but for now chip doesn't default to having click styling (cursor: pointer, etc)

@brad-decker brad-decker marked this pull request as ready for review January 20, 2021 22:15
@brad-decker brad-decker requested a review from a team as a code owner January 20, 2021 22:15
@brad-decker brad-decker requested a review from darkwing January 20, 2021 22:15
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [90ed72d]
Page Load Metrics (562 ± 45 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint387853105
domContentLoaded3287505619445
load3297515629445
domInteractive3277505609445

Copy link
Copy Markdown
Contributor

@darkwing darkwing left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks excellent, only feedback was my DMs regarding accessibility, i.e. <button> or tabindex='0'!

@brad-decker brad-decker merged commit e9079be into develop Jan 20, 2021
@brad-decker brad-decker deleted the add-chip-component branch January 20, 2021 23:06
@github-actions github-actions bot locked and limited conversation to collaborators Jan 20, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants