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
Added SiteOrigin and PermissionList components #12832
Conversation
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. |
Builds ready [7bc0903]Page Load Metrics (768 ± 12 ms)
highlights:storybook
|
Builds ready [e98117d]Page Load Metrics (849 ± 31 ms)
highlights:storybook
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good!! Some questions and small suggestions. UI components could use some stories.
ui/components/app/permissions-connect-permission-list/permissions-connect-list.stories.js
import React from 'react';
import PermissionsConnectList from '.';
export default {
title: 'Components/App/PermissionsConnectList',
id: __filename,
component: PermissionsConnectList,
argTypes: {
permissions: {
control: 'object',
},
},
};
export const DefaultStory = (args) => <PermissionsConnectList {...args} />;
DefaultStory.storyName = 'Default';
DefaultStory.args = {
permissions: {
eth_accounts: {
leftIcon: 'fas fa-eye',
label: 'eth_accounts',
rightIcon: null,
},
},
};
ui/components/ui/site-origin/site-origin.stories.js
import React from 'react';
import SiteOrigin from '.';
export default {
title: 'Components/UI/SiteOrigin',
id: __filename,
component: SiteOrigin,
argTypes: {
siteOrigin: {
control: 'text',
},
iconSrc: {
control: 'text',
},
iconName: {
control: 'text',
},
},
};
export const DefaultStory = (args) => <SiteOrigin {...args} />;
DefaultStory.storyName = 'Default';
DefaultStory.args = {
siteOrigin: 'https://metamask.io/',
iconName: 'MetaMask',
iconSrc: './metamark.svg',
};
ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js
Outdated
Show resolved
Hide resolved
ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js
Outdated
Show resolved
Hide resolved
ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js
Outdated
Show resolved
Hide resolved
a9c4670
to
86447cc
Compare
<div className="permissions-connect-permission-list"> | ||
{Object.keys(permissions) | ||
.map((permission) => PERMISSION_TYPES[permission]) | ||
.map((permission) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd prefer that we didn't double map
; it seems reasonable to use PERMISSION_TYPES[permission].label
, etc.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree with this ^
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
UI LGTM!
I had two concerns regarding the
|
@hmalik88 Fixed the max-width |
Builds ready [e0ed8a4]Page Load Metrics (814 ± 19 ms)
highlights:storybook
|
ui/components/ui/chip/chip.js
Outdated
@@ -35,6 +36,7 @@ export default function Chip({ | |||
'chip--with-right-icon': Boolean(rightIcon), | |||
[`chip--border-color-${borderColor}`]: true, | |||
[`chip--background-color-${backgroundColor}`]: true, | |||
'chip--max-conent': maxContent, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you have a typo here, should be: 'chip--max-content'
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good. Left one comment
@@ -174,7 +174,6 @@ export default class PermissionConnect extends Component { | |||
className="permissions-connect__back" | |||
onClick={() => this.goBack()} | |||
> | |||
<i className="fas fa-chevron-left" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I believe @holantonela updated the design to keep this
e0ed8a4
to
957db9b
Compare
Builds ready [99a7c0f]Page Load Metrics (973 ± 29 ms)
highlights:storybook
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Tiny comment about self-closing <i/>
tag. Shouldn't stop from merging though
@@ -174,7 +174,7 @@ export default class PermissionConnect extends Component { | |||
className="permissions-connect__back" | |||
onClick={() => this.goBack()} | |||
> | |||
<i className="fas fa-chevron-left" /> | |||
<i className="fas fa-chevron-left"></i> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: Could use self-closing tag here
<i className="fas fa-chevron-left"></i> | |
<i className="fas fa-chevron-left" /> |
Changes made to the flow: