jonny/Signal-Desktop
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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
Show stats 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;
justify-content: center;
&__button {
border: none;
border-radius: 4px;
.module-Button {
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) {
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);
}
&--primary {
color: $ultramarine-ui-light;
}
&--destructive {
color: $color-accent-red;
}
@include hover-and-active-states($background-color, $color-black);
}
@ -86,6 +94,14 @@
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);
}
}

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

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

10
ts/components/Button.tsx
View file

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

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
import * as React from 'react';
import classNames from 'classnames';
import { ContactName, PropsType as ContactNameProps } from './ContactName';
import { Button, ButtonVariant } from '../Button';
import {
MessageRequestActionsConfirmation,
MessageRequestState,
@ -93,43 +93,28 @@ export const MandatoryProfileSharingActions = ({
/>
</p>
<div className="module-message-request-actions__buttons">
<button
type="button"
<Button
onClick={() => {
setMrState(MessageRequestState.blocking);
}}
tabIndex={0}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--deny'
)}
variant={ButtonVariant.SecondaryDestructive}
>
{i18n('MessageRequests--block')}
</button>
<button
type="button"
</Button>
<Button
onClick={() => {
setMrState(MessageRequestState.deleting);
}}
tabIndex={0}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--deny'
)}
variant={ButtonVariant.SecondaryDestructive}
>
{i18n('MessageRequests--delete')}
</button>
<button
type="button"
</Button>
<Button
onClick={onAccept}
tabIndex={0}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--accept'
)}
variant={ButtonVariant.SecondaryAffirmative}
>
{i18n('MessageRequests--continue')}
</button>
</Button>
</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
import * as React from 'react';
import classNames from 'classnames';
import { ContactName, PropsType as ContactNameProps } from './ContactName';
import { Button, ButtonVariant } from '../Button';
import {
MessageRequestActionsConfirmation,
MessageRequestState,
@ -81,60 +81,40 @@ export const MessageRequestActions = ({
/>
</p>
<div className="module-message-request-actions__buttons">
<button
type="button"
<Button
onClick={() => {
setMrState(MessageRequestState.deleting);
}}
tabIndex={0}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--deny'
)}
variant={ButtonVariant.SecondaryDestructive}
>
{i18n('MessageRequests--delete')}
</button>
</Button>
{isBlocked ? (
<button
type="button"
<Button
onClick={() => {
setMrState(MessageRequestState.unblocking);
}}
tabIndex={0}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--accept'
)}
variant={ButtonVariant.SecondaryAffirmative}
>
{i18n('MessageRequests--unblock')}
</button>
</Button>
) : (
<button
type="button"
<Button
onClick={() => {
setMrState(MessageRequestState.blocking);
}}
tabIndex={0}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--deny'
)}
variant={ButtonVariant.SecondaryDestructive}
>
{i18n('MessageRequests--block')}
</button>
</Button>
)}
{!isBlocked ? (
<button
type="button"
<Button
onClick={onAccept}
tabIndex={0}
className={classNames(
'module-message-request-actions__buttons__button',
'module-message-request-actions__buttons__button--accept'
)}
variant={ButtonVariant.SecondaryAffirmative}
>
{i18n('MessageRequests--accept')}
</button>
</Button>
) : null}
</div>
</div>