From fa4ea5469043872715574aafaf107baef7e1ebe9 Mon Sep 17 00:00:00 2001 From: Felix Becker Date: Thu, 30 Jul 2020 15:56:45 +0200 Subject: [PATCH] Badge design (#12390) --- web/src/SourcegraphWebApp.scss | 7 ++ .../components/diff/FileDiffNode.story.tsx | 23 ++++ web/src/components/diff/FileDiffNode.tsx | 9 +- .../campaigns/detail/CampaignActionsBar.tsx | 10 +- .../campaigns/detail/CampaignHeader.tsx | 4 +- .../CampaignDetails.test.tsx.snap | 20 ++-- .../global/create/CampaignCliHelp.tsx | 5 +- .../global/create/CreateCampaign.tsx | 5 +- .../CampaignCliHelp.test.tsx.snap | 15 ++- .../CreateCampaign.test.tsx.snap | 15 ++- .../global/list/GlobalCampaignListPage.tsx | 9 +- .../GlobalCampaignListPage.test.tsx.snap | 92 +++++++-------- .../global/marketing/CampaignsMarketing.tsx | 5 +- .../CampaignsDotComPage.test.tsx.snap | 15 ++- .../CampaignsMarketing.test.tsx.snap | 15 ++- ...paignsSiteAdminMarketingPage.test.tsx.snap | 15 ++- .../CampaignsUserMarketingPage.test.tsx.snap | 30 +++-- .../campaigns/list/CampaignNode.tsx | 2 +- .../__snapshots__/CampaignNode.test.tsx.snap | 18 +-- .../search/stats/SearchStatsPage.tsx | 2 +- .../SearchStatsPage.test.tsx.snap | 4 +- web/src/global-styles/global-styles.story.tsx | 107 ++++++++++++++++-- web/src/global-styles/type.scss | 10 +- web/src/insights/InsightsPage.tsx | 2 +- web/src/snippets/SnippetsPage.tsx | 2 +- 25 files changed, 287 insertions(+), 154 deletions(-) diff --git a/web/src/SourcegraphWebApp.scss b/web/src/SourcegraphWebApp.scss index e1fb78456fd8..841b3aa781e1 100644 --- a/web/src/SourcegraphWebApp.scss +++ b/web/src/SourcegraphWebApp.scss @@ -62,6 +62,13 @@ $alert-color-level-light: 6; $alert-padding-y: 0.75rem; $alert-padding-x: 0.75rem; +// Badges + +$badge-font-size: 0.75em; +$badge-font-weight: 600; +$badge-padding-y: 0.34em; +$badge-padding-x: 0.6em; + // Forms $form-check-input-margin-y: 0.2em; diff --git a/web/src/components/diff/FileDiffNode.story.tsx b/web/src/components/diff/FileDiffNode.story.tsx index e8041c150875..9771dedd667b 100644 --- a/web/src/components/diff/FileDiffNode.story.tsx +++ b/web/src/components/diff/FileDiffNode.story.tsx @@ -158,6 +158,29 @@ export const FILE_DIFF_NODES: IFileDiff[] = [ newPath: 'to.md', oldPath: 'from.md', }, + { + __typename: 'FileDiff', + hunks: DEMO_HUNKS, + internalID: 'abcdef123', + stat: { __typename: 'DiffStat', added: 0, changed: 1, deleted: 0 }, + oldFile: { + __typename: 'VirtualFile', + binary: false, + name: 'dir1/from.md', + } as IVirtualFile, + newFile: { + __typename: 'VirtualFile', + binary: false, + name: 'dir2/to.md', + } as IVirtualFile, + mostRelevantFile: { + __typename: 'VirtualFile', + binary: false, + name: 'dir2/to.md', + } as IVirtualFile, + newPath: 'dir2/to.md', + oldPath: 'dir1/from.md', + }, { __typename: 'FileDiff', hunks: [], diff --git a/web/src/components/diff/FileDiffNode.tsx b/web/src/components/diff/FileDiffNode.tsx index b6415a54a061..d529711c936e 100644 --- a/web/src/components/diff/FileDiffNode.tsx +++ b/web/src/components/diff/FileDiffNode.tsx @@ -14,6 +14,7 @@ import { ThemeProps } from '../../../../shared/src/theme' import { ExtensionsControllerProps } from '../../../../shared/src/extensions/controller' import ChevronRightIcon from 'mdi-react/ChevronRightIcon' import classNames from 'classnames' +import { dirname } from '../../util/path' export interface FileDiffNodeProps extends ThemeProps { node: GQL.IFileDiff @@ -97,10 +98,12 @@ export class FileDiffNode extends React.PureComponent )}
- {!node.oldPath && Added file} - {!node.newPath && Deleted file} + {!node.oldPath && Added} + {!node.newPath && Deleted} {node.newPath && node.oldPath && node.newPath !== node.oldPath && ( - Moved file + + {dirname(node.newPath) !== dirname(node.oldPath) ? 'Moved' : 'Renamed'} + )} {stat} diff --git a/web/src/enterprise/campaigns/detail/CampaignActionsBar.tsx b/web/src/enterprise/campaigns/detail/CampaignActionsBar.tsx index 7ed1b797ca81..55b3d775352b 100644 --- a/web/src/enterprise/campaigns/detail/CampaignActionsBar.tsx +++ b/web/src/enterprise/campaigns/detail/CampaignActionsBar.tsx @@ -32,13 +32,13 @@ export const CampaignActionsBar: React.FunctionComponent = ({ campaign })
-

{campaign.name}

-

+

{campaign.name}

+
{0}% complete. {campaign.changesets.totalCount} changesets total - +
@@ -48,13 +48,13 @@ export const CampaignActionsBar: React.FunctionComponent = ({ campaign }) const CampaignStateBadge: React.FunctionComponent<{ isClosed: boolean }> = ({ isClosed }) => { if (isClosed) { return ( - + Closed ) } return ( - + Open ) diff --git a/web/src/enterprise/campaigns/detail/CampaignHeader.tsx b/web/src/enterprise/campaigns/detail/CampaignHeader.tsx index 26e4dc2f9388..f26a3b8d5e19 100644 --- a/web/src/enterprise/campaigns/detail/CampaignHeader.tsx +++ b/web/src/enterprise/campaigns/detail/CampaignHeader.tsx @@ -14,9 +14,7 @@ export const CampaignHeader: React.FunctionComponent = ({ className }) => Campaigns - - BETA - + Beta ) diff --git a/web/src/enterprise/campaigns/detail/__snapshots__/CampaignDetails.test.tsx.snap b/web/src/enterprise/campaigns/detail/__snapshots__/CampaignDetails.test.tsx.snap index 13654384e365..3e789c90d8f6 100644 --- a/web/src/enterprise/campaigns/detail/__snapshots__/CampaignDetails.test.tsx.snap +++ b/web/src/enterprise/campaigns/detail/__snapshots__/CampaignDetails.test.tsx.snap @@ -158,18 +158,16 @@ exports[`CampaignDetails viewerCanAdminister: false viewing existing 1`] = ` >

n

-

+
-

+
@@ -397,18 +395,16 @@ exports[`CampaignDetails viewerCanAdminister: true viewing existing 1`] = ` >

n

-

+
-

+
diff --git a/web/src/enterprise/campaigns/global/create/CampaignCliHelp.tsx b/web/src/enterprise/campaigns/global/create/CampaignCliHelp.tsx index acb06827d4e7..aaaaa86a55d3 100644 --- a/web/src/enterprise/campaigns/global/create/CampaignCliHelp.tsx +++ b/web/src/enterprise/campaigns/global/create/CampaignCliHelp.tsx @@ -40,7 +40,10 @@ interface Props { export const CampaignCliHelp: React.FunctionComponent = ({ className }) => (

- Create a campaign Beta + Create a campaign{' '} + + Beta +

diff --git a/web/src/enterprise/campaigns/global/create/CreateCampaign.tsx b/web/src/enterprise/campaigns/global/create/CreateCampaign.tsx index 66f6ca069854..41d429dd01fa 100644 --- a/web/src/enterprise/campaigns/global/create/CreateCampaign.tsx +++ b/web/src/enterprise/campaigns/global/create/CreateCampaign.tsx @@ -12,7 +12,10 @@ interface Props { export const CreateCampaign: React.FunctionComponent = ({ className }) => (

- Create a new campaign Beta + Create a new campaign{' '} + + Beta +

  • diff --git a/web/src/enterprise/campaigns/global/create/__snapshots__/CampaignCliHelp.test.tsx.snap b/web/src/enterprise/campaigns/global/create/__snapshots__/CampaignCliHelp.test.tsx.snap index 25e981657704..0921428a2d0e 100644 --- a/web/src/enterprise/campaigns/global/create/__snapshots__/CampaignCliHelp.test.tsx.snap +++ b/web/src/enterprise/campaigns/global/create/__snapshots__/CampaignCliHelp.test.tsx.snap @@ -8,12 +8,15 @@ exports[`CampaignCliHelp renders 1`] = ` className="test" >

    - Create a campaign - - Beta - + Create a campaign + + + + Beta + +

    - Create a new campaign - - Beta - + Create a new campaign + + + + Beta + +

      = ({

      - Campaigns Beta + Campaigns{' '} + + Beta +

      Perform and track large-scale code changes.{' '} @@ -56,9 +59,7 @@ export const GlobalCampaignListPage: React.FunctionComponent = ({

      -

      - Welcome to campaigns Beta! -

      +

      Welcome to campaigns!

      We're excited for you to use campaigns to remove legacy code, fix critical security issues, pay down tech debt, and more. We look forward to hearing about campaigns you run inside your diff --git a/web/src/enterprise/campaigns/global/list/__snapshots__/GlobalCampaignListPage.test.tsx.snap b/web/src/enterprise/campaigns/global/list/__snapshots__/GlobalCampaignListPage.test.tsx.snap index 9c41eff7bae6..b68d00b9bfe5 100644 --- a/web/src/enterprise/campaigns/global/list/__snapshots__/GlobalCampaignListPage.test.tsx.snap +++ b/web/src/enterprise/campaigns/global/list/__snapshots__/GlobalCampaignListPage.test.tsx.snap @@ -9,12 +9,15 @@ exports[`GlobalCampaignListPage renders for non-siteadmin and totalCount: 0 1`]

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      - Welcome to campaigns - - Beta - - ! + Welcome to campaigns!

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      - Welcome to campaigns - - Beta - - ! + Welcome to campaigns!

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      - Welcome to campaigns - - Beta - - ! + Welcome to campaigns!

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      - Welcome to campaigns - - Beta - - ! + Welcome to campaigns!

      - Campaigns Beta + Campaigns{' '} + + Beta +

      Make and track large-scale changes across all code

      diff --git a/web/src/enterprise/campaigns/global/marketing/__snapshots__/CampaignsDotComPage.test.tsx.snap b/web/src/enterprise/campaigns/global/marketing/__snapshots__/CampaignsDotComPage.test.tsx.snap index c59222caccb4..89dfd02d5790 100644 --- a/web/src/enterprise/campaigns/global/marketing/__snapshots__/CampaignsDotComPage.test.tsx.snap +++ b/web/src/enterprise/campaigns/global/marketing/__snapshots__/CampaignsDotComPage.test.tsx.snap @@ -106,12 +106,15 @@ exports[`CampaignsDotComPage renders 1`] = `

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      - Campaigns - - Beta - + Campaigns + + + + Beta + +

      = ({ node, }> {formatDistance(parseISO(node.createdAt), now)} ago {' '} - by {node.author.username} + by {node.author.username}

      by - + alice - +
      by - + alice - +
      by - + alice - +
      = ({

      Code statistics{' '} - Experimental + Experimental

      diff --git a/web/src/enterprise/search/stats/__snapshots__/SearchStatsPage.test.tsx.snap b/web/src/enterprise/search/stats/__snapshots__/SearchStatsPage.test.tsx.snap index 0a378930605b..adb47fb59d0e 100644 --- a/web/src/enterprise/search/stats/__snapshots__/SearchStatsPage.test.tsx.snap +++ b/web/src/enterprise/search/stats/__snapshots__/SearchStatsPage.test.tsx.snap @@ -24,7 +24,7 @@ exports[`SearchStatsPage limitHit 1`] = ` Code statistics Experimental @@ -92,7 +92,7 @@ exports[`SearchStatsPage renders 1`] = ` Code statistics Experimental diff --git a/web/src/global-styles/global-styles.story.tsx b/web/src/global-styles/global-styles.story.tsx index 2466a4afc67d..7f109a813721 100644 --- a/web/src/global-styles/global-styles.story.tsx +++ b/web/src/global-styles/global-styles.story.tsx @@ -58,6 +58,14 @@ add('Text', () => ( Text can be emphasized or made strong.

      +

      + Text can have superscriptssup with {''}. +

      + +

      + Text can have subscriptssub with {''}. +

      +

      You can use {''} to make small text. Use sparingly. @@ -345,35 +353,70 @@ add( {' '} | Bootstrap Documentation{' '}

      +

      Badges are used for labelling and displaying small counts.

      + +

      Scaling

      - Badges are used for labelling and displaying small counts. Badges scale to match the size of the - immediate parent element by using relative font sizing and em units for padding. Text in - badges is automatically uppercased with CSS. + Badges scale to match the size of the immediate parent element by using relative font sizing and{' '} + em units for padding.

      - -

      Headings

      - Badges can be used in headings within a superscript {''}: + Use a superscript {''} to position the badge top-right of a word in{' '} + h1 headings. Do not use a superscript for smaller text, because the font size would become + too small.

      - {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const).map(Heading => ( + + + + + {(['h2', 'h3', 'h4', 'h5', 'h6'] as const).map(Heading => ( ))} + + + + + + + +
      + {'

      '} + {''} +

      		+

      + Lorem{' '} + + ipsum + +

      + Use a superscript to align the badge top-right of the heading text. +
      {`<${Heading}>`} - Blockchain support{' '} - - Beta - + Lorem ipsum
      Regular text + Lorem ipsum +
      + {''} + + + Lorem ipsum + +

      + + Discouraged because the text becomes too small to read. + +

      +
      +

      Semantic variations

      Change the appearance of any badge with modifier classes for semantic colors.

      @@ -384,6 +427,48 @@ add( ))}

      +

      Uppercase

      +

      + Badges can be visually uppercased by combining them with the text-uppercase class. + Examples: +

      +
      +

      + Blockchain support{' '} + + Beta + +

      +

      + Blockchain support{' '} + + Preview + +

      +

      + Blockchain support{' '} + + Experimental + +

      +

      + Blockchain support{' '} + + Prototype + +

      +
      +

      + added path/to/file.ts +

      +

      + deleted path/to/file.ts +

      +

      + moved path/to/file.ts +

      +

      Do not use it for user-supplied text like labels (tags) or usernames.

      +

      Pill badges

      Pill badges are commonly used to display counts.

      diff --git a/web/src/global-styles/type.scss b/web/src/global-styles/type.scss index 8b6489c22b1b..6e9bc6d5ccf0 100644 --- a/web/src/global-styles/type.scss +++ b/web/src/global-styles/type.scss @@ -26,7 +26,7 @@ h4 { } h5 { - font-size: 12px; + font-size: 14px; letter-spacing: 1px; font-weight: 500; text-transform: uppercase; @@ -36,3 +36,11 @@ h5 { small { font-size: 12px; } + +sup, +sub { + font-size: 0.5em; +} +sup { + top: -1em; +} diff --git a/web/src/insights/InsightsPage.tsx b/web/src/insights/InsightsPage.tsx index 2efa512b8b01..71b2d082c152 100644 --- a/web/src/insights/InsightsPage.tsx +++ b/web/src/insights/InsightsPage.tsx @@ -29,7 +29,7 @@ export const InsightsPage: React.FunctionComponent = props =>

      Insights{' '} - prototype + prototype

      {/* These buttons are just links until there is a proper configuration UI */} diff --git a/web/src/snippets/SnippetsPage.tsx b/web/src/snippets/SnippetsPage.tsx index 6b96d5e8ab23..b837c4446091 100644 --- a/web/src/snippets/SnippetsPage.tsx +++ b/web/src/snippets/SnippetsPage.tsx @@ -98,7 +98,7 @@ export const SnippetsPage: React.FunctionComponent = ({ location, history return (

      - Snippet editor Experimental + Snippet editor Experimental

      {viewerId && modelUri && ( <>