Fix padding, alignment of actionable-message; add left aligned story

feature/default_network_editable
Dan Miller 4 years ago
parent f106128c41
commit 6302154c40
  1. 38
      ui/app/pages/token/actionable-message/actionable-message.js
  2. 13
      ui/app/pages/token/actionable-message/actionable-message.stories.js
  3. 12
      ui/app/pages/token/actionable-message/index.scss

@ -13,24 +13,26 @@ export default function ActionableMessage ({
<div className="actionable-message__message">
{message}
</div>
<div className="actionable-message__actions">
{primaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--primary')}
onClick={primaryAction.onClick}
>
{primaryAction.label}
</div>
)}
{secondaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
onClick={secondaryAction.onClick}
>
{secondaryAction.label}
</div>
)}
</div>
{(primaryAction || secondaryAction) && (
<div className="actionable-message__actions">
{primaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--primary')}
onClick={primaryAction.onClick}
>
{primaryAction.label}
</div>
)}
{secondaryAction && (
<div
className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
onClick={secondaryAction.onClick}
>
{secondaryAction.label}
</div>
)}
</div>
)}
</div>
)
}

@ -43,3 +43,16 @@ export const TwoActions = () => (
/>
</div>
)
export const LeftAligned = () => (
<div style={{ height: '200px', width: '300px' }}>
<ActionableMessage
message={text('Message', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')}
primaryAction={{
label: text('LeftAligned Label', 'Dismiss'),
onClick: action('LeftAligned Click 1'),
}}
className="actionable-message--left-aligned"
/>
</div>
)

@ -2,7 +2,7 @@
background: $Blue-000;
border: 1px solid $Blue-200;
border-radius: 8px;
padding: 8px 28px 8px 28px;
padding: 16px;
margin-top: 18px;
display: flex;
flex-flow: column;
@ -12,6 +12,7 @@
&__message {
color: $Blue-600;
text-align: center;
}
&__actions {
@ -42,4 +43,13 @@
text-decoration: underline;
}
}
&--left-aligned {
.actionable-message__message,
.actionable-message__actions {
justify-content: flex-start;
text-align: left;
width: 100%;
}
}
}

Loading…
Cancel
Save