mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add affirmative and destructive secondary button variants

Browse source
This commit is contained in:
Evan Hahn 2021-04-06 17:14:18 -05:00 • committed by Josh Perez
parent 0555ef0a1e
commit 95482fbf31
6 changed files with 72 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

33
stylesheets/_modules.scss
View file

@ -3970,43 +3970,12 @@ button.module-conversation-details__action-button {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
&__button { .module-Button {
border: none;
border-radius: 4px;
min-width: 80px; min-width: 80px;
height: 36px;
padding: 0 14px;
text-align: center;
&:focus {
outline: none;
@include keyboard-mode {
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
}
}
@include font-body-1-bold;
@include light-theme {
background-color: $color-gray-05;
}
@include dark-theme {
background-color: $color-gray-75;
}
&:not(:last-of-type) { &:not(:last-of-type) {
margin-right: 8px; margin-right: 8px;
} }
&--deny {
color: $color-accent-red;
}
&--accept {
color: $color-accent-blue;
}
} }
} }
} }

16
stylesheets/components/Button.scss
View file

@ -71,6 +71,14 @@
background: fade-out($background-color, 0.6); background: fade-out($background-color, 0.6);
} }
&--primary {
color: $ultramarine-ui-light;
}
&--destructive {
color: $color-accent-red;
}
@include hover-and-active-states($background-color, $color-black); @include hover-and-active-states($background-color, $color-black);
} }
@ -86,6 +94,14 @@
background: fade-out($background-color, 0.6); background: fade-out($background-color, 0.6);
} }
&--primary {
color: $ultramarine-ui-dark;
}
&--destructive {
color: $color-accent-red;
}
@include hover-and-active-states($background-color, $color-white); @include hover-and-active-states($background-color, $color-white);
} }
} }

64
ts/components/Button.stories.tsx
View file

@ -11,49 +11,25 @@ const story = storiesOf('Components/Button', module);
story.add('Kitchen sink', () => ( story.add('Kitchen sink', () => (
<> <>
<p> {[
<Button onClick={action('onClick')} variant={ButtonVariant.Primary}> ButtonVariant.Primary,
Hello world ButtonVariant.Secondary,
</Button> ButtonVariant.SecondaryAffirmative,
</p> ButtonVariant.SecondaryDestructive,
<p> ButtonVariant.Destructive,
<Button ].map(variant => (
onClick={action('onClick')} <React.Fragment key={variant}>
variant={ButtonVariant.Primary} <p>
disabled <Button onClick={action('onClick')} variant={variant}>
> Hello world
Hello world </Button>
</Button> </p>
</p> <p>
<Button disabled onClick={action('onClick')} variant={variant}>
<p> Hello world
<Button onClick={action('onClick')} variant={ButtonVariant.Secondary}> </Button>
Hello world </p>
</Button> </React.Fragment>
</p> ))}
<p>
<Button
onClick={action('onClick')}
variant={ButtonVariant.Secondary}
disabled
>
Hello world
</Button>
</p>
<p>
<Button onClick={action('onClick')} variant={ButtonVariant.Destructive}>
Hello world
</Button>
</p>
<p>
<Button
onClick={action('onClick')}
variant={ButtonVariant.Destructive}
disabled
>
Hello world
</Button>
</p>
</> </>
)); ));

10
ts/components/Button.tsx
View file

