mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Updating ActionableMessage to use theme colors (#13899)
This commit is contained in:
George Marshall
GitHub
parent
adce5c558d
commit
a056baf944
@ -6,13 +6,13 @@ import InfoTooltipIcon from '../info-tooltip/info-tooltip-icon';
|
||||
|
||||
const CLASSNAME_WARNING = 'actionable-message--warning';
|
||||
const CLASSNAME_DANGER = 'actionable-message--danger';
|
||||
const CLASSNAME_INFO = 'actionable-message--info';
|
||||
const CLASSNAME_SUCCESS = 'actionable-message--success';
|
||||
const CLASSNAME_WITH_RIGHT_BUTTON = 'actionable-message--with-right-button';
|
||||
|
||||
const typeHash = {
|
||||
export const typeHash = {
|
||||
warning: CLASSNAME_WARNING,
|
||||
danger: CLASSNAME_DANGER,
|
||||
info: CLASSNAME_INFO,
|
||||
success: CLASSNAME_SUCCESS,
|
||||
default: '',
|
||||
};
|
||||
|
||||
@ -136,7 +136,7 @@ ActionableMessage.propTypes = {
|
||||
/**
|
||||
* change color theme for the component that already predefined in css
|
||||
*/
|
||||
type: PropTypes.string,
|
||||
type: PropTypes.oneOf(Object.keys(typeHash)),
|
||||
/**
|
||||
* change text align to left and button to bottom right
|
||||
*/
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
import Box from '../box';
|
||||
import Typography from '../typography';
|
||||
import {
|
||||
COLORS,
|
||||
DISPLAY,
|
||||
FLEX_WRAP,
|
||||
} from '../../../helpers/constants/design-system';
|
||||
import README from './README.mdx';
|
||||
import { typeHash } from './actionable-message';
|
||||
import ActionableMessage from '.';
|
||||
|
||||
export default {
|
||||
@ -21,6 +30,11 @@ export default {
|
||||
infoTooltipText: { control: 'text' },
|
||||
useIcon: { control: 'boolean' },
|
||||
iconFillColor: { control: 'color' },
|
||||
roundedButtons: { control: 'boolean' },
|
||||
},
|
||||
args: {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
},
|
||||
};
|
||||
|
||||
@ -45,16 +59,26 @@ export const DefaultStory = (args) => (
|
||||
|
||||
DefaultStory.storyName = 'Default';
|
||||
|
||||
DefaultStory.args = {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
export const Type = (args) => (
|
||||
<>
|
||||
{Object.keys(typeHash).map((type) => (
|
||||
<ActionableMessage
|
||||
{...args}
|
||||
message={args.message || type}
|
||||
key={type}
|
||||
type={type}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
Type.args = {
|
||||
message: '',
|
||||
};
|
||||
|
||||
export const OneAction = (args) => <ActionableMessage {...args} />;
|
||||
|
||||
OneAction.args = {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
primaryAction: {
|
||||
label: 'Dismiss',
|
||||
},
|
||||
@ -63,8 +87,6 @@ OneAction.args = {
|
||||
export const TwoActions = (args) => <ActionableMessage {...args} />;
|
||||
|
||||
TwoActions.args = {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
primaryAction: {
|
||||
label: 'Dismiss',
|
||||
},
|
||||
@ -77,8 +99,6 @@ TwoActions.args = {
|
||||
export const LeftAligned = (args) => <ActionableMessage {...args} />;
|
||||
|
||||
LeftAligned.args = {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
primaryAction: {
|
||||
label: 'Dismiss',
|
||||
},
|
||||
@ -88,8 +108,6 @@ LeftAligned.args = {
|
||||
export const WithIcon = (args) => <ActionableMessage {...args} />;
|
||||
|
||||
WithIcon.args = {
|
||||
message:
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
|
||||
className: 'actionable-message--left-aligned actionable-message--warning',
|
||||
useIcon: true,
|
||||
iconFillColor: '#f8c000',
|
||||
@ -107,3 +125,30 @@ PrimaryV2Action.args = {
|
||||
label: 'I want to proceed anyway',
|
||||
},
|
||||
};
|
||||
|
||||
export const OnTopOfContent = (args) => {
|
||||
return (
|
||||
<div>
|
||||
<Box display={DISPLAY.FLEX} gap={4} flexWrap={FLEX_WRAP.WRAP}>
|
||||
<Box padding={6} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}>
|
||||
<Typography>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box padding={6} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}>
|
||||
<Typography>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box padding={6} backgroundColor={COLORS.BACKGROUND_ALTERNATIVE}>
|
||||
<Typography>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<div style={{ position: 'absolute', top: 16, left: 16, right: 16 }}>
|
||||
<ActionableMessage {...args} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.actionable-message {
|
||||
background: var(--Blue-000);
|
||||
border: 1px solid var(--Blue-200);
|
||||
color: var(--color-text-default);
|
||||
background-color: var(--color-background-default);
|
||||
border: 1px solid var(--color-info-default);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-top: 18px;
|
||||
@ -9,6 +10,28 @@
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
/**
|
||||
* Need the z-index and pseudo element for the time being while we update our muted colors to not use alpha levels
|
||||
* Otherwise ActionableMessages on top of content will transparent and it may effect
|
||||
* readability.
|
||||
*/
|
||||
|
||||
* {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-radius: 8px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: var(--color-info-muted);
|
||||
}
|
||||
|
||||
|
||||
&--with-icon {
|
||||
padding-inline-start: 32px;
|
||||
}
|
||||
@ -31,7 +54,7 @@
|
||||
@include H7;
|
||||
|
||||
&__message {
|
||||
color: var(--Blue-600);
|
||||
color: var(--color-text-default);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
@ -42,7 +65,7 @@
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
color: var(--Blue-600);
|
||||
color: var(--color-primary-default);
|
||||
|
||||
&--single {
|
||||
width: 100%;
|
||||
@ -55,15 +78,10 @@
|
||||
&--rounded {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&-danger {
|
||||
background: var(--Red-500);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__action-v2 {
|
||||
color: var(--primary-1);
|
||||
color: var(--color-primary-default);
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 12px;
|
||||
@ -79,13 +97,11 @@
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background: var(--Yellow-100);
|
||||
border: 1px solid var(--Yellow-500);
|
||||
border: 1px solid var(--color-warning-default);
|
||||
justify-content: center;
|
||||
|
||||
.actionable-message__message,
|
||||
.actionable-message__action {
|
||||
color: var(--Black-100);
|
||||
&::before {
|
||||
background: var(--color-warning-muted);
|
||||
}
|
||||
|
||||
.actionable-message__action--secondary {
|
||||
@ -94,22 +110,23 @@
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background: var(--Red-000);
|
||||
border: 1px solid var(--Red-300);
|
||||
border: 1px solid var(--color-error-default);
|
||||
justify-content: flex-start;
|
||||
|
||||
&::before {
|
||||
background: var(--color-error-muted);
|
||||
}
|
||||
|
||||
.actionable-message__message {
|
||||
color: var(--Black-100);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&--info {
|
||||
background: var(--Green-000);
|
||||
border: 1px solid var(--Green-200);
|
||||
&--success {
|
||||
border: 1px solid var(--color-success-default);
|
||||
|
||||
.actionable-message__message {
|
||||
color: var(--Black-100);
|
||||
&::before {
|
||||
background: var(--color-success-muted);
|
||||
}
|
||||
}
|
||||
|
||||
@ -150,6 +167,8 @@
|
||||
|
||||
.actionable-message--warning.actionable-message--with-right-button {
|
||||
.actionable-message__action {
|
||||
background: var(--Yellow-500);
|
||||
&::before {
|
||||
background: var(--color-warning-muted);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -305,7 +305,7 @@ export default class Home extends PureComponent {
|
||||
}
|
||||
{newCollectibleAddedMessage === 'success' ? (
|
||||
<ActionableMessage
|
||||
type="info"
|
||||
type="success"
|
||||
className="home__new-network-notification"
|
||||
message={
|
||||
<div className="home__new-network-notification-message">
|
||||
@ -330,7 +330,7 @@ export default class Home extends PureComponent {
|
||||
) : null}
|
||||
{newNetworkAdded ? (
|
||||
<ActionableMessage
|
||||
type="info"
|
||||
type="success"
|
||||
className="home__new-network-notification"
|
||||
message={
|
||||
<div className="home__new-network-notification-message">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user