wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-15 11:26:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

[CORL-746] updated branding: buttons (#2748)

Browse Source 
* new button component

* update specs

* fix up markers

* fix docz so it renders

* clean up buttons implementation

* update snaps

* clean up slack buttons

* update snaps
This commit is contained in:
Tessa Thornton
2019-12-09 18:03:30 -05:00
committed by Kim Gardner
parent ec93789cff
commit 3358cef433
47 changed files with 545 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/admin/App/UserMenu/UserMenu.tsx
+1 -2
View File
@@ -60,9 +60,8 @@ const UserMenu: FunctionComponent<Props> = props => (
className={styles.button}
onClick={toggleVisibility}
ref={ref}
variant="plain"
variant="text"
uppercase={false}
size="small"
>
<ButtonIcon className={styles.icon} size="lg">
account_circle
src/core/client/admin/components/ModerateCard/Markers.tsx
+2 -7
View File
@@ -28,16 +28,11 @@ const Markers: FunctionComponent<Props> = ({ children, details }) => {
{children}
{details && (
<Button
size="small"
classes={{
variantDefault: styles.detailsButton,
colorDefault: styles.detailsButtonColorRegular,
}}
variant="ghost"
variant="text"
color="mono"
onClick={toggleDetails}
aria-controls={uuid}
aria-expanded={showDetails}
color="mono"
>
<Localized id="moderate-markers-details">
<span className={styles.detailsText}>DETAILS</span>
src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.tsx
+10 -12
View File
@@ -1,7 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { FunctionComponent, useCallback } from "react";
import { Button, Flex, Icon, Timestamp } from "coral-ui/components/v2";
import { Button, ButtonIcon, Flex, Timestamp } from "coral-ui/components/v2";
import styles from "./ModeratorNote.css";
@@ -41,17 +41,15 @@ const ModeratorNote: FunctionComponent<Props> = ({
)}
</Flex>
{onDelete && (
<Localized id="moderatorNote-delete">
<Button
size="small"
uppercase={false}
variant="plain"
onClick={deleteNote}
>
<Icon>delete</Icon>
<span>Delete</span>
</Button>
</Localized>
<Button
uppercase={false}
iconLeft
variant="flat"
onClick={deleteNote}
>
<ButtonIcon>delete</ButtonIcon>
<Localized id="moderatorNote-delete">Delete</Localized>
</Button>
)}
</Flex>
</div>
src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.tsx
+1 -3
View File
@@ -78,9 +78,7 @@ const UserDrawerNotesContainer: FunctionComponent<Props> = ({
</Localized>
<Flex justifyContent="flex-end">
<Localized id="moderate-user-drawer-notes-button">
<Button size="medium" type="submit">
Add note
</Button>
<Button type="submit">Add note</Button>
</Localized>
</Flex>
</form>
src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.tsx
+3 -3
View File
@@ -43,7 +43,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
return (
<>
<Button variant="plain" className={styles.close} onClick={onClose}>
<Button variant="text" className={styles.close} onClick={onClose}>
<Icon size="md">close</Icon>
</Button>
<HorizontalGutter spacing={4}>
@@ -84,7 +84,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
</Icon>
</Localized>
<span className={styles.userDetailValue}>{user.email}</span>
<CopyButton text={user.email!} size="small" />
<CopyButton text={user.email!} />
</Flex>
<Flex alignItems="center" spacing={2}>
<Localized
@@ -113,7 +113,7 @@ const UserHistoryDrawerContainer: FunctionComponent<Props> = ({
</Icon>
</Localized>
<span className={styles.userDetailValue}>{user.id}</span>
<CopyButton text={user.id} size="small" />
<CopyButton text={user.id} />
</Flex>
</HorizontalGutter>
</HorizontalGutter>
src/core/client/admin/components/UserRole/UserRoleChange.tsx
+2 -2
View File
@@ -61,10 +61,10 @@ const UserRoleChange: FunctionComponent<Props> = props => (
className={styles.button}
onClick={toggleVisibility}
uppercase={false}
size="large"
color="mono"
ref={ref}
variant="plain"
size="small"
variant="text"
>
<UserRoleText>{props.role}</UserRoleText>
{
src/core/client/admin/components/UserStatus/BanModal.tsx
+2 -7
View File
@@ -117,17 +117,12 @@ const BanModal: FunctionComponent<Props> = ({
<Flex justifyContent="flex-end" itemGutter="half">
<Localized id="community-banModal-cancel">
<Button variant="ghost" onClick={onClose}>
<Button variant="flat" onClick={onClose}>
Cancel
</Button>
</Localized>
<Localized id="community-banModal-banUser">
<Button
variant="filled"
color="default"
type="submit"
ref={lastFocusableRef}
>
<Button type="submit" ref={lastFocusableRef}>
Ban User
</Button>
</Localized>
src/core/client/admin/components/UserStatus/PremodModal.tsx
+2 -7
View File
@@ -52,18 +52,13 @@ const PremodModal: FunctionComponent<Props> = ({
</Localized>
<Flex justifyContent="flex-end" itemGutter>
<Localized id="community-premodModal-cancel">
<Button variant="ghost" onClick={onClose}>
<Button variant="flat" onClick={onClose}>
Cancel
</Button>
</Localized>
<Localized id="community-premodModal-premodUser">
<Button
variant="filled"
color="default"
onClick={onConfirm}
ref={lastFocusableRef}
>
<Button onClick={onConfirm} ref={lastFocusableRef}>
Yes, always premoderate user
</Button>
</Localized>
src/core/client/admin/components/UserStatus/SuspendForm.tsx
+2 -7
View File
@@ -196,17 +196,12 @@ const SuspendForm: FunctionComponent<Props> = ({
</Field>
<Flex justifyContent="flex-end" itemGutter="half">
<Localized id="community-suspendModal-cancel">
<Button variant="ghost" onClick={onCancel}>
<Button variant="flat" onClick={onCancel}>
Cancel
</Button>
</Localized>
<Localized id="community-suspendModal-suspendUser">
<Button
ref={lastFocusableRef}
variant="filled"
color="default"
type="submit"
>
<Button ref={lastFocusableRef} type="submit">
Suspend User
</Button>
</Localized>
src/core/client/admin/components/UserStatus/SuspendModal.tsx
+1 -6
View File
@@ -71,12 +71,7 @@ const SuspendModal: FunctionComponent<Props> = ({
<Flex justifyContent="flex-end" itemGutter="half">
<Localized id="community-suspendModal-success-close">
<Button
ref={lastFocusableRef}
variant="filled"
color="default"
onClick={onClose}
>
<Button ref={lastFocusableRef} onClick={onClose}>
Ok
</Button>
</Localized>
src/core/client/admin/components/UserStatus/UserStatusChange.tsx
+1 -1
View File
@@ -144,7 +144,7 @@ const UserStatusChange: FunctionComponent<Props> = ({
ref={ref}
color="mono"
uppercase={false}
variant="plain"
variant="text"
>
{children}
{
src/core/client/admin/routes/Community/InviteUsers/InviteUsers.tsx
+2 -2
View File
@@ -17,9 +17,9 @@ const InviteUsers: FunctionComponent = () => {
<div data-testid="invite-users">
<Localized id="community-invite-invite">
<Button
variant="filled"
color="default"
className={styles.button}
variant="flat"
color="dark"
type="button"
data-testid="invite-users-button"
onClick={show}
src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.tsx
+1 -9
View File
@@ -64,8 +64,6 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
<Flex justifyContent="center">
<Localized id="community-invite-inviteMore">
<Button
variant="underlined"
color="default"
disabled={submitting}
onClick={() => {
setEmailFieldCount(emailFieldCount + 1);
@@ -129,13 +127,7 @@ const InviteForm: FunctionComponent<Props> = ({ lastRef, onFinish }) => {
</FormSpy>
<Flex direction="row" justifyContent="flex-end">
<Localized id="community-invite-sendInvitations">
<Button
color="default"
variant="filled"
type="submit"
disabled={submitting}
ref={lastRef}
>
<Button type="submit" disabled={submitting} ref={lastRef}>
Send invitations
</Button>
</Localized>
src/core/client/admin/routes/Community/UserRow.tsx
+2 -1
View File
@@ -58,7 +58,8 @@ const UserRow: FunctionComponent<Props> = ({
)}
{!deletedAt && (
<Button
variant="plain"
variant="text"
color="mono"
uppercase={false}
onClick={usernameClicked}
className={styles.usernameButton}
src/core/client/admin/routes/Community/UserTableFilter.tsx
+2 -2
View File
@@ -73,9 +73,9 @@ const UserTableFilter: FunctionComponent<Props> = props => (
>
<Button
className={styles.adornment}
variant="adornment"
adornmentRight
type="submit"
color="emphasis"
color="dark"
aria-label="Search"
>
<Icon size="md">search</Icon>
src/core/client/admin/routes/Configure/Configure.tsx
+2 -1
View File
@@ -65,8 +65,9 @@ const Configure: FunctionComponent<Props> = ({
<Localized id="configure-sideBar-saveChanges">
<Button
data-testid="configure-sideBar-saveChanges"
variant="filled"
type="submit"
color="alt"
size="large"
disabled={submitting || pristine}
>
Save Changes
src/core/client/admin/routes/Configure/sections/Advanced/EmbedCode.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ const EmbedCode: FunctionComponent<Props> = ({ staticURI, getMessage }) => {
value={embed.text}
/>
<HorizontalGutter className={styles.copyArea}>
<CopyButton size="medium" text={embed.text} />
<CopyButton text={embed.text} />
</HorizontalGutter>
</ConfigBox>
);
src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx
-2
View File
@@ -178,8 +178,6 @@ const OIDCConfig: FunctionComponent<Props> = ({
/>
<Button
id="configure-auth-oidc-discover"
variant="filled"
size="small"
disabled={disabledInside || disableForDiscover}
onClick={onDiscover}
>
src/core/client/admin/routes/Configure/sections/Auth/RedirectField.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ const RedirectField: FunctionComponent<Props> = ({ url, description }) => (
{description}
<Flex direction="row" itemGutter="half" alignItems="center">
<TextField name="redirectURI" value={url} fullWidth readOnly />
<CopyButton size="small" text={url} />
<CopyButton text={url} />
</Flex>
</FormField>
);
src/core/client/admin/routes/Configure/sections/Auth/SSOKeyField.tsx
-2
View File
@@ -61,8 +61,6 @@ const SSOKeyField: FunctionComponent<Props> = ({
<Localized id="configure-auth-sso-regenerate">
<Button
id="configure-auth-sso-regenerate"
variant="filled"
size="small"
disabled={disabled}
onClick={onRegenerate}
className={styles.regenerateButton}
src/core/client/admin/routes/Configure/sections/Slack/SlackChannel.tsx
-2
View File
@@ -238,8 +238,6 @@ const SlackChannel: FunctionComponent<Props> = ({
</FormField>
<div>
<Button
size="medium"
variant="filled"
color="alert"
onClick={onRemove}
className={cn(styles.removeButton, styles.button)}
src/core/client/admin/routes/Configure/sections/Slack/SlackConfigContainer.tsx
+1 -6
View File
@@ -109,12 +109,7 @@ const SlackConfigContainer: FunctionComponent<Props> = ({ form, settings }) => {
on how to create a Slack App see our documentation.
</FormFieldDescription>
</Localized>
<Button
size="medium"
variant="filled"
onClick={onAddChannel}
className={styles.button}
>
<Button color="dark" onClick={onAddChannel}>
<ButtonIcon size="md" className={styles.icon}>
add
</ButtonIcon>
src/core/client/admin/routes/Moderate/ModerateSearchBar/ModerateAllOption.tsx
+1 -8
View File
@@ -26,14 +26,7 @@ const ModerateAllOption: FunctionComponent<Props> = ({
aria-selected={selected}
{...rest}
>
<Button
href={href}
color="emphasis"
variant="filled"
anchor
fullWidth
tabIndex={-1}
>
<Button href={href} color="dark" anchor fullWidth tabIndex={-1}>
<Localized id="moderate-searchBar-moderateAllStories">
<span>Moderate all stories</span>
</Localized>
src/core/client/admin/routes/Moderate/Queue/Queue.tsx
+1 -5
View File
@@ -98,11 +98,7 @@ const Queue: FunctionComponent<Props> = ({
{Boolean(viewNewCount && viewNewCount > 0) && (
<Flex justifyContent="center" className={styles.viewNewButtonContainer}>
<Localized id="moderate-queue-viewNew" $count={viewNewCount}>
<Button
variant="filled"
onClick={onViewNew}
className={styles.viewNewButton}
>
<Button onClick={onViewNew} className={styles.viewNewButton}>
View {viewNewCount} new comments
</Button>
</Localized>
src/core/client/admin/routes/Stories/StoryStatus/StoryStatusChange.tsx
+1 -2
View File
@@ -64,8 +64,7 @@ const StoryStatusChange: FunctionComponent<Props> = props => (
ref={ref}
color="mono"
uppercase={false}
variant="plain"
size="small"
variant="text"
>
<StoryStatusText>{props.status}</StoryStatusText>
{
src/core/client/admin/routes/Stories/StoryTableFilter.tsx
+2 -2
View File
@@ -63,9 +63,9 @@ const StoryTableFilter: FunctionComponent<Props> = props => (
>
<Button
className={styles.adornment}
variant="adornment"
type="submit"
color="emphasis"
color="dark"
adornmentRight
aria-label="Search"
>
<Icon size="md">search</Icon>
src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap
+32 -32
View File
@@ -49,9 +49,9 @@ exports[`renders community 1`] = `
>
<button
aria-label="Search"
className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase UserTableFilter-adornment"
data-color="emphasis"
data-variant="adornment"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight UserTableFilter-adornment"
data-color="dark"
data-variant="regular"
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
@@ -199,10 +199,10 @@ exports[`renders community 1`] = `
data-testid="invite-users"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase InviteUsers-button"
data-color="default"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantFlat Button-uppercase InviteUsers-button"
data-color="dark"
data-testid="invite-users-button"
data-variant="filled"
data-variant="flat"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -264,9 +264,9 @@ exports[`renders community 1`] = `
className="TableCell-root UserRow-usernameColumn TableCell-body"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
data-color="default"
data-variant="plain"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
data-color="mono"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -329,9 +329,9 @@ exports[`renders community 1`] = `
className="TableCell-root UserRow-usernameColumn TableCell-body"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
data-color="default"
data-variant="plain"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
data-color="mono"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -366,9 +366,9 @@ exports[`renders community 1`] = `
>
<button
aria-label="Change role"
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
data-color="mono"
data-variant="plain"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -427,9 +427,9 @@ exports[`renders community 1`] = `
className="TableCell-root UserRow-usernameColumn TableCell-body"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
data-color="default"
data-variant="plain"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
data-color="mono"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -464,9 +464,9 @@ exports[`renders community 1`] = `
>
<button
aria-label="Change role"
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
data-color="mono"
data-variant="plain"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -525,9 +525,9 @@ exports[`renders community 1`] = `
className="TableCell-root UserRow-usernameColumn TableCell-body"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantPlain UserRow-usernameButton"
data-color="default"
data-variant="plain"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserRow-usernameButton"
data-color="mono"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -562,9 +562,9 @@ exports[`renders community 1`] = `
>
<button
aria-label="Change role"
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain UserRoleChange-button"
className="BaseButton-root Button-root Button-sizeLarge Button-colorMono Button-variantText UserRoleChange-button"
data-color="mono"
data-variant="plain"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -608,9 +608,9 @@ exports[`renders community 1`] = `
>
<button
aria-label="Change user status"
className="BaseButton-root Button-root Button-sizeMedium Button-colorMono Button-variantPlain UserStatusChange-button UserStatusChange-fullWidth"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText UserStatusChange-button UserStatusChange-fullWidth"
data-color="mono"
data-variant="plain"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -709,9 +709,9 @@ exports[`renders empty community 1`] = `
>
<button
aria-label="Search"
className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase UserTableFilter-adornment"
data-color="emphasis"
data-variant="adornment"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight UserTableFilter-adornment"
data-color="dark"
data-variant="regular"
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
@@ -859,10 +859,10 @@ exports[`renders empty community 1`] = `
data-testid="invite-users"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase InviteUsers-button"
data-color="default"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantFlat Button-uppercase InviteUsers-button"
data-color="dark"
data-testid="invite-users-button"
data-variant="filled"
data-variant="flat"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap
+6 -6
View File
@@ -104,10 +104,10 @@ exports[`renders configure advanced 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
data-color="default"
className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
data-color="alt"
data-testid="configure-sideBar-saveChanges"
data-variant="filled"
data-variant="regular"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
@@ -187,9 +187,9 @@ each of your site’s stories.
className="Box-root HorizontalGutter-root EmbedCode-copyArea HorizontalGutter-full"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase"
data-color="default"
data-variant="filled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
data-color="mono"
data-variant="flat"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap
+18 -18
View File
@@ -104,10 +104,10 @@ exports[`renders configure auth 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
data-color="default"
className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
data-color="alt"
data-testid="configure-sideBar-saveChanges"
data-variant="filled"
data-variant="regular"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
@@ -754,9 +754,9 @@ integration to register for a new account.
/>
</div>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
data-color="default"
data-variant="filled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
data-color="mono"
data-variant="flat"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -944,9 +944,9 @@ the remaining fields. You may also enter the information manually.
/>
</div>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
data-color="default"
data-variant="filled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular Button-uppercase Button-disabled"
data-color="regular"
data-variant="regular"
disabled={true}
id="configure-auth-oidc-discover"
onBlur={[Function]}
@@ -1302,9 +1302,9 @@ Invalid Date
</div>
</div>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase Button-disabled SSOKeyField-regenerateButton"
data-color="default"
data-variant="filled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorRegular Button-variantRegular Button-uppercase Button-disabled SSOKeyField-regenerateButton"
data-color="regular"
data-variant="regular"
disabled={true}
id="configure-auth-sso-regenerate"
onBlur={[Function]}
@@ -1535,9 +1535,9 @@ to create and set up a web application. For more information visit:
/>
</div>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
data-color="default"
data-variant="filled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
data-color="mono"
data-variant="flat"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -1855,9 +1855,9 @@ For more information visit:
/>
</div>
<button
className="BaseButton-root Button-root Button-sizeSmall Button-colorDefault Button-variantFilled Button-uppercase"
data-color="default"
data-variant="filled"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantFlat Button-uppercase"
data-color="mono"
data-variant="flat"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap
+3 -3
View File
@@ -104,10 +104,10 @@ exports[`renders configure general 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
data-color="default"
className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
data-color="alt"
data-testid="configure-sideBar-saveChanges"
data-variant="filled"
data-variant="regular"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap
+3 -3
View File
@@ -104,10 +104,10 @@ exports[`renders configure moderation 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
data-color="default"
className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
data-color="alt"
data-testid="configure-sideBar-saveChanges"
data-variant="filled"
data-variant="regular"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap
+3 -3
View File
@@ -104,10 +104,10 @@ exports[`renders configure organization 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
data-color="default"
className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
data-color="alt"
data-testid="configure-sideBar-saveChanges"
data-variant="filled"
data-variant="regular"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap
+3 -3
View File
@@ -104,10 +104,10 @@ exports[`renders configure wordList 1`] = `
className="Box-root HorizontalGutter-root HorizontalGutter-double"
>
<button
className="BaseButton-root Button-root Button-sizeMedium Button-colorDefault Button-variantFilled Button-uppercase Button-disabled"
data-color="default"
className="BaseButton-root Button-root Button-sizeLarge Button-colorAlt Button-variantRegular Button-uppercase Button-disabled"
data-color="alt"
data-testid="configure-sideBar-saveChanges"
data-variant="filled"
data-variant="regular"
disabled={true}
onBlur={[Function]}
onFocus={[Function]}
src/core/client/admin/test/moderate/__snapshots__/regularQueue.spec.tsx.snap
+14 -14
View File
@@ -170,9 +170,9 @@ exports[`approves comment in reported queue: dangling 1`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -423,9 +423,9 @@ exports[`rejects comment in reported queue: dangling 1`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -673,9 +673,9 @@ exports[`renders reported queue with comments 1`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -910,9 +910,9 @@ exports[`renders reported queue with comments 1`] = `
<button
aria-controls="uuid-1"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -1163,9 +1163,9 @@ exports[`renders reported queue with comments 2`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -1400,9 +1400,9 @@ exports[`renders reported queue with comments 2`] = `
<button
aria-controls="uuid-1"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -1661,9 +1661,9 @@ exports[`renders reported queue with comments and load more 1`] = `
<button
aria-controls="uuid-2"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/admin/test/moderate/__snapshots__/rejectedQueue.spec.tsx.snap
+8 -8
View File
@@ -170,9 +170,9 @@ exports[`approves comment in rejected queue: dangling 1`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -420,9 +420,9 @@ exports[`renders rejected queue with comments 1`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -657,9 +657,9 @@ exports[`renders rejected queue with comments 1`] = `
<button
aria-controls="uuid-1"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -913,9 +913,9 @@ exports[`renders rejected queue with comments and load more 1`] = `
<button
aria-controls="uuid-2"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/admin/test/moderate/__snapshots__/singleComment.spec.tsx.snap
+6 -6
View File
@@ -131,9 +131,9 @@ exports[`approves single comment 1`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -345,9 +345,9 @@ exports[`rejects single comment 1`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -594,9 +594,9 @@ exports[`renders single comment view 1`] = `
<button
aria-controls="uuid-0"
aria-expanded={false}
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantGhost Button-uppercase"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText Button-uppercase"
data-color="mono"
data-variant="ghost"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap
+14 -14
View File
@@ -46,9 +46,9 @@ exports[`renders empty stories 1`] = `
>
<button
aria-label="Search"
className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase StoryTableFilter-adornment"
data-color="emphasis"
data-variant="adornment"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight StoryTableFilter-adornment"
data-color="dark"
data-variant="regular"
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
@@ -202,9 +202,9 @@ exports[`renders empty stories 1`] = `
>
<button
aria-label="Change status"
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
data-color="mono"
data-variant="plain"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -273,9 +273,9 @@ exports[`renders empty stories 1`] = `
>
<button
aria-label="Change status"
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
data-color="mono"
data-variant="plain"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -365,9 +365,9 @@ exports[`renders stories 1`] = `
>
<button
aria-label="Search"
className="BaseButton-root Button-root Button-sizeMedium Button-colorEmphasis Button-variantAdornment Button-uppercase StoryTableFilter-adornment"
data-color="emphasis"
data-variant="adornment"
className="BaseButton-root Button-root Button-sizeRegular Button-colorDark Button-variantRegular Button-uppercase Button-adornmentRight StoryTableFilter-adornment"
data-color="dark"
data-variant="regular"
onBlur={[Function]}
onFocus={[Function]}
onMouseOut={[Function]}
@@ -521,9 +521,9 @@ exports[`renders stories 1`] = `
>
<button
aria-label="Change status"
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
data-color="mono"
data-variant="plain"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -592,9 +592,9 @@ exports[`renders stories 1`] = `
>
<button
aria-label="Change status"
className="BaseButton-root Button-root Button-sizeSmall Button-colorMono Button-variantPlain StoryStatusChange-button"
className="BaseButton-root Button-root Button-sizeRegular Button-colorMono Button-variantText StoryStatusChange-button"
data-color="mono"
data-variant="plain"
data-variant="text"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
src/core/client/framework/components/CopyButton.tsx
+2 -3
View File
@@ -7,7 +7,6 @@ import { PropTypesOf } from "coral-ui/types";
interface Props extends PropTypesOf<typeof Button> {
text: string;
size?: "small" | "medium" | "large";
}
interface State {
@@ -40,11 +39,11 @@ class CopyButton extends React.Component<Props> {
};
public render() {
const { text, size, ...rest } = this.props;
const { text, color, size, ...rest } = this.props;
const { copied } = this.state;
return (
<CopyToClipboard text={text} onCopy={this.handleCopy}>
<Button variant="filled" size={size || "small"} {...rest}>
<Button color={color || "mono"} variant="flat" {...rest}>
{copied ? (
<Localized id="framework-copyButton-copied">
<span>Copied!</span>
src/core/client/ui/components/v2/AppBar/AppBar.mdx
-2
View File
@@ -6,7 +6,6 @@ menu: UI Kit
import { Playground, PropsTable } from "docz";
import { AppBar, Begin, End, Navigation, NavigationItem, Divider } from "./";
import { Logo } from "../Brand";
import Flex from "../Flex";
import Icon from "../Icon";
import BaseButton from "../BaseButton";
@@ -18,7 +17,6 @@ import BaseButton from "../BaseButton";
<Playground>
<AppBar gutterBegin gutterEnd>
<Begin itemGutter="double">
<Logo />
<Navigation>
<NavigationItem active>Home</NavigationItem>
<NavigationItem>Team</NavigationItem>
src/core/client/ui/components/v2/Button/Button.css
+339 -359
View File
@@ -1,79 +1,109 @@
/* Design tokens */
$button-default-outline-background: var(--v2-colors-pure-white);
$button-default-outline-foreground: var(--v2-colors-teal-600);
$button-default-outline-active: var(--v2-colors-teal-500);
/* flat button */
$button-flat-regular-foreground: var(--v2-colors-teal-600);
$button-flat-mono-foreground: var(--v2-colors-grey-500);
$button-flat-alert-foreground: var(--v2-colors-red-500);
$button-flat-alt-foreground: var(--v2-colors-green-500);
$button-flat-dark-foreground: var(--v2-colors-blue-500);
$button-default-filled-background: var(--v2-colors-teal-600);
$button-default-filled-foreground: var(--v2-colors-pure-white);
$button-default-filled-hover: var(--v2-colors-teal-500);
$button-default-filled-active: var(--v2-colors-teal-400);
$button-flat-background: var(--v2-colors-pure-white);
$button-alert-outline-background: var(--v2-colors-pure-white);
$button-alert-outline-foreground: var(--v2-colors-red-500);
$button-alert-outline-active: var(--v2-colors-red-400);
$button-flat-regular-background-hover: var(--v2-colors-teal-100);
$button-flat-mono-background-hover: var(--v2-colors-grey-200);
$button-flat-alert-background-hover: var(--v2-colors-red-100);
$button-flat-alt-background-hover: var(--v2-colors-green-100);
$button-flat-dark-background-hover: var(--v2-colors-blue-100);
$button-alert-filled-background: var(--v2-colors-red-500);
$button-alert-filled-foreground: var(--v2-colors-pure-white);
$button-alert-filled-hover: var(--v2-colors-red-400);
$button-alert-filled-active: var(--v2-colors-red-300);
$button-flat-regular-background-active: var(--v2-colors-teal-200);
$button-flat-mono-background-active: var(--v2-colors-grey-300);
$button-flat-alert-background-active: var(--v2-colors-red-200);
$button-flat-alt-background-active: var(--v2-colors-green-200);
$button-flat-dark-background-active: var(--v2-colors-blue-200);
$button-emphasis-outline-background: var(--v2-colors-pure-white);
$button-emphasis-outline-foreground: var(--v2-colors-blue-500);
$button-emphasis-outline-active: var(--v2-colors-blue-400);
$button-flat-foreground-disabled: var(--v2-colors-grey-400);
$button-emphasis-filled-background: var(--v2-colors-blue-500);
$button-emphasis-filled-foreground: var(--v2-colors-pure-white);
$button-emphasis-filled-hover: var(--v2-colors-blue-400);
$button-emphasis-filled-active: var(--v2-colors-blue-300);
/* regular button */
$button-regular-foreground: var(--v2-colors-pure-white);
$button-mono-outline-background: var(--v2-colors-pure-white);
$button-mono-outline-foreground: var(--v2-colors-grey-600);
$button-mono-outline-active: var(--v2-colors-grey-500);
$button-regular-regular-background: var(--v2-colors-teal-600);
$button-regular-mono-background: var(--v2-colors-grey-500);
$button-regular-alert-background: var(--v2-colors-red-500);
$button-regular-alt-background: var(--v2-colors-green-500);
$button-regular-dark-background: var(--v2-colors-blue-500);
$button-mono-filled-background: var(--v2-colors-grey-600);
$button-mono-filled-foreground: var(--v2-colors-pure-white);
$button-mono-filled-hover: var(--v2-colors-grey-500);
$button-mono-filled-active: var(--v2-colors-grey-400);
$button-regular-regular-background-hover: var(--v2-colors-teal-700);
$button-regular-mono-background-hover: var(--v2-colors-grey-600);
$button-regular-alert-background-hover: var(--v2-colors-red-600);
$button-regular-alt-background-hover: var(--v2-colors-green-600);
$button-regular-dark-background-hover: var(--v2-colors-blue-600);
$button-adornment-foreground: var(--v2-colors-pure-white);
$button-regular-regular-background-active: var(--v2-colors-teal-800);
$button-regular-mono-background-active: var(--v2-colors-grey-700);
$button-regular-alert-background-active: var(--v2-colors-red-700);
$button-regular-alt-background-active: var(--v2-colors-green-700);
$button-regular-dark-background-active: var(--v2-colors-blue-700);
$button-adornment-default-background: var(--v2-colors-teal-600);
$button-adornment-alert-background: var(--v2-colors-red-500);
$button-adornment-emphasis-background: var(--v2-colors-blue-500);
$button-adornment-mono-background: var(--v2-colors-grey-600);
$button-regular-background-disabled: var(--v2-colors-grey-300);
$button-adornment-default-hover: var(--v2-colors-teal-500);
$button-adornment-alert-hover: var(--v2-colors-red-400);
$button-adornment-emphasis-hover: var(--v2-colors-blue-400);
$button-adornment-mono-hover: var(--v2-colors-grey-400);
/* outline button */
$button-outline-background: var(--v2-colors-pure-white);
$button-outline-background-disabled: var(--v2-colors-grey-300);
$button-outline-foreground-disabled: var(--v2-colors-pure-white);
$button-outline-foreground-hover: var(--v2-colors-pure-white);
$button-outline-foreground-active: var(--v2-colors-pure-white);
$button-adornment-default-active: var(--v2-colors-teal-400);
$button-adornment-alert-active: var(--v2-colors-red-300);
$button-adornment-emphasis-active: var(--v2-colors-blue-300);
$button-adornment-mono-active: var(--v2-colors-grey-300);
$button-outline-regular-foreground: var(--v2-colors-teal-600);
$button-outline-mono-foreground: var(--v2-colors-grey-500);
$button-outline-alert-foreground: var(--v2-colors-red-500);
$button-outline-alt-foreground: var(--v2-colors-green-500);
$button-outline-dark-foreground: var(--v2-colors-blue-500);
$button-ghost-default-foreground: var(--v2-colors-teal-600);
$button-ghost-alert-foreground: var(--v2-colors-red-500);
$button-ghost-emphasis-foreground: var(--v2-colors-blue-500);
$button-ghost-mono-foreground: var(--v2-colors-grey-600);
$button-outline-regular-border: var(--v2-colors-teal-600);
$button-outline-mono-border: var(--v2-colors-grey-500);
$button-outline-alert-border: var(--v2-colors-red-500);
$button-outline-alt-border: var(--v2-colors-green-500);
$button-outline-dark-border: var(--v2-colors-blue-500);
$button-ghost-active-foreground: var(--v2-colors-pure-white);
$button-outline-regular-background-hover: var(--v2-colors-teal-600);
$button-outline-mono-background-hover: var(--v2-colors-grey-500);
$button-outline-alert-background-hover: var(--v2-colors-red-500);
$button-outline-alt-background-hover: var(--v2-colors-green-500);
$button-outline-dark-background-hover: var(--v2-colors-blue-500);
$button-underlined-default-foreground: var(--v2-colors-teal-600);
$button-underlined-alert-foreground: var(--v2-colors-red-500);
$button-underlined-emphasis-foreground: var(--v2-colors-blue-500);
$button-underlined-mono-foreground: var(--v2-colors-grey-600);
$button-outline-regular-background-active: var(--v2-colors-teal-800);
$button-outline-mono-background-active: var(--v2-colors-grey-700);
$button-outline-alert-background-active: var(--v2-colors-red-700);
$button-outline-alt-background-active: var(--v2-colors-green-700);
$button-outline-dark-background-active: var(--v2-colors-blue-700);
$button-underlined-default-hover: var(--v2-colors-teal-500);
$button-underlined-alert-hover: var(--v2-colors-red-400);
$button-underlined-emphasis-hover: var(--v2-colors-blue-400);
$button-underlined-mono-hover: var(--v2-colors-grey-500);
$button-outline-regular-border-active: var(--v2-colors-teal-800);
$button-outline-mono-border-active: var(--v2-colors-grey-700);
$button-outline-alert-border-active: var(--v2-colors-red-700);
$button-outline-alt-border-active: var(--v2-colors-green-700);
$button-outline-dark-border-active: var(--v2-colors-blue-700);
$button-underlined-default-active: var(--v2-colors-teal-400);
$button-underlined-alert-active: var(--v2-colors-red-300);
$button-underlined-emphasis-active: var(--v2-colors-blue-300);
$button-underlined-mono-active: var(--v2-colors-grey-400);
/* text button */
$button-text-background: transparent;
$button-text-foreground-disabled: var(--v2-colors-pure-white);
$button-text-regular-foreground: var(--v2-colors-teal-600);
$button-text-mono-foreground: var(--v2-colors-grey-500);
$button-text-alert-foreground: var(--v2-colors-red-500);
$button-text-alt-foreground: var(--v2-colors-green-500);
$button-text-dark-foreground: var(--v2-colors-blue-500);
$button-text-regular-foreground-hover: var(--v2-colors-teal-700);
$button-text-mono-foreground-hover: var(--v2-colors-grey-600);
$button-text-alert-foreground-hover: var(--v2-colors-red-600);
$button-text-alt-foreground-hover: var(--v2-colors-green-600);
$button-text-dark-foreground-hover: var(--v2-colors-blue-600);
$button-text-regular-foreground-active: var(--v2-colors-teal-800);
$button-text-mono-foreground-active: var(--v2-colors-grey-700);
$button-text-alert-foreground-active: var(--v2-colors-red-700);
$button-text-alt-foreground-active: var(--v2-colors-green-700);
$button-text-dark-foreground-active: var(--v2-colors-blue-700);
/* Class Definitions */
@@ -85,7 +115,14 @@ $button-underlined-mono-active: var(--v2-colors-grey-400);
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 0px solid transparent;
border: 1px solid transparent;
letter-spacing: 0.042em;
transition: 0.2s ease-out background-color;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-bold);
line-height: var(--v2-line-height-reset);
& > * {
margin: 0 var(--v2-spacing-1) 0 0;
@@ -95,6 +132,24 @@ $button-underlined-mono-active: var(--v2-colors-grey-400);
& > *:last-child {
margin: 0;
}
&.iconLeft i {
padding-right: var(--v2-spacing-1);
}
&.iconRight i {
padding-left: var(--v2-spacing-1);
}
}
.adornmentLeft {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.adornmentRight {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.uppercase {
@@ -112,396 +167,321 @@ $button-underlined-mono-active: var(--v2-colors-grey-400);
box-sizing: border-box;
}
.sizeSmall {
color: $button-default-outline-foreground;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-bold);
font-size: var(--v2-font-size-2);
line-height: 1;
padding: var(--v2-spacing-1);
}
.sizeMedium {
color: $button-default-outline-foreground;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-size: var(--v2-font-size-2);
line-height: 1.28;
padding: var(--v2-spacing-3) var(--v2-spacing-5);
.sizeRegular {
font-size: var(--v2-font-size-1);
&:not(.variantText) {
padding: var(--v2-spacing-2) var(--v2-spacing-3);
&.iconLeft,
&.iconRight {
padding-left: var(--v2-spacing-2);
padding-right: var(--v2-spacing-2);
}
}
}
.sizeLarge {
color: $button-default-outline-foreground;
font-family: var(--v2-font-family-primary);
font-weight: var(--v2-font-weight-primary-semi-bold);
font-size: var(--v2-line-height-reset);
line-height: 1.25;
padding: var(--v2-spacing-4) var(--v2-spacing-6);
}
.variantDefault,
.variantPlain {
&.colorDefault {
color: $button-default-outline-foreground;
}
&.colorAlert {
color: $button-alert-outline-foreground;
}
&.colorEmphasis {
color: $button-emphasis-outline-foreground;
}
&.colorMono {
color: $button-mono-outline-foreground;
font-size: var(--v2-font-size-2);
&:not(.variantText) {
padding: var(--v2-spacing-3) var(--v2-spacing-5);
&.iconLeft,
&.iconRight {
padding-left: var(--v2-spacing-4);
padding-right: var(--v2-spacing-4);
}
}
}
.variantDefault {
border-width: 1px;
&.colorDefault {
border-color: $button-default-outline-foreground;
background-color: $button-default-outline-background;
}
&.colorAlert {
border-color: $button-alert-outline-foreground;
background-color: $button-alert-outline-background;
}
&.colorEmphasis {
border-color: $button-emphasis-outline-foreground;
background-color: $button-emphasis-outline-background;
}
&.colorMono {
border-color: $button-mono-outline-foreground;
background-color: $button-mono-outline-background;
.variantRegular {
color: $button-regular-foreground;
&:disabled,
&.disabled {
background-color: $button-regular-background-disabled;
}
&:not(.disabled) {
&.colorDefault {
&:not(.disabled),
&:not(:disabled) {
&.colorRegular {
background-color: $button-regular-regular-background;
&:hover,
&.mouseHover {
background-color: $button-default-outline-foreground;
color: $button-default-outline-background;
background-color: $button-regular-regular-background-hover;
}
&:active,
&.active {
color: $button-default-outline-background;
border-color: $button-default-outline-active;
background-color: $button-default-outline-active;
background-color: $button-regular-regular-background-active;
}
}
&.colorMono {
background-color: $button-regular-mono-background;
&:hover,
&.mouseHover {
background-color: $button-regular-mono-background-hover;
}
&:active,
&.active {
background-color: $button-regular-mono-background-active;
}
}
&.colorAlert {
background-color: $button-regular-alert-background;
&:hover,
&.mouseHover {
color: $button-alert-outline-background;
background-color: $button-alert-outline-foreground;
background-color: $button-regular-alert-background-hover;
}
&:active,
&.active {
color: $button-alert-outline-background;
border-color: $button-alert-outline-active;
background-color: $button-alert-outline-active;
background-color: $button-regular-alert-background-active;
}
}
&.colorEmphasis {
&.colorAlt {
background-color: $button-regular-alt-background;
&:hover,
&.mouseHover {
color: $button-emphasis-outline-background;
background-color: $button-emphasis-outline-foreground;
background-color: $button-regular-alt-background-hover;
}
&:active,
&.active {
border-color: $button-emphasis-outline-active;
background-color: $button-emphasis-outline-active;
color: $button-emphasis-outline-background;
background-color: $button-regular-alt-background-active;
}
}
&.colorDark {
background-color: $button-regular-dark-background;
&:hover,
&.mouseHover {
background-color: $button-regular-dark-background-hover;
}
&:active,
&.active {
background-color: $button-regular-dark-background-active;
}
}
}
}
.variantFlat {
background-color: $button-flat-background;
&:disabled,
&.disabled {
color: $button-flat-foreground-disabled;
}
&:not(.disabled),
&:not(:disabled) {
&.colorRegular {
color: $button-flat-regular-foreground;
&:hover,
&.mouseHover {
background-color: $button-flat-regular-background-hover;
}
&:active,
&.active {
background-color: $button-flat-regular-background-active;
}
}
&.colorMono {
color: $button-flat-mono-foreground;
&:hover,
&.mouseHover {
background-color: $button-mono-outline-foreground;
color: $button-mono-outline-background;
background-color: $button-flat-mono-background-hover;
}
&:active,
&.active {
border-color: $button-mono-outline-active;
background-color: $button-mono-outline-active;
color: $button-mono-outline-background;
}
}
}
}
.variantPlain {
padding: 0;
}
.variantFilled {
border-width: 1px;
&.colorDefault {
border-color: $button-default-filled-background;
color: $button-default-filled-foreground;
background-color: $button-default-filled-background;
}
&.colorAlert {
border-color: $button-alert-filled-background;
color: $button-alert-filled-foreground;
background-color: $button-alert-filled-background;
}
&.colorEmphasis {
border-color: $button-emphasis-filled-background;
color: $button-emphasis-filled-foreground;
background-color: $button-emphasis-filled-background;
}
&.colorMono {
border-color: $button-mono-filled-background;
color: $button-mono-filled-foreground;
background-color: $button-mono-filled-background;
}
&:not(.disabled) {
&.colorDefault {
&.mouseHover {
border-color: $button-default-filled-hover;
color: $button-default-filled-foreground;
background-color: $button-default-filled-hover;
}
&:active,
&.active {
border-color: $button-default-filled-active;
color: $button-default-filled-foreground;
background-color: $button-default-filled-active;
color: $button-flat-mono-background-active;
}
}
&.colorAlert {
color: $button-flat-alert-foreground;
&:hover,
&.mouseHover {
border-color: $button-alert-filled-hover;
color: $button-alert-filled-foreground;
background-color: $button-alert-filled-hover;
background-color: $button-flat-alert-background-hover;
}
&:active,
&.active {
border-color: $button-alert-filled-active;
color: $button-alert-filled-foreground;
background-color: $button-alert-filled-active;
background-color: $button-flat-alert-background-active;
}
}
&.colorEmphasis {
&.colorAlt {
color: $button-flat-alt-foreground;
&:hover,
&.mouseHover {
border-color: $button-emphasis-filled-hover;
color: $button-emphasis-filled-foreground;
background-color: $button-emphasis-filled-hover;
background-color: $button-flat-alt-background-hover;
}
&:active,
&.active {
border-color: $button-emphasis-filled-active;
color: $button-emphasis-filled-foreground;
background-color: $button-emphasis-filled-active;
background-color: $button-flat-alt-background-active;
}
}
&.colorMono {
&.colorDark {
color: $button-flat-dark-foreground;
&:hover,
&.mouseHover {
border-color: $button-mono-filled-hover;
color: $button-mono-filled-foreground;
background-color: $button-mono-filled-hover;
background-color: $button-flat-dark-background-hover;
}
&:active,
&.active {
border-color: $button-mono-filled-active;
color: $button-mono-filled-foreground;
background-color: $button-mono-filled-active;
background-color: $button-flat-dark-background-active;
}
}
}
}
.variantAdornment {
color: $button-adornment-foreground;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
&.colorDefault {
background-color: $button-adornment-default-background;
border-color: $button-adornment-default-background;
}
&.colorAlert {
background-color: $button-adornment-alert-background;
border-color: $button-adornment-alert-background;
}
&.colorEmphasis {
background-color: $button-adornment-emphasis-background;
border-color: $button-adornment-emphasis-background;
}
&.colorMono {
background-color: $button-adornment-mono-background;
border-color: $button-adornment-mono-background;
.variantOutline {
background-color: $button-outline-background;
&:disabled,
&.disabled {
color: $button-outline-foreground-disabled;
background-color: $button-outline-background-disabled;
}
&:not(.disabled) {
&.colorDefault {
&.mouseHover {
background-color: $button-adornment-default-hover;
border-color: $button-adornment-default-hover;
}
&:active,
&.active {
background-color: $button-adornment-default-active;
border-color: $button-adornment-default-active;
}
&:not(.disabled),
&:not(:disabled),
&:not(.mouseHover),
&:not(:hover),
&:not(.active),
&:not(:active) {
&.colorRegular {
color: $button-outline-regular-foreground;
border-color: $button-outline-regular-border;
}
&.colorMono {
color: $button-outline-mono-foreground;
border-color: $button-outline-mono-border;
}
&.colorAlert {
&.mouseHover {
background-color: $button-adornment-alert-hover;
border-color: $button-adornment-alert-hover;
color: $button-outline-alert-foreground;
border-color: $button-outline-alert-border;
}
&.colorAlt {
color: $button-outline-alt-foreground;
border-color: $button-outline-alt-border;
}
&.colorDark {
color: $button-outline-dark-foreground;
border-color: $button-outline-dark-border;
}
}
&:not(.disabled),
&:not(:disabled) {
&.mouseHover,
&:hover {
color: $button-outline-foreground-hover;
&.colorRegular {
background-color: $button-outline-regular-background-hover;
}
&:active,
&.active {
background-color: $button-adornment-alert-active;
border-color: $button-adornment-alert-active;
&.colorMono {
background-color: $button-outline-mono-background-hover;
}
&.colorAlert {
background-color: $button-outline-alert-background-hover;
}
&.colorAlt {
background-color: $button-outline-alt-background-hover;
}
&.colorDark {
background-color: $button-outline-dark-background-hover;
}
}
&.colorEmphasis {
&.mouseHover {
background-color: $button-adornment-emphasis-hover;
border-color: $button-adornment-emphasis-hover;
&.active,
&:active {
color: $button-outline-foreground-active;
&.colorRegular {
background-color: $button-outline-regular-background-active;
border-color: $button-outline-regular-border-active;
}
&:active,
&.active {
background-color: $button-adornment-emphasis-active;
border-color: $button-adornment-emphasis-active;
&.colorMono {
background-color: $button-outline-mono-background-active;
border-color: $button-outline-regular-border-active;
}
}
&.colorMono {
&.mouseHover {
background-color: $button-adornment-mono-hover;
border-color: $button-adornment-mono-hover;
&.colorAlert {
background-color: $button-outline-alert-background-active;
border-color: $button-outline-alert-border-active;
}
&:active,
&.active {
background-color: $button-adornment-mono-active;
border-color: $button-adornment-mono-active;
&.colorAlt {
background-color: $button-outline-alt-background-active;
border-color: $button-outline-alt-border-active;
}
&.colorDark {
background-color: $button-outline-dark-background-active;
border-color: $button-outline-dark-border-active;
}
}
}
}
.variantGhost {
border: 1px solid transparent;
&.colorDefault {
color: $button-ghost-default-foreground;
}
&.colorAlert {
color: $button-ghost-alert-foreground;
}
&.colorEmphasis {
color: $button-ghost-emphasis-foreground;
}
&.colorMono {
color: $button-ghost-mono-foreground;
.variantText {
background-color: $button-text-background;
&:disabled,
&.disabled {
color: $button-text-foreground-disabled;
}
&:not(.disabled) {
&.colorDefault {
&:not(.disabled),
&:not(:disabled) {
&.colorRegular {
color: $button-text-regular-foreground;
&:hover,
&.mouseHover {
border: 1px solid currentColor;
color: $button-text-regular-foreground-hover;
}
&:active,
&.active {
border: 1px solid currentColor;
color: $button-ghost-active-foreground;
background-color: $button-ghost-default-foreground;
color: $button-text-regular-foreground-active;
}
}
&.colorMono {
color: $button-text-mono-foreground;
&:hover,
&.mouseHover {
color: $button-text-mono-foreground-hover;
}
&:active,
&.active {
color: $button-text-mono-foreground-active;
}
}
&.colorAlt {
color: $button-text-alt-foreground;
&:hover,
&.mouseHover {
color: $button-text-alt-foreground-hover;
}
&:active,
&.active {
color: $button-text-alt-foreground-active;
}
}
&.colorAlert {
color: $button-text-alert-foreground;
&:hover,
&.mouseHover {
border: 1px solid currentColor;
color: $button-text-alert-foreground-hover;
}
&:active,
&.active {
border: 1px solid currentColor;
color: $button-ghost-active-foreground;
background-color: $button-ghost-alert-foreground;
color: $button-text-alert-foreground-active;
}
}
&.colorEmphasis {
&.colorDark {
color: $button-text-dark-foreground;
&:hover,
&.mouseHover {
border: 1px solid currentColor;
color: $button-text-dark-foreground-hover;
}
&:active,
&.active {
border: 1px solid currentColor;
color: $button-ghost-active-foreground;
background-color: $button-ghost-emphasis-foreground;
}
}
&.colorMono {
&.mouseHover {
border: 1px solid currentColor;
}
&:active,
&.active {
border: 1px solid currentColor;
color: $button-ghost-active-foreground;
background-color: $button-ghost-mono-foreground;
}
}
}
}
.variantUnderlined {
padding-right: 0px;
padding-left: 0px;
border-radius: 0;
border-bottom: 1px solid currentColor;
padding: 0;
&.colorDefault {
color: $button-underlined-default-foreground;
}
&.colorAlert {
color: $button-underlined-alert-foreground;
}
&.colorEmphasis {
color: $button-underlined-emphasis-foreground;
}
&.colorMono {
color: $button-underlined-mono-foreground;
}
&:not(.disabled) {
&.colorDefault {
&.mouseHover {
color: $button-underlined-default-hover;
}
&:active,
&.active {
color: $button-underlined-default-active;
}
}
&.colorAlert {
&.mouseHover {
color: $button-underlined-alert-hover;
}
&:active,
&.active {
color: $button-underlined-alert-active;
}
}
&.colorEmphasis {
&.mouseHover {
color: $button-underlined-emphasis-hover;
}
&:active,
&.active {
color: $button-underlined-emphasis-active;
}
}
&.colorMono {
&.mouseHover {
color: $button-underlined-mono-hover;
}
&:active,
&.active {
color: $button-underlined-mono-active;
color: $button-text-dark-foreground-active;
}
}
}
src/core/client/ui/components/v2/Button/Button.spec.tsx
+1 -1
View File
@@ -33,7 +33,7 @@ it("forwards ref", () => {
it("renders a medium sized, alert colored filled button with fullWidth", () => {
const props: PropTypesOf<typeof Button> = {
color: "alert",
variant: "filled",
variant: "regular",
fullWidth: true,
classes: {
colorAlert: "colorAlert",
src/core/client/ui/components/v2/Button/Button.tsx
+34 -22
View File
@@ -21,19 +21,25 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
classes: typeof styles & BaseButtonProps["classes"];
/** Size of the button */
size?: "small" | "medium" | "large";
size?: "regular" | "large";
/** Color of the button */
color?: "default" | "alert" | "emphasis" | "mono";
color?: "regular" | "alert" | "mono" | "alt" | "dark";
/** Variant of the button */
variant?:
| "default"
| "filled"
| "adornment"
| "ghost"
| "underlined"
| "plain";
variant?: "regular" | "flat" | "outline" | "text";
/* button is attached to the LEFT of an input element */
adornmentLeft?: boolean;
/* button is attached to the RIGHT of an input element */
adornmentRight?: boolean;
/* button has a ButtonIcon to the left of the text */
iconLeft?: boolean;
/* button has a ButtonIcon to the right of the text */
iconRight?: boolean;
/** If set renders a full width button */
fullWidth?: boolean;
@@ -52,9 +58,9 @@ interface Props extends Omit<BaseButtonProps, "ref"> {
export class Button extends React.Component<Props> {
public static defaultProps: Partial<Props> = {
size: "medium",
variant: "default",
color: "default",
size: "regular",
variant: "regular",
color: "regular",
uppercase: true,
};
public render() {
@@ -70,29 +76,35 @@ export class Button extends React.Component<Props> {
variant,
type,
uppercase,
iconLeft,
iconRight,
adornmentLeft,
adornmentRight,
...rest
} = this.props;
const rootClassName = cn(
classes.root,
{
[classes.sizeMedium]: size === "medium",
[classes.sizeSmall]: size === "small",
[classes.sizeRegular]: size === "regular",
[classes.sizeLarge]: size === "large",
[classes.colorDefault]: color === "default",
[classes.colorRegular]: color === "regular",
[classes.colorAlert]: color === "alert",
[classes.colorEmphasis]: color === "emphasis",
[classes.colorAlt]: color === "alt",
[classes.colorMono]: color === "mono",
[classes.variantDefault]: variant === "default",
[classes.variantFilled]: variant === "filled",
[classes.variantAdornment]: variant === "adornment",
[classes.variantGhost]: variant === "ghost",
[classes.variantUnderlined]: variant === "underlined",
[classes.variantPlain]: variant === "plain",
[classes.colorDark]: color === "dark",
[classes.variantRegular]: variant === "regular",
[classes.variantFlat]: variant === "flat",
[classes.variantOutline]: variant === "outline",
[classes.variantText]: variant === "text",
[classes.uppercase]: uppercase,
[classes.fullWidth]: fullWidth,
[classes.active]: active,
[classes.disabled]: disabled,
[classes.iconLeft]: iconLeft,
[classes.iconRight]: iconRight,
[classes.adornmentLeft]: adornmentLeft,
[classes.adornmentRight]: adornmentRight,
},
className
);
src/core/client/ui/components/v2/Button/ButtonIcon.css
-6
View File
@@ -1,8 +1,2 @@
.root {
&:first-child {
margin-left: -4px;
}
&:last-child {
margin-right: -4px;
}
}
src/core/client/ui/components/v2/Button/__snapshots__/Button.spec.tsx.snap
+8 -8
View File
@@ -4,8 +4,8 @@ exports[`forwards ref 1`] = `
<ForwardRef(forwardRef)
className=""
classes={Object {}}
data-color="default"
data-variant="default"
data-color="regular"
data-variant="regular"
>
Push me
</ForwardRef(forwardRef)>
@@ -13,10 +13,10 @@ exports[`forwards ref 1`] = `
exports[`renders a medium sized, alert colored filled button with fullWidth 1`] = `
<ForwardRef(forwardRef)
className="sizeMedium colorAlert variantFilled fullWidth"
className="colorAlert fullWidth"
classes={Object {}}
data-color="alert"
data-variant="filled"
data-variant="regular"
>
Push me
</ForwardRef(forwardRef)>
@@ -27,8 +27,8 @@ exports[`renders active state 1`] = `
className="active"
classes={Object {}}
data-active={true}
data-color="default"
data-variant="default"
data-color="regular"
data-variant="regular"
>
Push me
</ForwardRef(forwardRef)>
@@ -43,8 +43,8 @@ exports[`renders correctly 1`] = `
"mouseHover": "mouseHover",
}
}
data-color="default"
data-variant="default"
data-color="regular"
data-variant="regular"
>
Push me
</ForwardRef(forwardRef)>
src/core/client/ui/components/v2/Modal/Modal.mdx
+2 -3
View File
@@ -8,7 +8,6 @@ import { useState, useCallback } from "react";
import Button from "../Button";
import Card, { CardCloseButton } from "../Card";
import Typography from "../Typography";
import Flex from "../Flex";
import HorizontalGutter from "../HorizontalGutter";
import Modal from "./Modal";
@@ -35,9 +34,9 @@ import styles from "./Modal.mdx.css";
<CardCloseButton onClick={hide} ref={firstFocusableRef} />
<HorizontalGutter size="double">
<HorizontalGutter>
<Typography variant="header2" id="modal-title">
<h2 id="modal-title">
Are you sure you want to ban <strong>ButFirstCoffee</strong>?
</Typography>
</h2>
<Typography>
Once banned, this user will no longer be able to comment,
use reactions, or report comments.
src/core/client/ui/components/v2/Popover/Popover.mdx
+4 -5
View File
@@ -7,7 +7,6 @@ import { Playground } from "docz";
import Popover from "./Popover";
import Button from "../Button";
import Flex from "../Flex";
import Typography from "../Typography";
import ButtonIcon from "../Button/ButtonIcon";
import BaseButton from "../BaseButton";
import ClickOutside from "../ClickOutside";
@@ -22,7 +21,7 @@ import Icon from "../Icon";
<Playground>
<Popover
id="my-popover-1"
body={() => <Typography p={2}>This is the body</Typography>}
body={() => <h2>This is the body</h2>}
>
{({ toggleVisibility, ref }) => (
<Button
@@ -45,7 +44,7 @@ import Icon from "../Icon";
placement="top"
body={({ toggleVisibility }) => (
<Flex itemGutter="half">
<Typography p={2}>This is the body</Typography>
<h2>This is the body</h2>
<Button onClick={toggleVisibility} size="small">
<ButtonIcon>close</ButtonIcon>
</Button>
@@ -72,9 +71,9 @@ import Icon from "../Icon";
id="my-popover-1"
body={({ toggleVisibility }) => (
<ClickOutside onClickOutside={toggleVisibility}>
<Typography color="textLight" p={2}>
<h2>
I am a Tooltip
</Typography>
</h2>
</ClickOutside>
)}
dark
src/core/client/ui/theme/variables2.ts
+1 -1
View File
@@ -314,7 +314,7 @@ const variables2 = {
8: "60px",
9: "84px",
},
roundCorners: "2px",
roundCorners: "3px",
};
export default variables2;