diff --git a/client/branded/src/global-styles/badge.scss b/client/branded/src/global-styles/badge.scss deleted file mode 100644 index 9269e4f7e7b..00000000000 --- a/client/branded/src/global-styles/badge.scss +++ /dev/null @@ -1,164 +0,0 @@ -@import 'bootstrap/scss/badge'; - -// Light theme badge variants -:where(.theme-light) { - @each $color, $value in $theme-colors { - .badge-#{$color}, - :where(a).badge-#{$color} { - @include badge-variant($value); - } - } -} - -:root { - --badge-font-size: 0.75rem; - --badge-font-weight: 500; - --badge-padding-y: 0.125rem; - --badge-padding-x: 0.375rem; - --badge-border-radius: 3px; -} - -.badge { - background-color: var(--subtle-bg); - color: var(--link-color); - border: none; - line-height: 1rem; - - &:focus, - &.focus { - outline: 0; - } -} - -.badge-sm { - --badge-font-size: #{(11/16)}rem; - --badge-padding-y: 0; - --badge-padding-x: 0.25rem; - --badge-border-radius: 2px; -} - -a.badge { - // Badge acts like btn-link, replicate Bootstrap btn transition - transition: $btn-transition; -} - -// Variants -.badge-primary, -.badge-secondary, -.badge-success, -.badge-danger, -.badge-info, -.badge-warning, -.badge-merged, -.badge-outline-secondary { - background-color: var(--badge-base); - color: var(--badge-text); - border: var(--badge-border, none); - - @at-root #{selector-unify('a', &)} { - background-color: var(--badge-base); - color: var(--badge-text); - - &:hover, - &:focus, - &.focus { - color: var(--badge-text); - background-color: var(--badge-dark); - } - - &:focus, - &.focus { - outline: 0; - - @at-root #{selector-append('.theme-light', &)} { - box-shadow: 0 0 0 0.125rem var(--badge-light); - } - @at-root #{selector-append('.theme-dark', &)} { - box-shadow: 0 0 0 0.125rem var(--badge-dark); - } - } - } -} - -.badge-primary { - --badge-base: var(--primary); - --badge-light: var(--primary-2); - --badge-dark: var(--primary-3); - --badge-text: var(--light-text); -} - -.badge-secondary { - --badge-base: var(--secondary); - --badge-light: var(--secondary-2); - --badge-dark: var(--secondary-3); - --badge-text: var(--body-color); -} - -.badge-success { - --badge-base: var(--success); - --badge-light: var(--success-2); - --badge-dark: var(--success-3); - --badge-text: var(--light-text); -} - -.badge-danger { - --badge-base: var(--danger); - --badge-light: var(--danger-2); - --badge-dark: var(--danger-3); - --badge-text: var(--light-text); -} - -.badge-info { - --badge-base: var(--info); - --badge-light: var(--info-2); - --badge-dark: var(--info-3); - --badge-text: var(--dark-text); -} - -.badge-warning { - --badge-base: var(--warning); - --badge-light: var(--warning-2); - --badge-dark: var(--warning-3); - --badge-text: var(--dark-text); -} - -.badge-merged { - --badge-base: var(--merged); - --badge-light: var(--merged-2); - --badge-dark: var(--merged-3); - --badge-text: var(--light-text); -} - -.badge-outline-secondary { - --badge-base: transparent; - --badge-light: var(--secondary-2); - --badge-dark: var(--secondary-3); - --badge-text: var(--text-muted); - --badge-border: 1px solid var(--secondary); -} - -.theme-light, -.theme-dark { - // Update secondary text color and focus state for better contrast - a.badge-secondary, - a.badge-outline-secondary { - &:focus, - &.focus { - box-shadow: var(--focus-box-shadow); - } - } - a.badge-secondary { - &:hover, - &:focus, - &.focus { - color: var(--body-color); - } - } - a.badge-outline-secondary { - &:hover, - &:focus, - &.focus { - background-color: var(--color-bg-1); - } - } -} diff --git a/client/branded/src/global-styles/index.scss b/client/branded/src/global-styles/index.scss index f58da564562..e1d2ba789e1 100644 --- a/client/branded/src/global-styles/index.scss +++ b/client/branded/src/global-styles/index.scss @@ -26,14 +26,6 @@ $border-color: var(--border-color); $link-color: var(--link-color); $link-hover-color: var(--link-hover-color); -// Badges - -$badge-font-size: var(--badge-font-size); -$badge-font-weight: var(--badge-font-weight); -$badge-padding-y: var(--badge-padding-y); -$badge-padding-x: var(--badge-padding-x); -$badge-border-radius: var(--badge-border-radius); - // Tooltips $tooltip-bg: var(--tooltip-bg); @@ -104,7 +96,6 @@ $hr-margin-y: 0.25rem; // Disable transitions $input-transition: none; -$badge-transition: none; // Avoids setting transitions on badges that aren't links // Spacer $spacer: 1rem; @@ -139,7 +130,6 @@ $spacer: 1rem; @import 'wildcard/src/global-styles/breakpoints'; @import 'shared/src/global-styles/icons'; @import './background'; -@import './badge'; @import './card'; @import './dropdown'; @import './modal'; diff --git a/client/browser/src/shared/code-hosts/shared/codeHost.tsx b/client/browser/src/shared/code-hosts/shared/codeHost.tsx index f21fcba9e7a..b53d80f7794 100644 --- a/client/browser/src/shared/code-hosts/shared/codeHost.tsx +++ b/client/browser/src/shared/code-hosts/shared/codeHost.tsx @@ -518,7 +518,7 @@ function initCodeIntelligence({ location={H.createLocation(window.location)} onCloseButtonClick={this.nextCloseButtonClick} onAlertDismissed={onHoverAlertDismissed} - isBranded={true} + useBrandedLogo={true} /> ) : null } diff --git a/client/eslint-plugin-wildcard/lib/index.js b/client/eslint-plugin-wildcard/lib/index.js index 18b305d18fb..56d6a3d58d3 100644 --- a/client/eslint-plugin-wildcard/lib/index.js +++ b/client/eslint-plugin-wildcard/lib/index.js @@ -27,7 +27,7 @@ module.exports = { }, ], '@sourcegraph/wildcard/forbid-class-name': [ - 'off', // Current disabled until first `` component is migrated: https://github.com/sourcegraph/sourcegraph/issues/27622 + 'error', { forbid: [ { diff --git a/client/eslint-plugin-wildcard/lib/rules/forbid-class-name.js b/client/eslint-plugin-wildcard/lib/rules/forbid-class-name.js index 806c0cb31a9..711eccd560f 100644 --- a/client/eslint-plugin-wildcard/lib/rules/forbid-class-name.js +++ b/client/eslint-plugin-wildcard/lib/rules/forbid-class-name.js @@ -20,7 +20,7 @@ const config = { const extractStringLiteral = attributeNode => { if (attributeNode.type === 'JSXExpressionContainer') { return attributeNode.expression.arguments - .filter(argument => argument.type === 'Literal') + ?.filter(argument => argument.type === 'Literal') .flatMap(argument => argument.value.split(' ')) } diff --git a/client/shared/src/components/FileMatch.tsx b/client/shared/src/components/FileMatch.tsx index 4b93a5aa992..a3a41aba898 100644 --- a/client/shared/src/components/FileMatch.tsx +++ b/client/shared/src/components/FileMatch.tsx @@ -1,7 +1,9 @@ import * as H from 'history' import React, { useMemo } from 'react' import { Observable } from 'rxjs' -import { AggregableBadge, Badge } from 'sourcegraph' +import { AggregableBadge, Badge as ExtensionBadgeType } from 'sourcegraph' + +import { Badge } from '@sourcegraph/wildcard' import { ContentMatch, SymbolMatch, PathMatch, getFileMatchUrl, getRepositoryUrl, getRevision } from '../search/stream' import { isSettingsValid, SettingsCascadeProps } from '../settings/settings' @@ -11,14 +13,13 @@ import { pluralize } from '../util/strings' import { FetchFileParameters } from './CodeExcerpt' import { FileMatchChildren } from './FileMatchChildren' import { MatchGroup, calculateMatchGroups } from './FileMatchContext' -import { LinkOrSpan } from './LinkOrSpan' import { RepoFileLink } from './RepoFileLink' import { RepoIcon } from './RepoIcon' import { Props as ResultContainerProps, ResultContainer } from './ResultContainer' const SUBSET_MATCHES_COUNT = 10 -export interface MatchItem extends Badge { +export interface MatchItem extends ExtensionBadgeType { highlightRanges: { start: number highlightLength: number @@ -134,16 +135,16 @@ export const FileMatch: React.FunctionComponent = props => { items.length > 0 ? ( <> {aggregateBadges(items).map(badge => ( - {badge.text} - + ))} ) : undefined diff --git a/client/shared/src/hover/HoverOverlay.story.tsx b/client/shared/src/hover/HoverOverlay.story.tsx index 37a45b1b082..1f6b6106639 100644 --- a/client/shared/src/hover/HoverOverlay.story.tsx +++ b/client/shared/src/hover/HoverOverlay.story.tsx @@ -56,4 +56,4 @@ export const BitbucketStyles: Story = props => ( ) BitbucketStyles.storyName = 'Bitbucket styles' -export const Branded: Story = () => +export const Branded: Story = () => diff --git a/client/shared/src/hover/HoverOverlay.tsx b/client/shared/src/hover/HoverOverlay.tsx index 4aca9868d4a..67486ce769f 100644 --- a/client/shared/src/hover/HoverOverlay.tsx +++ b/client/shared/src/hover/HoverOverlay.tsx @@ -54,7 +54,12 @@ export interface HoverOverlayProps hoverRef?: React.Ref /** Called when the close button is clicked */ onCloseButtonClick?: (event: MouseEvent) => void - isBranded?: boolean + + /** Show Sourcegraph logo alongside prompt */ + useBrandedLogo?: boolean + + /** Show Sourcegraph branded badges */ + useBrandedBadge?: boolean } const getOverlayStyle = (overlayPosition: HoverOverlayProps['overlayPosition']): CSSProperties => @@ -94,7 +99,8 @@ export const HoverOverlay: React.FunctionComponent = props => onAlertDismissed, onCloseButtonClick, - isBranded, + useBrandedLogo, + useBrandedBadge, } = props useLogTelemetryEvent(props) @@ -136,6 +142,7 @@ export const HoverOverlay: React.FunctionComponent = props => = props => ))} - {isBranded && } + {useBrandedLogo && } )} diff --git a/client/shared/src/hover/HoverOverlayContents/HoverOverlayContent/HoverOverlayContent.tsx b/client/shared/src/hover/HoverOverlayContents/HoverOverlayContent/HoverOverlayContent.tsx index c53b3ed568f..249ba254733 100644 --- a/client/shared/src/hover/HoverOverlayContents/HoverOverlayContent/HoverOverlayContent.tsx +++ b/client/shared/src/hover/HoverOverlayContents/HoverOverlayContent/HoverOverlayContent.tsx @@ -2,8 +2,9 @@ import classNames from 'classnames' import { upperFirst } from 'lodash' import React from 'react' +import { Badge } from '@sourcegraph/wildcard' + import { HoverMerged } from '../../../api/client/types/hover' -import { LinkOrSpan } from '../../../components/LinkOrSpan' import { asError } from '../../../util/errors' import { renderMarkdown } from '../../../util/markdown' import hoverOverlayStyle from '../../HoverOverlay.module.scss' @@ -15,6 +16,14 @@ interface HoverOverlayContentProps { content: HoverMerged['contents'][number] aggregatedBadges: HoverMerged['aggregatedBadges'] index: number + /** + * Use our branded badge. For use in Sourcegraph branded applications. + */ + useBrandedBadge?: boolean + /** + * Allows custom styles + * Primarily used to inherit different styles for use on a code host. + */ badgeClassName?: string errorAlertClassName?: string contentClassName?: string @@ -29,7 +38,7 @@ function tryMarkdownRender(content: string): string | Error { } export const HoverOverlayContent: React.FunctionComponent = props => { - const { content, aggregatedBadges = [], index, errorAlertClassName, badgeClassName } = props + const { content, aggregatedBadges = [], index, errorAlertClassName, badgeClassName, useBrandedBadge } = props if (content.kind !== 'markdown') { return ( @@ -57,15 +66,18 @@ export const HoverOverlayContent: React.FunctionComponent} {aggregatedBadges.map(({ text, linkURL, hoverMessage }) => ( - {text} - + ))} { iconClassName?: string + useBrandedBadge?: boolean badgeClassName?: string errorAlertClassName?: string contentClassName?: string } export const HoverOverlayContents: React.FunctionComponent = props => { - const { hoverOrError, iconClassName, errorAlertClassName, badgeClassName, contentClassName } = props + const { + hoverOrError, + iconClassName, + errorAlertClassName, + badgeClassName, + useBrandedBadge, + contentClassName, + } = props if (hoverOrError === 'loading') { return ( @@ -56,6 +64,7 @@ export const HoverOverlayContents: React.FunctionComponent diff --git a/client/web/src/auth/CloudSignUpPage.tsx b/client/web/src/auth/CloudSignUpPage.tsx index 49bd022b210..7a03d40a809 100644 --- a/client/web/src/auth/CloudSignUpPage.tsx +++ b/client/web/src/auth/CloudSignUpPage.tsx @@ -5,6 +5,7 @@ import { Link, useLocation } from 'react-router-dom' import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService' import { ThemeProps } from '@sourcegraph/shared/src/theme' +import { ProductStatusBadge } from '@sourcegraph/wildcard' import { BrandLogo } from '../components/branding/BrandLogo' import { FeatureFlagProps } from '../featureFlags/featureFlags' @@ -161,7 +162,7 @@ export const CloudSignUpPage: React.FunctionComponent = ({
  • - Beta Search across all + Search across all your public and private repositories
    • diff --git a/client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap b/client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap index a5c21f415f7..fe10bb0af76 100644 --- a/client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap +++ b/client/web/src/auth/__snapshots__/SignUpPage.test.tsx.snap @@ -55,9 +55,10 @@ exports[`SignUpPage renders sign up page (cloud) 1`] = ` class="d-flex align-items-center" > - Beta + beta Search across all your public and private repositories diff --git a/client/web/src/batches/RepoBatchChangesButton.tsx b/client/web/src/batches/RepoBatchChangesButton.tsx index 95afa8f8954..f4c76766d19 100644 --- a/client/web/src/batches/RepoBatchChangesButton.tsx +++ b/client/web/src/batches/RepoBatchChangesButton.tsx @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom' import { encodeURIPathComponent } from '@sourcegraph/shared/src/util/url' import { useObservable } from '@sourcegraph/shared/src/util/useObservable' +import { Badge } from '@sourcegraph/wildcard' import { queryRepoChangesetsStats as _queryRepoChangesetsStats } from './backend' import { BatchChangesIcon } from './icons' @@ -33,20 +34,22 @@ export const RepoBatchChangesButton: FC = ({ Batch Changes {open > 0 && ( - {open} - + )} {merged > 0 && ( - {merged} - + )} ) diff --git a/client/web/src/components/WebHoverOverlay/WebHoverOverlay.tsx b/client/web/src/components/WebHoverOverlay/WebHoverOverlay.tsx index 86407e021d3..ce97ad2a012 100644 --- a/client/web/src/components/WebHoverOverlay/WebHoverOverlay.tsx +++ b/client/web/src/components/WebHoverOverlay/WebHoverOverlay.tsx @@ -53,10 +53,10 @@ export const WebHoverOverlay: React.FunctionComponent diff --git a/client/web/src/components/diff/FileDiffNode.tsx b/client/web/src/components/diff/FileDiffNode.tsx index 34b9286f993..e809798fd35 100644 --- a/client/web/src/components/diff/FileDiffNode.tsx +++ b/client/web/src/components/diff/FileDiffNode.tsx @@ -9,6 +9,7 @@ import { Observable } from 'rxjs' import { ViewerId } from '@sourcegraph/shared/src/api/viewerTypes' import { Link } from '@sourcegraph/shared/src/components/Link' import { ThemeProps } from '@sourcegraph/shared/src/theme' +import { Badge } from '@sourcegraph/wildcard' import { FileDiffFields } from '../../graphql-operations' import { DiffMode } from '../../repo/commit/RepositoryCommitPage' @@ -107,12 +108,20 @@ export const FileDiffNode: React.FunctionComponent = ({ )}
    - {!node.oldPath && Added} - {!node.newPath && Deleted} + {!node.oldPath && ( + + Added + + )} + {!node.newPath && ( + + Deleted + + )} {node.newPath && node.oldPath && node.newPath !== node.oldPath && ( - + {dirname(node.newPath) !== dirname(node.oldPath) ? 'Moved' : 'Renamed'} - + )} {stat} diff --git a/client/web/src/enterprise/batches/DropdownButton.tsx b/client/web/src/enterprise/batches/DropdownButton.tsx index 87621c14969..f1a2d597047 100644 --- a/client/web/src/enterprise/batches/DropdownButton.tsx +++ b/client/web/src/enterprise/batches/DropdownButton.tsx @@ -1,6 +1,8 @@ import classNames from 'classnames' import React, { useCallback, useEffect, useMemo, useState } from 'react' +import { ProductStatusBadge } from '@sourcegraph/wildcard' + import styles from './DropdownButton.module.scss' export interface Action { @@ -181,7 +183,7 @@ const DropdownItem: React.FunctionComponent = ({ action, setS {action.experimental && ( <> {' '} - Experimental + )} diff --git a/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx b/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx index 307ff6f785e..ea073cde489 100644 --- a/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx +++ b/client/web/src/enterprise/batches/detail/BatchChangeDetailsTabs.tsx @@ -10,7 +10,7 @@ import { ExtensionsControllerProps } from '@sourcegraph/shared/src/extensions/co import { PlatformContextProps } from '@sourcegraph/shared/src/platform/context' import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService' import { ThemeProps } from '@sourcegraph/shared/src/theme' -import { Container } from '@sourcegraph/wildcard' +import { Badge, Container } from '@sourcegraph/wildcard' import { BatchChangeFields } from '../../../graphql-operations' import { @@ -82,9 +82,9 @@ export const BatchChangeDetailsTabs: React.FunctionComponent Changesets {' '} - + {batchChange.changesetsStats.total - batchChange.changesetsStats.archived} - + @@ -109,9 +109,9 @@ export const BatchChangeDetailsTabs: React.FunctionComponent Archived {' '} - + {batchChange.changesetsStats.archived} - + @@ -120,9 +120,9 @@ export const BatchChangeDetailsTabs: React.FunctionComponent Bulk operations {' '} - + {batchChange.bulkOperations.totalCount} - + diff --git a/client/web/src/enterprise/batches/detail/BatchChangeStateBadge.tsx b/client/web/src/enterprise/batches/detail/BatchChangeStateBadge.tsx index 1df080bce20..30683c074ac 100644 --- a/client/web/src/enterprise/batches/detail/BatchChangeStateBadge.tsx +++ b/client/web/src/enterprise/batches/detail/BatchChangeStateBadge.tsx @@ -1,12 +1,22 @@ import classNames from 'classnames' import React from 'react' +import { Badge } from '@sourcegraph/wildcard' + export const BatchChangeStateBadge: React.FunctionComponent<{ isClosed: boolean; className?: string }> = ({ isClosed, className, }) => { if (isClosed) { - return Closed + return ( + + Closed + + ) } - return Open + return ( + + Open + + ) } diff --git a/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.tsx b/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.tsx index 19d401c5b55..0dc1de7db38 100644 --- a/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.tsx +++ b/client/web/src/enterprise/batches/detail/BatchChangeStatsCard.tsx @@ -4,6 +4,7 @@ import ProgressCheckIcon from 'mdi-react/ProgressCheckIcon' import React from 'react' import { pluralize } from '@sourcegraph/shared/src/util/strings' +import { Badge } from '@sourcegraph/wildcard' import { DiffStatStack } from '../../../components/diff/DiffStat' import { BatchChangeFields, ChangesetsStatsFields, DiffStatFields } from '../../../graphql-operations' @@ -105,7 +106,9 @@ export const BatchChangeStatsTotalAction: React.FunctionComponent<{ count: numbe )} > - {count} + + {count} + {pluralize('Changeset', count)}
    diff --git a/client/web/src/enterprise/batches/detail/bulk-operations/BulkOperationNode.tsx b/client/web/src/enterprise/batches/detail/bulk-operations/BulkOperationNode.tsx index a78850d40ba..a251f23a59a 100644 --- a/client/web/src/enterprise/batches/detail/bulk-operations/BulkOperationNode.tsx +++ b/client/web/src/enterprise/batches/detail/bulk-operations/BulkOperationNode.tsx @@ -11,6 +11,7 @@ import { Link } from '@sourcegraph/shared/src/components/Link' import { LinkOrSpan } from '@sourcegraph/shared/src/components/LinkOrSpan' import { BulkOperationState, BulkOperationType } from '@sourcegraph/shared/src/graphql-operations' import { pluralize } from '@sourcegraph/shared/src/util/strings' +import { Badge } from '@sourcegraph/wildcard' import { ErrorMessage } from '../../../../components/alerts' import { Collapsible } from '../../../../components/Collapsible' @@ -65,7 +66,9 @@ export const BulkOperationNode: React.FunctionComponent )} >
    -

    {node.changesetCount}

    + + {node.changesetCount} +

    {pluralize('changeset', node.changesetCount)}

    @@ -82,10 +85,14 @@ export const BulkOperationNode: React.FunctionComponent
    )} {node.state === BulkOperationState.FAILED && ( - failed + + failed + )} {node.state === BulkOperationState.COMPLETED && ( - complete + + complete + )} {node.errors.length > 0 && ( diff --git a/client/web/src/enterprise/batches/detail/changesets/ChangesetLabel.tsx b/client/web/src/enterprise/batches/detail/changesets/ChangesetLabel.tsx index c8e722c7ea5..dfa33132412 100644 --- a/client/web/src/enterprise/batches/detail/changesets/ChangesetLabel.tsx +++ b/client/web/src/enterprise/batches/detail/changesets/ChangesetLabel.tsx @@ -1,6 +1,8 @@ import classNames from 'classnames' import React from 'react' +import { Badge } from '@sourcegraph/wildcard' + import { ChangesetLabelFields } from '../../../../graphql-operations' import styles from './ChangesetLabel.module.scss' @@ -28,16 +30,13 @@ export const ChangesetLabel: React.FunctionComponent = ({ label }) => { const labelBrightness = colorBrightness(label.color) return ( - {label.text} - + ) } diff --git a/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetInfoCell.tsx b/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetInfoCell.tsx index 76bfb65c493..05a1f27d1ff 100644 --- a/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetInfoCell.tsx +++ b/client/web/src/enterprise/batches/detail/changesets/ExternalChangesetInfoCell.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames' import React from 'react' import { Link } from '@sourcegraph/shared/src/components/Link' +import { Badge } from '@sourcegraph/wildcard' import { ExternalChangesetFields, ChangesetState } from '../../../../graphql-operations' @@ -53,7 +54,9 @@ export const ExternalChangesetInfoCell: React.FunctionComponent{' '} {hasHeadReference(node) && (
    - {headReference(node)} + + {headReference(node)} +
    )} diff --git a/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx b/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx index 1b1d0442193..dc3d2c3256b 100644 --- a/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx +++ b/client/web/src/enterprise/batches/execution/BatchSpecExecutionDetailsPage.tsx @@ -34,7 +34,7 @@ import { } from '@sourcegraph/web/src/components/FilteredConnection' import { LogOutput } from '@sourcegraph/web/src/components/LogOutput' import { Timeline, TimelineStage } from '@sourcegraph/web/src/components/Timeline' -import { Container, PageHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@sourcegraph/wildcard' +import { Badge, Container, PageHeader, Tab, TabList, TabPanel, TabPanels, Tabs } from '@sourcegraph/wildcard' import { BatchChangesIcon } from '../../../batches/icons' import { ErrorAlert } from '../../../components/alerts' @@ -324,7 +324,7 @@ const WorkspaceNode: React.FunctionComponent = ({ node, sele {/* Only display the branch if it's not the default branch. */} {node.repository.defaultBranch?.abbrevName !== node.branch.abbrevName && ( - {node.branch.abbrevName} + {node.branch.abbrevName} )} @@ -495,8 +495,8 @@ const ChangesetSpecNode: React.FunctionComponent<{ node: BatchSpecWorkspaceChang {node.description.baseRepository.name}

    - {node.description.baseRef} ← - {node.description.headRef} + {node.description.baseRef} ← + {node.description.headRef}

    Published: @@ -897,10 +897,10 @@ const BatchSpecStateBadge: React.FunctionComponent<{ state: BatchSpecState }> = case BatchSpecState.PROCESSING: case BatchSpecState.CANCELED: case BatchSpecState.CANCELING: - return {state} + return {state} case BatchSpecState.FAILED: - return {state} + return {state} case BatchSpecState.COMPLETED: - return {state} + return {state} } } diff --git a/client/web/src/enterprise/batches/list/BatchChangeNode.tsx b/client/web/src/enterprise/batches/list/BatchChangeNode.tsx index 980ec00a50e..b33b8c82415 100644 --- a/client/web/src/enterprise/batches/list/BatchChangeNode.tsx +++ b/client/web/src/enterprise/batches/list/BatchChangeNode.tsx @@ -4,6 +4,7 @@ import React from 'react' import { Link } from '@sourcegraph/shared/src/components/Link' import { Markdown } from '@sourcegraph/shared/src/components/Markdown' import { renderMarkdown } from '@sourcegraph/shared/src/util/markdown' +import { Badge } from '@sourcegraph/wildcard' import { Timestamp } from '../../../components/time/Timestamp' import { ListBatchChange } from '../../../graphql-operations' @@ -33,10 +34,14 @@ export const BatchChangeNode: React.FunctionComponent = ({ <> {!node.closedAt && ( - Open + + Open + )} {node.closedAt && ( - Closed + + Closed + )}

    diff --git a/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.tsx b/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.tsx index d834391e9ac..9328a193eed 100644 --- a/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.tsx +++ b/client/web/src/enterprise/batches/preview/BatchChangePreviewStatsBar.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames' import React, { useContext, useMemo } from 'react' import { useObservable } from '@sourcegraph/shared/src/util/useObservable' +import { Badge } from '@sourcegraph/wildcard' import { DiffStatStack } from '../../../components/diff/DiffStat' import { ApplyPreviewStatsFields, DiffStatFields, Scalars } from '../../../graphql-operations' @@ -56,7 +57,9 @@ export const BatchChangePreviewStatsBar: React.FunctionComponent

    - Preview + + Preview +

    diff --git a/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx b/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx index a993b0509c6..7f59fd6dd39 100644 --- a/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx +++ b/client/web/src/enterprise/batches/preview/BatchChangePreviewTabs.tsx @@ -5,7 +5,7 @@ import React from 'react' import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService' import { ThemeProps } from '@sourcegraph/shared/src/theme' -import { Container } from '@sourcegraph/wildcard' +import { Badge, Container } from '@sourcegraph/wildcard' import { BatchSpecFields } from '../../../graphql-operations' import { @@ -61,7 +61,9 @@ export const BatchChangePreviewTabs: React.FunctionComponent Preview changesets {' '} - {spec.applyPreview.totalCount} + + {spec.applyPreview.totalCount} + diff --git a/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx b/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx index ece17de6998..8963a199710 100644 --- a/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx +++ b/client/web/src/enterprise/batches/preview/list/VisibleChangesetApplyPreviewNode.tsx @@ -12,6 +12,7 @@ import { Link } from '@sourcegraph/shared/src/components/Link' import { Maybe } from '@sourcegraph/shared/src/graphql-operations' import { ThemeProps } from '@sourcegraph/shared/src/theme' import { InputTooltip } from '@sourcegraph/web/src/components/InputTooltip' +import { Badge } from '@sourcegraph/wildcard' import { DiffStatStack } from '../../../../components/diff/DiffStat' import { ChangesetState, VisibleChangesetApplyPreviewFields } from '../../../../graphql-operations' @@ -515,12 +516,12 @@ const References: React.FunctionComponent<{ spec: VisibleChangesetApplyPreviewFi {spec.delta.baseRefChanged && spec.targets.__typename === 'VisibleApplyPreviewTargetsUpdate' && spec.targets.changeset.currentSpec?.description.__typename === 'GitBranchChangesetDescription' && ( - + {spec.targets.changeset.currentSpec?.description.baseRef} - + )} - {spec.targets.changesetSpec.description.baseRef} ←{' '} - {spec.targets.changesetSpec.description.headRef} + {spec.targets.changesetSpec.description.baseRef} ←{' '} + {spec.targets.changesetSpec.description.headRef}
    ) } diff --git a/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx b/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx index bb8efd7fb00..055762041da 100644 --- a/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx +++ b/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx @@ -4,6 +4,8 @@ import CheckCircleOutlineIcon from 'mdi-react/CheckCircleOutlineIcon' import React, { useCallback, useState } from 'react' import { Subject } from 'rxjs' +import { Badge } from '@sourcegraph/wildcard' + import { defaultExternalServices } from '../../../components/externalServices/externalServices' import { BatchChangesCodeHostFields, Scalars } from '../../../graphql-operations' @@ -78,13 +80,13 @@ export const CodeHostConnectionNode: React.FunctionComponent {node.externalServiceURL}{' '} {!isEnabled && node.credential?.isSiteCredential && ( - Global token - + )}
    diff --git a/client/web/src/enterprise/codeintel/configuration/components/GitObjectPreview.tsx b/client/web/src/enterprise/codeintel/configuration/components/GitObjectPreview.tsx index 71557fe0b0c..0e410fc1c5f 100644 --- a/client/web/src/enterprise/codeintel/configuration/components/GitObjectPreview.tsx +++ b/client/web/src/enterprise/codeintel/configuration/components/GitObjectPreview.tsx @@ -3,7 +3,7 @@ import classNames from 'classnames' import React, { FunctionComponent } from 'react' import { ErrorAlert } from '@sourcegraph/web/src/components/alerts' -import { LoadingSpinner } from '@sourcegraph/wildcard' +import { Badge, LoadingSpinner } from '@sourcegraph/wildcard' import { GitObjectType } from '../../../../graphql-operations' import { GitObjectPreviewResult, usePreviewGitObjectFilter } from '../hooks/usePreviewGitObjectFilter' @@ -114,7 +114,9 @@ const GitObjectPreview: FunctionComponent = ({ {tag.repoName} @ {tag.name} - {tag.rev.slice(0, 7)} + + {tag.rev.slice(0, 7)} +

    ))}
    diff --git a/client/web/src/enterprise/executors/ExecutorsListPage.tsx b/client/web/src/enterprise/executors/ExecutorsListPage.tsx index 41dffa207ee..aa5286735a0 100644 --- a/client/web/src/enterprise/executors/ExecutorsListPage.tsx +++ b/client/web/src/enterprise/executors/ExecutorsListPage.tsx @@ -13,7 +13,7 @@ import { } from '@sourcegraph/web/src/components/FilteredConnection' import { PageTitle } from '@sourcegraph/web/src/components/PageTitle' import { Timestamp } from '@sourcegraph/web/src/components/time/Timestamp' -import { Container, PageHeader } from '@sourcegraph/wildcard' +import { Badge, Container, PageHeader } from '@sourcegraph/wildcard' import { ExecutorFields } from '../../graphql-operations' import { eventLogger } from '../../tracking/eventLogger' @@ -138,12 +138,12 @@ export const ExecutorNode: FunctionComponent = ({ node }) => /> )} {node.hostname}{' '} - {node.queueName} - +
    diff --git a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/add-insight-modal/components/add-insight-modal-content/AddInsightModalContent.tsx b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/add-insight-modal/components/add-insight-modal-content/AddInsightModalContent.tsx index 8bcd91ca40c..d33662b8e43 100644 --- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/add-insight-modal/components/add-insight-modal-content/AddInsightModalContent.tsx +++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/add-insight-modal/components/add-insight-modal-content/AddInsightModalContent.tsx @@ -12,7 +12,7 @@ import { useCheckboxes } from '../../../../../../../components/form/hooks/useChe import { useField } from '../../../../../../../components/form/hooks/useField' import { SubmissionErrors, useForm, FORM_ERROR } from '../../../../../../../components/form/hooks/useForm' import { ReachableInsight } from '../../../../../../../core/backend/code-insights-backend-types' -import { Badge } from '../../../dashboard-select/components/badge/Badge' +import { InsightsBadge } from '../../../dashboard-select/components/insights-badge/InsightsBadge' import { TruncatedText } from '../../../dashboard-select/components/trancated-text/TrancatedText' import styles from './AddInsightModalContent.module.scss' @@ -80,7 +80,7 @@ export const AddInsightModalContent: React.FunctionComponent{insight.title} {insight.owner.name.length > 0 && ( - + )} ))} diff --git a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/badge/Badge.tsx b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/badge/Badge.tsx deleted file mode 100644 index 08955d6dd49..00000000000 --- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/badge/Badge.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import classNames from 'classnames' -import React from 'react' - -import { TruncatedText } from '../trancated-text/TrancatedText' - -import styles from './Badge.module.scss' - -interface BadgeProps { - value: string - className?: string -} - -export const Badge: React.FunctionComponent = props => { - const { value, className } = props - - return ( - - {value} - - ) -} diff --git a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/badge/Badge.module.scss b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.module.scss similarity index 85% rename from client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/badge/Badge.module.scss rename to client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.module.scss index 45e649b22ba..c35d6dfdb4d 100644 --- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/badge/Badge.module.scss +++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.module.scss @@ -7,4 +7,6 @@ To avoid visual merging/overlapping here, we use non-standard */ --badge-base: var(--color-bg-2) !important; + display: inline-block; + text-transform: none; } diff --git a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.tsx b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.tsx new file mode 100644 index 00000000000..bd23e446a97 --- /dev/null +++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/insights-badge/InsightsBadge.tsx @@ -0,0 +1,32 @@ +import classNames from 'classnames' +import React from 'react' + +import { Badge } from '@sourcegraph/wildcard' + +import truncatedStyles from '../trancated-text/TruncatedText.module.scss' + +import styles from './InsightsBadge.module.scss' + +interface BadgeProps { + value: string + className?: string +} + +/** + * A wrapper around the Wildcard badge component with some slightly different styling. + * We can't use the standard "secondary" variant here because the selected select option + * already uses this color for the background. We use this style variant to avoid visual merging/overlapping. + */ +export const InsightsBadge: React.FunctionComponent = props => { + const { value, className } = props + + return ( + + {value} + + ) +} diff --git a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/menu-button/MenuButton.tsx b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/menu-button/MenuButton.tsx index 61b6b0ae301..48f3feb7763 100644 --- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/menu-button/MenuButton.tsx +++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/menu-button/MenuButton.tsx @@ -6,7 +6,7 @@ import React from 'react' import { InsightDashboard, isRealDashboard } from '../../../../../../../core/types' import { getDashboardOwnerName, getDashboardTitle } from '../../helpers/get-dashboard-title' -import { Badge } from '../badge/Badge' +import { InsightsBadge } from '../insights-badge/InsightsBadge' import { TruncatedText } from '../trancated-text/TrancatedText' import styles from './MenuButton.module.scss' @@ -57,7 +57,7 @@ const MenuButtonContent: React.FunctionComponent = props <> {title} - {badge && } + {badge && } diff --git a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/select-option/SelectOption.tsx b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/select-option/SelectOption.tsx index 09963361fbd..27d909f359b 100644 --- a/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/select-option/SelectOption.tsx +++ b/client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/components/select-option/SelectOption.tsx @@ -4,7 +4,7 @@ import React from 'react' import { RealInsightDashboard } from '../../../../../../../core/types' import { getDashboardOwnerName, getDashboardTitle } from '../../helpers/get-dashboard-title' -import { Badge } from '../badge/Badge' +import { InsightsBadge } from '../insights-badge/InsightsBadge' import { TruncatedText } from '../trancated-text/TrancatedText' import styles from './SelectOption.module.scss' @@ -33,7 +33,7 @@ export const SelectOption: React.FunctionComponent = props => {label} - {badge && } + {badge && } ) } diff --git a/client/web/src/enterprise/insights/pages/dashboards/edit-dashboard/EditDashobardPage.tsx b/client/web/src/enterprise/insights/pages/dashboards/edit-dashboard/EditDashobardPage.tsx index fe24935fe8b..244c5a56043 100644 --- a/client/web/src/enterprise/insights/pages/dashboards/edit-dashboard/EditDashobardPage.tsx +++ b/client/web/src/enterprise/insights/pages/dashboards/edit-dashboard/EditDashobardPage.tsx @@ -6,7 +6,7 @@ import { Link } from 'react-router-dom' import { asError } from '@sourcegraph/shared/src/util/errors' import { useObservable } from '@sourcegraph/shared/src/util/useObservable' -import { Button, Container, LoadingSpinner, PageHeader } from '@sourcegraph/wildcard' +import { Badge, Button, Container, LoadingSpinner, PageHeader } from '@sourcegraph/wildcard' import { AuthenticatedUser } from '../../../../../auth' import { HeroPage } from '../../../../../components/HeroPage' @@ -65,9 +65,11 @@ export const EditDashboardPage: React.FunctionComponent title="Oops, we couldn't find the dashboard" subtitle={ - We couldn't find that dashboard. Try to find the dashboard with ID:{' '} - {dashboardId} in your{' '} - user or org settings + We couldn't find that dashboard. Try to find the dashboard with ID: + + {dashboardId} + {' '} + in your user or org settings } /> diff --git a/client/web/src/enterprise/insights/pages/insights/edit-insight/EditInsightPage.tsx b/client/web/src/enterprise/insights/pages/insights/edit-insight/EditInsightPage.tsx index 9f9e7ddf7b8..7c499ef7858 100644 --- a/client/web/src/enterprise/insights/pages/insights/edit-insight/EditInsightPage.tsx +++ b/client/web/src/enterprise/insights/pages/insights/edit-insight/EditInsightPage.tsx @@ -5,6 +5,7 @@ import { Link } from 'react-router-dom' import { LoadingSpinner } from '@sourcegraph/react-loading-spinner' import { useObservable } from '@sourcegraph/shared/src/util/useObservable' +import { Badge } from '@sourcegraph/wildcard' import { AuthenticatedUser } from '../../../../../auth' import { HeroPage } from '../../../../../components/HeroPage' @@ -51,8 +52,10 @@ export const EditInsightPage: React.FunctionComponent = pr subtitle={ We couldn't find that insight. Try to find the insight with ID:{' '} - {insightID} in your{' '} - user or org settings + + {insightID} + {' '} + in your user or org settings } /> diff --git a/client/web/src/enterprise/productSubscription/ProductLicenseTags.tsx b/client/web/src/enterprise/productSubscription/ProductLicenseTags.tsx index e884ee0fa99..c40395cbd02 100644 --- a/client/web/src/enterprise/productSubscription/ProductLicenseTags.tsx +++ b/client/web/src/enterprise/productSubscription/ProductLicenseTags.tsx @@ -1,13 +1,15 @@ import React from 'react' +import { Badge } from '@sourcegraph/wildcard' + export const ProductLicenseTags: React.FunctionComponent<{ tags: string[] }> = ({ tags }) => ( <> {tags.map(tag => ( -
    + {tag} -
    +     ))} ) diff --git a/client/web/src/enterprise/search/stats/SearchStatsPage.tsx b/client/web/src/enterprise/search/stats/SearchStatsPage.tsx index 42c4bbef2e4..5f3fa390016 100644 --- a/client/web/src/enterprise/search/stats/SearchStatsPage.tsx +++ b/client/web/src/enterprise/search/stats/SearchStatsPage.tsx @@ -8,6 +8,7 @@ import { Form } from '@sourcegraph/branded/src/components/Form' import { LoadingSpinner } from '@sourcegraph/react-loading-spinner' import { asError, isErrorLike, ErrorLike } from '@sourcegraph/shared/src/util/errors' import { useObservable } from '@sourcegraph/shared/src/util/useObservable' +import { Badge } from '@sourcegraph/wildcard' import { querySearchResultsStats } from './backend' import { SearchStatsLanguages } from './SearchStatsLanguages' @@ -57,7 +58,9 @@ export const SearchStatsPage: React.FunctionComponent = ({

    Code statistics{' '} - Experimental + + Experimental +

    diff --git a/client/web/src/enterprise/search/stats/__snapshots__/SearchStatsPage.test.tsx.snap b/client/web/src/enterprise/search/stats/__snapshots__/SearchStatsPage.test.tsx.snap index 9a95508b0fb..8053676b9c7 100644 --- a/client/web/src/enterprise/search/stats/__snapshots__/SearchStatsPage.test.tsx.snap +++ b/client/web/src/enterprise/search/stats/__snapshots__/SearchStatsPage.test.tsx.snap @@ -24,7 +24,7 @@ exports[`SearchStatsPage limitHit 1`] = ` Code statistics Experimental @@ -89,7 +89,7 @@ exports[`SearchStatsPage renders 1`] = ` Code statistics Experimental diff --git a/client/web/src/enterprise/searchContexts/SearchContextNode.tsx b/client/web/src/enterprise/searchContexts/SearchContextNode.tsx index de166557cc5..0f17b700fde 100644 --- a/client/web/src/enterprise/searchContexts/SearchContextNode.tsx +++ b/client/web/src/enterprise/searchContexts/SearchContextNode.tsx @@ -4,6 +4,7 @@ import React from 'react' import { Link } from '@sourcegraph/shared/src/components/Link' import { Timestamp } from '@sourcegraph/web/src/components/time/Timestamp' +import { Badge } from '@sourcegraph/wildcard' import { SearchContextFields } from '../../graphql-operations' @@ -24,7 +25,11 @@ export const SearchContextNode: React.FunctionComponent {node.spec} - {!node.public &&
    Private
    } + {!node.public && ( + + Private + + )}
    {node.description.length > 0 && ( diff --git a/client/web/src/enterprise/searchContexts/SearchContextPage.tsx b/client/web/src/enterprise/searchContexts/SearchContextPage.tsx index 025cacc1b61..502e6e627e8 100644 --- a/client/web/src/enterprise/searchContexts/SearchContextPage.tsx +++ b/client/web/src/enterprise/searchContexts/SearchContextPage.tsx @@ -18,7 +18,7 @@ import { useObservable } from '@sourcegraph/shared/src/util/useObservable' import { Page } from '@sourcegraph/web/src/components/Page' import { PageTitle } from '@sourcegraph/web/src/components/PageTitle' import { Timestamp } from '@sourcegraph/web/src/components/time/Timestamp' -import { Container, PageHeader } from '@sourcegraph/wildcard' +import { Badge, Container, PageHeader } from '@sourcegraph/wildcard' import { SearchContextProps } from '../../search' @@ -168,14 +168,17 @@ export const SearchContextPage: React.FunctionComponent
    {searchContextOrError.spec} {!searchContextOrError.public && ( -
    Private -
    + )}
    ), diff --git a/client/web/src/enterprise/searchContexts/SearchContextsListTab.tsx b/client/web/src/enterprise/searchContexts/SearchContextsListTab.tsx index 95dfb035859..1565c6a5f1a 100644 --- a/client/web/src/enterprise/searchContexts/SearchContextsListTab.tsx +++ b/client/web/src/enterprise/searchContexts/SearchContextsListTab.tsx @@ -10,6 +10,7 @@ import { FilteredConnectionFilter, FilteredConnectionFilterValue, } from '@sourcegraph/web/src/components/FilteredConnection' +import { Badge } from '@sourcegraph/wildcard' import { AuthenticatedUser } from '../../auth' import { @@ -169,12 +170,14 @@ export const SearchContextsListTab: React.FunctionComponent {context.spec} - auto - +
    {context.description}
    diff --git a/client/web/src/enterprise/site-admin/SiteAdminAuthenticationProvidersPage.tsx b/client/web/src/enterprise/site-admin/SiteAdminAuthenticationProvidersPage.tsx index db9d7b1440c..ed071d42b3b 100644 --- a/client/web/src/enterprise/site-admin/SiteAdminAuthenticationProvidersPage.tsx +++ b/client/web/src/enterprise/site-admin/SiteAdminAuthenticationProvidersPage.tsx @@ -6,6 +6,7 @@ import { map } from 'rxjs/operators' import { gql } from '@sourcegraph/shared/src/graphql/graphql' import * as GQL from '@sourcegraph/shared/src/graphql/schema' import { createAggregateError } from '@sourcegraph/shared/src/util/errors' +import { Badge } from '@sourcegraph/wildcard' import { queryGraphQL } from '../../backend/graphql' import { FilteredConnection } from '../../components/FilteredConnection' @@ -27,7 +28,7 @@ class AuthProviderNode extends React.PureComponent {
    {this.props.node.displayName}{' '} - {this.props.node.serviceType} + {this.props.node.serviceType}
    {(this.props.node.serviceID || this.props.node.clientID) && ( diff --git a/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/__snapshots__/SiteAdminProductLicenseNode.test.tsx.snap b/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/__snapshots__/SiteAdminProductLicenseNode.test.tsx.snap index 87ab2700267..49bece1c23b 100644 --- a/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/__snapshots__/SiteAdminProductLicenseNode.test.tsx.snap +++ b/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/__snapshots__/SiteAdminProductLicenseNode.test.tsx.snap @@ -60,7 +60,7 @@ exports[`SiteAdminProductLicenseNode active 1`] = `
    Tags:
    a
    @@ -159,7 +159,7 @@ exports[`SiteAdminProductLicenseNode inactive 1`] = `
    Tags:
    a
    diff --git a/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/__snapshots__/SiteAdminProductSubscriptionPage.test.tsx.snap b/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/__snapshots__/SiteAdminProductSubscriptionPage.test.tsx.snap index 339dadd9717..ceb86f01860 100644 --- a/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/__snapshots__/SiteAdminProductSubscriptionPage.test.tsx.snap +++ b/client/web/src/enterprise/site-admin/dotcom/productSubscriptions/__snapshots__/SiteAdminProductSubscriptionPage.test.tsx.snap @@ -216,7 +216,7 @@ exports[`SiteAdminProductSubscriptionPage renders 1`] = `
    Tags:
    a
    diff --git a/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx b/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx index fa21edaff13..560da5b239d 100644 --- a/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx +++ b/client/web/src/enterprise/user/settings/ExternalAccountNode.tsx @@ -5,6 +5,7 @@ import { catchError, filter, map, mapTo, startWith, switchMap, tap } from 'rxjs/ import { dataOrThrowErrors, gql } from '@sourcegraph/shared/src/graphql/graphql' import { asError, ErrorLike, isErrorLike } from '@sourcegraph/shared/src/util/errors' +import { Badge } from '@sourcegraph/wildcard' import { requestGraphQL } from '../../../backend/graphql' import { ErrorAlert } from '../../../components/alerts' @@ -132,8 +133,7 @@ export class ExternalAccountNode extends React.PureComponent )} - {this.props.node.serviceType}{' '} - {this.props.node.accountID} + {this.props.node.serviceType} {this.props.node.accountID} {(this.props.node.serviceID || this.props.node.clientID) && (
    diff --git a/client/web/src/extensions/components/StatusBar.tsx b/client/web/src/extensions/components/StatusBar.tsx index 2e8fa7c8716..a2a72b41b79 100644 --- a/client/web/src/extensions/components/StatusBar.tsx +++ b/client/web/src/extensions/components/StatusBar.tsx @@ -13,6 +13,7 @@ import { haveInitialExtensionsLoaded } from '@sourcegraph/shared/src/api/feature import { ButtonLink } from '@sourcegraph/shared/src/components/LinkOrButton' import { ExtensionsControllerProps } from '@sourcegraph/shared/src/extensions/controller' import { useObservable } from '@sourcegraph/shared/src/util/useObservable' +import { Badge } from '@sourcegraph/wildcard' import { ErrorBoundary } from '../../components/ErrorBoundary' import { useCarousel } from '../../components/useCarousel' @@ -114,7 +115,11 @@ export const StatusBar: React.FunctionComponent = ({ )}
    - {badgeText &&

    {badgeText}

    } + {badgeText && ( + + {badgeText} + + )} {!!statusBarItems && statusBarItems !== 'loading' && statusBarItems.length > 0 ? statusBarItems.map(statusBarItem => ( Contexts new @@ -172,7 +172,7 @@ exports[`GlobalNavbar default 1`] = ` > Contexts new @@ -395,7 +395,7 @@ exports[`GlobalNavbar low-profile 1`] = ` > Contexts new @@ -448,7 +448,7 @@ exports[`GlobalNavbar low-profile 1`] = ` > Contexts new diff --git a/client/web/src/repo/GitReference.tsx b/client/web/src/repo/GitReference.tsx index e19c60b667d..d7d4bbe9365 100644 --- a/client/web/src/repo/GitReference.tsx +++ b/client/web/src/repo/GitReference.tsx @@ -8,6 +8,7 @@ import { gql } from '@sourcegraph/shared/src/graphql/graphql' import { createAggregateError } from '@sourcegraph/shared/src/util/errors' import { memoizeObservable } from '@sourcegraph/shared/src/util/memoizeObservable' import { numberWithCommas } from '@sourcegraph/shared/src/util/strings' +import { Badge } from '@sourcegraph/wildcard' import { requestGraphQL } from '../backend/graphql' import { Timestamp } from '../components/time/Timestamp' @@ -67,7 +68,7 @@ export const GitReferenceNode: React.FunctionComponent = > {Icon && } - {node.displayName} + {node.displayName} {mostRecentSig && ( Updated {' '} diff --git a/client/web/src/repo/RevisionsPopover/RevisionsPopoverCommits.tsx b/client/web/src/repo/RevisionsPopover/RevisionsPopoverCommits.tsx index 08b01e74b22..d348b7f54ef 100644 --- a/client/web/src/repo/RevisionsPopover/RevisionsPopoverCommits.tsx +++ b/client/web/src/repo/RevisionsPopover/RevisionsPopoverCommits.tsx @@ -7,7 +7,7 @@ import { Scalars } from '@sourcegraph/shared/src/graphql-operations' import { dataOrThrowErrors, gql } from '@sourcegraph/shared/src/graphql/graphql' import { useConnection } from '@sourcegraph/web/src/components/FilteredConnection/hooks/useConnection' import { ConnectionSummary } from '@sourcegraph/web/src/components/FilteredConnection/ui' -import { useDebounce } from '@sourcegraph/wildcard' +import { Badge, useDebounce } from '@sourcegraph/wildcard' import { GitCommitAncestorFields, @@ -88,9 +88,9 @@ const GitCommitNode: React.FunctionComponent = ({ className={styles.link} onClick={onClick} > - + {node.abbreviatedOID} - + {node.subject.slice(0, 200)} diff --git a/client/web/src/search/home/LoggedOutHomepage.tsx b/client/web/src/search/home/LoggedOutHomepage.tsx index 8a066e1a4dd..1b83179ad45 100644 --- a/client/web/src/search/home/LoggedOutHomepage.tsx +++ b/client/web/src/search/home/LoggedOutHomepage.tsx @@ -5,6 +5,7 @@ import React, { useCallback } from 'react' import { Link } from '@sourcegraph/shared/src/components/Link' import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService' import { ThemeProps } from '@sourcegraph/shared/src/theme' +import { Badge } from '@sourcegraph/wildcard' import { communitySearchContextsList } from '../../communitySearchContexts/HomepageConfig' import { SyntaxHighlightedSearchQuery } from '../../components/SyntaxHighlightedSearchQuery' @@ -118,7 +119,9 @@ export const LoggedOutHomepage: React.FunctionComponent
    - Beta + + Beta +
    Search your public and private code.{' '} diff --git a/client/web/src/search/input/SearchContextMenu.tsx b/client/web/src/search/input/SearchContextMenu.tsx index e5f29559352..b84ae44166b 100644 --- a/client/web/src/search/input/SearchContextMenu.tsx +++ b/client/web/src/search/input/SearchContextMenu.tsx @@ -17,6 +17,7 @@ import { Link } from '@sourcegraph/shared/src/components/Link' import { ISearchContext } from '@sourcegraph/shared/src/graphql/schema' import { asError, isErrorLike } from '@sourcegraph/shared/src/util/errors' import { useObservable } from '@sourcegraph/shared/src/util/useObservable' +import { Badge } from '@sourcegraph/wildcard' import { SearchContextInputProps } from '..' import { AuthenticatedUser } from '../../auth' @@ -59,7 +60,9 @@ export const SearchContextMenuItem: React.FunctionComponent<{ {description}     {isDefault && ( - Default + + Default + )} ) diff --git a/client/web/src/site-admin/SiteAdminSurveyResponsesPage.tsx b/client/web/src/site-admin/SiteAdminSurveyResponsesPage.tsx index c2343d7657f..9febe6da199 100644 --- a/client/web/src/site-admin/SiteAdminSurveyResponsesPage.tsx +++ b/client/web/src/site-admin/SiteAdminSurveyResponsesPage.tsx @@ -6,6 +6,8 @@ import { Link } from 'react-router-dom' import { Subscription } from 'rxjs' import { useLocalStorage } from '@sourcegraph/shared/src/util/useLocalStorage' +import { Badge } from '@sourcegraph/wildcard' +import { BADGE_VARIANTS } from '@sourcegraph/wildcard/src/components/Badge/constants' import { FilteredConnection } from '../components/FilteredConnection' import { PageTitle } from '../components/PageTitle' @@ -36,17 +38,14 @@ interface SurveyResponseNodeProps { interface SurveyResponseNodeState {} -function scoreToClassSuffix(score: number): string { +function scoreToClassSuffix(score: number): typeof BADGE_VARIANTS[number] { return score > 8 ? 'success' : score > 6 ? 'info' : 'danger' } const ScoreBadge: React.FunctionComponent<{ score: number }> = props => ( -
    + Score: {props.score} -
    + ) class SurveyResponseNode extends React.PureComponent { diff --git a/client/web/src/user/settings/emails/UserEmail.tsx b/client/web/src/user/settings/emails/UserEmail.tsx index 2f47ba49391..4a7f2c11ce2 100644 --- a/client/web/src/user/settings/emails/UserEmail.tsx +++ b/client/web/src/user/settings/emails/UserEmail.tsx @@ -2,6 +2,7 @@ import React, { useState, FunctionComponent } from 'react' import { dataOrThrowErrors, gql } from '@sourcegraph/shared/src/graphql/graphql' import { asError, ErrorLike } from '@sourcegraph/shared/src/util/errors' +import { Badge } from '@sourcegraph/wildcard' import { requestGraphQL } from '../../../backend/graphql' import { @@ -134,11 +135,21 @@ export const UserEmail: FunctionComponent = ({
    {email} - {verified && Verified} - {!verified && !verificationPending && ( - Not verified + {verified && ( + + Verified + + )} + {!verified && !verificationPending && ( + + Not verified + + )} + {isPrimary && ( + + Primary + )} - {isPrimary && Primary} {!verified && verificationPending && ( •  diff --git a/client/web/src/user/settings/repositories/RepositoryNode.tsx b/client/web/src/user/settings/repositories/RepositoryNode.tsx index 4b911bcb1b6..59710e34322 100644 --- a/client/web/src/user/settings/repositories/RepositoryNode.tsx +++ b/client/web/src/user/settings/repositories/RepositoryNode.tsx @@ -10,6 +10,7 @@ import React, { useCallback } from 'react' import { LoadingSpinner } from '@sourcegraph/react-loading-spinner' import { RepoLink } from '@sourcegraph/shared/src/components/RepoLink' +import { Badge } from '@sourcegraph/wildcard' import { ExternalServiceKind } from '../../../graphql-operations' @@ -131,7 +132,11 @@ export const RepositoryNode: React.FunctionComponent = ({
    - {isPrivate &&
    Private
    } + {isPrivate && ( + + Private + + )}
    @@ -195,7 +200,13 @@ export const CheckboxRepositoryNode: React.FunctionComponent
    -
    {isPrivate &&
    Private
    }
    +
    + {isPrivate && ( + + Private + + )} +
    ) diff --git a/client/wildcard/src/components/Badge/Badge.module.scss b/client/wildcard/src/components/Badge/Badge.module.scss index 0f829d03ffd..be9cac3bd90 100644 --- a/client/wildcard/src/components/Badge/Badge.module.scss +++ b/client/wildcard/src/components/Badge/Badge.module.scss @@ -1,4 +1,193 @@ -.badge { - display: inline-flex; - align-items: center; +:root { + --badge-font-size: 0.75rem; + --badge-font-weight: 500; + --badge-padding-y: 0.125rem; + --badge-padding-x: 0.375rem; + --badge-border-radius: 3px; + --badge-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; +} + +.badge { + display: inline-block; + padding: var(--badge-padding-y) var(--badge-padding-x); + font-size: var(--badge-font-size); + font-weight: var(--badge-font-weight); + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: var(--badge-border-radius); + + background-color: var(--subtle-bg); + color: var(--link-color); + border: none; + line-height: 1rem; + + &:focus, + &.focus { + outline: 0; + } +} + +a.badge:hover, +a.badge:focus { + text-decoration: none; +} + +.badge:empty { + display: none; +} + +.btn .badge { + position: relative; + top: -1px; +} + +.pill { + // Preserve original Bootstrap padding values + // stylelint-disable-next-line declaration-property-unit-whitelist + padding-right: 0.6em; + // stylelint-disable-next-line declaration-property-unit-whitelist + padding-left: 0.6em; + border-radius: 10rem; +} + +.sm { + --badge-font-size: 0.6875rem; + --badge-padding-y: 0; + --badge-padding-x: 0.25rem; + --badge-border-radius: 2px; +} + +a.badge { + transition: var(--badge-transition); +} + +// Base Variants +.primary, +.secondary, +.success, +.danger, +.info, +.warning, +.merged, +.outline-secondary { + background-color: var(--badge-base); + color: var(--badge-text); + border: var(--badge-border, none); +} + +a.primary, +a.secondary, +a.success, +a.danger, +a.info, +a.warning, +a.merged, +a.outline-secondary { + background-color: var(--badge-base); + color: var(--badge-text); + + &:hover, + &:focus, + &.focus { + color: var(--badge-text); + background-color: var(--badge-dark); + } + + &:focus, + &.focus { + outline: 0; + + :global(.theme-light) & { + box-shadow: 0 0 0 0.125rem var(--badge-light); + } + + :global(.theme-dark) & { + box-shadow: 0 0 0 0.125rem var(--badge-dark); + } + } +} + +.primary { + --badge-base: var(--primary); + --badge-light: var(--primary-2); + --badge-dark: var(--primary-3); + --badge-text: var(--light-text); +} + +.secondary { + --badge-base: var(--secondary); + --badge-light: var(--secondary-2); + --badge-dark: var(--secondary-3); + --badge-text: var(--body-color); +} + +.success { + --badge-base: var(--success); + --badge-light: var(--success-2); + --badge-dark: var(--success-3); + --badge-text: var(--light-text); +} + +.danger { + --badge-base: var(--danger); + --badge-light: var(--danger-2); + --badge-dark: var(--danger-3); + --badge-text: var(--light-text); +} + +.info { + --badge-base: var(--info); + --badge-light: var(--info-2); + --badge-dark: var(--info-3); + --badge-text: var(--dark-text); +} + +.warning { + --badge-base: var(--warning); + --badge-light: var(--warning-2); + --badge-dark: var(--warning-3); + --badge-text: var(--dark-text); +} + +.merged { + --badge-base: var(--merged); + --badge-light: var(--merged-2); + --badge-dark: var(--merged-3); + --badge-text: var(--light-text); +} + +.outline-secondary { + --badge-base: transparent; + --badge-light: var(--secondary-2); + --badge-dark: var(--secondary-3); + --badge-text: var(--text-muted); + --badge-border: 1px solid var(--secondary); +} + +:global(.theme-light), +:global(.theme-dark) { + // Update secondary text color and focus state for better contrast + a.secondary, + a.outline-secondary { + &:focus, + &.focus { + box-shadow: var(--focus-box-shadow); + } + } + a.secondary { + &:hover, + &:focus, + &.focus { + color: var(--body-color); + } + } + a.outline-secondary { + &:hover, + &:focus, + &.focus { + background-color: var(--color-bg-1); + } + } } diff --git a/client/wildcard/src/components/Badge/Badge.story.tsx b/client/wildcard/src/components/Badge/Badge.story.tsx index 9bbd5c5107a..19e700456f4 100644 --- a/client/wildcard/src/components/Badge/Badge.story.tsx +++ b/client/wildcard/src/components/Badge/Badge.story.tsx @@ -41,7 +41,7 @@ export const Badges = () => ( ))}

    Size

    We can also make our badges smaller.

    - I am a small badge + I am a small badge

    Pills

    Commonly used to display counts, we can style badges as pills.

    @@ -49,7 +49,7 @@ export const Badges = () => (

    Links

    For more advanced functionality, badges can also function as links.

    - + I am a link diff --git a/client/wildcard/src/components/Badge/Badge.tsx b/client/wildcard/src/components/Badge/Badge.tsx index bb685d497c6..1cfb0fa53f7 100644 --- a/client/wildcard/src/components/Badge/Badge.tsx +++ b/client/wildcard/src/components/Badge/Badge.tsx @@ -2,7 +2,7 @@ import classNames from 'classnames' import React from 'react' import styles from './Badge.module.scss' -import { BADGE_SIZES, BADGE_VARIANTS } from './constants' +import { BADGE_VARIANTS } from './constants' export interface BadgeProps extends React.HTMLAttributes { /** @@ -10,9 +10,9 @@ export interface BadgeProps extends React.HTMLAttributes { */ variant?: typeof BADGE_VARIANTS[number] /** - * Allows modifying the size of the badge. Supports larger or smaller variants. + * Allows modifying the size of the badge. Supports a smaller variant. */ - size?: typeof BADGE_SIZES[number] + small?: boolean /** * Render the badge as a rounded pill */ @@ -25,6 +25,10 @@ export interface BadgeProps extends React.HTMLAttributes { * Used to render the badge as a link to a specific URL */ href?: string + /** + * If the Badge should use branded styles. Defaults to true. + */ + branded?: boolean /** * Used to change the element that is rendered. */ @@ -38,24 +42,21 @@ export interface BadgeProps extends React.HTMLAttributes { export const Badge: React.FunctionComponent = ({ children, variant, - size, + small, pill, tooltip, className, + branded = true, href, as: Component = 'span', ...otherProps }) => { + const brandedClassName = + branded && classNames(styles.badge, variant && styles[variant], small && styles.sm, pill && styles.pill) + const commonProps = { 'data-tooltip': tooltip, - className: classNames( - 'badge', - styles.badge, - variant && `badge-${variant}`, - size && `badge-${size}`, - pill && 'badge-pill', - className - ), + className: classNames(brandedClassName, className), ...otherProps, } diff --git a/client/wildcard/src/components/Badge/ProductStatusBadge.module.scss b/client/wildcard/src/components/Badge/ProductStatusBadge.module.scss index 111a9d4f4b1..2b7edd81009 100644 --- a/client/wildcard/src/components/Badge/ProductStatusBadge.module.scss +++ b/client/wildcard/src/components/Badge/ProductStatusBadge.module.scss @@ -1,3 +1,5 @@ .product-status-badge { + display: inline-flex; + align-items: center; text-transform: capitalize; } diff --git a/client/wildcard/src/components/Badge/constants.ts b/client/wildcard/src/components/Badge/constants.ts index e53c2673be4..6a80165b8ec 100644 --- a/client/wildcard/src/components/Badge/constants.ts +++ b/client/wildcard/src/components/Badge/constants.ts @@ -1,12 +1,2 @@ -export const BADGE_VARIANTS = [ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'merged', - 'link', -] as const -export const BADGE_SIZES = ['sm', 'lg'] as const +export const BADGE_VARIANTS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'merged'] as const export const PRODUCT_STATUSES = ['beta', 'prototype', 'experimental', 'wip', 'new'] as const