@ -9,6 +9,8 @@ import { assert } from '../util/assert';
export enum ButtonVariant { export enum ButtonVariant {
Primary, Primary,
Secondary, Secondary,
SecondaryAffirmative,
SecondaryDestructive,
Destructive, Destructive,
} }
@ -29,6 +31,14 @@ type PropsType = {
const VARIANT_CLASS_NAMES = new Map<ButtonVariant, string>([ const VARIANT_CLASS_NAMES = new Map<ButtonVariant, string>([
[ButtonVariant.Primary, 'module-Button--primary'], [ButtonVariant.Primary, 'module-Button--primary'],
[ButtonVariant.Secondary, 'module-Button--secondary'], [ButtonVariant.Secondary, 'module-Button--secondary'],
[
ButtonVariant.SecondaryAffirmative,
'module-Button--secondary module-Button--secondary--affirmative',
],
[
ButtonVariant.SecondaryDestructive,
'module-Button--secondary module-Button--secondary--destructive',
],
[ButtonVariant.Destructive, 'module-Button--destructive'], [ButtonVariant.Destructive, 'module-Button--destructive'],
]); ]);

37
ts/components/conversation/MandatoryProfileSharingActions.tsx
View file

@ -1,9 +1,9 @@
// Copyright 2020 Signal Messenger, LLC // Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames';
import { ContactName, PropsType as ContactNameProps } from './ContactName'; import { ContactName, PropsType as ContactNameProps } from './ContactName';
import { Button, ButtonVariant } from '../Button';
import { import {
MessageRequestActionsConfirmation, MessageRequestActionsConfirmation,
MessageRequestState, MessageRequestState,
@ -93,43 +93,28 @@ export const MandatoryProfileSharingActions = ({
/> />
</p> </p>
<div className="module-message-request-actions__buttons"> <div className="module-message-request-actions__buttons">
<button <Button
type="button"
onClick={() => { onClick={() => {
setMrState(MessageRequestState.blocking); setMrState(MessageRequestState.blocking);
}} }}
tabIndex={0} variant={ButtonVariant.SecondaryDestructive}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--deny'
)}
> >
{i18n('MessageRequests--block')} {i18n('MessageRequests--block')}
</button> </Button>
<button <Button
type="button"
onClick={() => { onClick={() => {
setMrState(MessageRequestState.deleting); setMrState(MessageRequestState.deleting);
}} }}
tabIndex={0} variant={ButtonVariant.SecondaryDestructive}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--deny'
)}
> >
{i18n('MessageRequests--delete')} {i18n('MessageRequests--delete')}
</button> </Button>
<button <Button
type="button"
onClick={onAccept} onClick={onAccept}
tabIndex={0} variant={ButtonVariant.SecondaryAffirmative}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--accept'
)}
> >
{i18n('MessageRequests--continue')} {i18n('MessageRequests--continue')}
</button> </Button>
</div> </div>
</div> </div>
</> </>

48
ts/components/conversation/MessageRequestActions.tsx
View file

@ -1,9 +1,9 @@
// Copyright 2020 Signal Messenger, LLC // Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react'; import * as React from 'react';
import classNames from 'classnames';
import { ContactName, PropsType as ContactNameProps } from './ContactName'; import { ContactName, PropsType as ContactNameProps } from './ContactName';
import { Button, ButtonVariant } from '../Button';
import { import {
MessageRequestActionsConfirmation, MessageRequestActionsConfirmation,
MessageRequestState, MessageRequestState,
@ -81,60 +81,40 @@ export const MessageRequestActions = ({
/> />
</p> </p>
<div className="module-message-request-actions__buttons"> <div className="module-message-request-actions__buttons">
<button <Button
type="button"
onClick={() => { onClick={() => {
setMrState(MessageRequestState.deleting); setMrState(MessageRequestState.deleting);
}} }}
tabIndex={0} variant={ButtonVariant.SecondaryDestructive}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--deny'
)}
> >
{i18n('MessageRequests--delete')} {i18n('MessageRequests--delete')}
</button> </Button>
{isBlocked ? ( {isBlocked ? (
<button <Button
type="button"
onClick={() => { onClick={() => {
setMrState(MessageRequestState.unblocking); setMrState(MessageRequestState.unblocking);
}} }}
tabIndex={0} variant={ButtonVariant.SecondaryAffirmative}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--accept'
)}
> >
{i18n('MessageRequests--unblock')} {i18n('MessageRequests--unblock')}
</button> </Button>
) : ( ) : (
<button <Button
type="button"
onClick={() => { onClick={() => {
setMrState(MessageRequestState.blocking); setMrState(MessageRequestState.blocking);
}} }}
tabIndex={0} variant={ButtonVariant.SecondaryDestructive}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--deny'
)}
> >
{i18n('MessageRequests--block')} {i18n('MessageRequests--block')}
</button> </Button>
)} )}
{!isBlocked ? ( {!isBlocked ? (
<button <Button
type="button"
onClick={onAccept} onClick={onAccept}
tabIndex={0} variant={ButtonVariant.SecondaryAffirmative}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--accept'
)}
> >
{i18n('MessageRequests--accept')} {i18n('MessageRequests--accept')}
</button> </Button>
) : null} ) : null}
</div> </div>
</div> </div>