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

* 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
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
{
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -144,7 +144,7 @@ const UserStatusChange: FunctionComponent<Props> = ({
ref={ref}
color="mono"
uppercase={false}
variant="plain"
variant="text"
>
{children}
{
@@ -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}
@@ -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>
@@ -58,7 +58,8 @@ const UserRow: FunctionComponent<Props> = ({
)}
{!deletedAt && (
<Button
variant="plain"
variant="text"
color="mono"
uppercase={false}
onClick={usernameClicked}
className={styles.usernameButton}
@@ -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>
@@ -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
@@ -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>
);
@@ -178,8 +178,6 @@ const OIDCConfig: FunctionComponent<Props> = ({
/>
<Button
id="configure-auth-oidc-discover"
variant="filled"
size="small"
disabled={disabledInside || disableForDiscover}
onClick={onDiscover}
>
@@ -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>
);
@@ -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}
@@ -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)}
@@ -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>
@@ -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>
@@ -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>
@@ -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>
{
@@ -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>
@@ -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]}
@@ -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 sites 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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}
@@ -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]}