From d5763233ca09dd4290e0c7324fcd761047c6a19e Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Thu, 17 Feb 2022 20:59:40 -0800 Subject: [PATCH] HelpText -> Text --- app/components/CommandBarItem.tsx | 2 +- app/components/ErrorBoundary.tsx | 10 +++---- app/components/FilterOptions.tsx | 4 +-- app/components/HelpText.ts | 10 ------- app/components/IconPicker.tsx | 4 +-- app/components/InputRich.tsx | 6 ++-- app/components/InputSelect.tsx | 8 +++-- app/components/Modal.tsx | 2 +- app/components/Switch.tsx | 9 ++++-- app/components/Text.ts | 30 +++++++++++++++++++ app/scenes/APITokenNew.tsx | 6 ++-- app/scenes/Collection/DropToImport.tsx | 4 +-- app/scenes/Collection/Empty.tsx | 6 ++-- app/scenes/CollectionDelete.tsx | 10 +++---- app/scenes/CollectionEdit.tsx | 6 ++-- app/scenes/CollectionExport.tsx | 6 ++-- app/scenes/CollectionNew.tsx | 6 ++-- .../AddGroupsToCollection.tsx | 6 ++-- .../AddPeopleToCollection.tsx | 6 ++-- app/scenes/CollectionPermissions/index.tsx | 8 ++--- app/scenes/Document/components/Contents.tsx | 4 +-- .../Document/components/SharePopover.tsx | 8 +++-- app/scenes/DocumentDelete.tsx | 10 +++---- app/scenes/DocumentPermanentDelete.tsx | 6 ++-- app/scenes/DocumentReparent.tsx | 6 ++-- app/scenes/DocumentTemplatize.tsx | 6 ++-- app/scenes/GroupDelete.tsx | 6 ++-- app/scenes/GroupEdit.tsx | 6 ++-- app/scenes/GroupMembers/AddPeopleToGroup.tsx | 6 ++-- app/scenes/GroupMembers/GroupMembers.tsx | 10 +++---- app/scenes/GroupNew.tsx | 10 +++---- app/scenes/Invite.tsx | 10 +++---- app/scenes/Login/index.tsx | 6 ++-- app/scenes/Search/Search.tsx | 6 ++-- app/scenes/Settings/Details.tsx | 10 +++---- app/scenes/Settings/Export.tsx | 6 ++-- app/scenes/Settings/Features.tsx | 6 ++-- app/scenes/Settings/Groups.tsx | 6 ++-- app/scenes/Settings/Import.tsx | 6 ++-- app/scenes/Settings/Notifications.tsx | 6 ++-- app/scenes/Settings/People.tsx | 6 ++-- app/scenes/Settings/Profile.tsx | 6 ++-- app/scenes/Settings/Security.tsx | 6 ++-- app/scenes/Settings/Shares.tsx | 10 +++---- app/scenes/Settings/Slack.tsx | 10 +++---- app/scenes/Settings/Tokens.tsx | 6 ++-- app/scenes/Settings/Zapier.tsx | 6 ++-- .../Settings/components/SlackListItem.tsx | 6 ++-- app/scenes/UserDelete.tsx | 10 +++---- app/scenes/UserProfile.tsx | 8 ++--- 50 files changed, 198 insertions(+), 165 deletions(-) delete mode 100644 app/components/HelpText.ts create mode 100644 app/components/Text.ts diff --git a/app/components/CommandBarItem.tsx b/app/components/CommandBarItem.tsx index 209e6ef71..48020c9d6 100644 --- a/app/components/CommandBarItem.tsx +++ b/app/components/CommandBarItem.tsx @@ -32,7 +32,7 @@ function CommandBarItem( return ( - + {action.icon ? ( // @ts-expect-error no icon on ActionImpl diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx index 5fb542720..286711bc2 100644 --- a/app/components/ErrorBoundary.tsx +++ b/app/components/ErrorBoundary.tsx @@ -7,8 +7,8 @@ import styled from "styled-components"; import { githubIssuesUrl } from "@shared/utils/urlHelpers"; import Button from "~/components/Button"; import CenteredContent from "~/components/CenteredContent"; -import HelpText from "~/components/HelpText"; import PageTitle from "~/components/PageTitle"; +import Text from "~/components/Text"; import env from "~/env"; type Props = WithTranslation & { @@ -72,13 +72,13 @@ class ErrorBoundary extends React.Component {

Loading Failed

- + Sorry, part of the application failed to load. This may be because it was updated since you opened the tab or because of a failed network request. Please try reloading. - +

@@ -92,7 +92,7 @@ class ErrorBoundary extends React.Component {

Something Unexpected Happened

- + { : undefined, }} /> - + {this.showDetails && 
{error.toString()}
}

{" "} diff --git a/app/components/FilterOptions.tsx b/app/components/FilterOptions.tsx index b288edc39..c7e257947 100644 --- a/app/components/FilterOptions.tsx +++ b/app/components/FilterOptions.tsx @@ -4,7 +4,7 @@ import styled from "styled-components"; import Button, { Inner } from "~/components/Button"; import ContextMenu from "~/components/ContextMenu"; import MenuItem from "~/components/ContextMenu/MenuItem"; -import HelpText from "~/components/HelpText"; +import Text from "~/components/Text"; type TFilterOption = { key: string; @@ -72,7 +72,7 @@ const FilterOptions = ({ ); }; -const Note = styled(HelpText)` +const Note = styled(Text)` margin-top: 2px; margin-bottom: 0; line-height: 1.2em; diff --git a/app/components/HelpText.ts b/app/components/HelpText.ts deleted file mode 100644 index 324d34c2d..000000000 --- a/app/components/HelpText.ts +++ /dev/null @@ -1,10 +0,0 @@ -import styled from "styled-components"; - -const HelpText = styled.p<{ small?: boolean }>` - margin-top: 0; - color: ${(props) => props.theme.textSecondary}; - font-size: ${(props) => (props.small ? "14px" : "inherit")}; - white-space: normal; -`; - -export default HelpText; diff --git a/app/components/IconPicker.tsx b/app/components/IconPicker.tsx index 4f7a05116..c4ce12416 100644 --- a/app/components/IconPicker.tsx +++ b/app/components/IconPicker.tsx @@ -42,9 +42,9 @@ import styled, { useTheme } from "styled-components"; import breakpoint from "styled-components-breakpoint"; import ContextMenu from "~/components/ContextMenu"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; import { LabelText } from "~/components/Input"; import NudeButton from "~/components/NudeButton"; +import Text from "~/components/Text"; const style = { width: 30, @@ -324,7 +324,7 @@ const IconButton = styled(NudeButton)` height: 30px; `; -const Loading = styled(HelpText)` +const Loading = styled(Text)` padding: 16px; `; diff --git a/app/components/InputRich.tsx b/app/components/InputRich.tsx index 97fcbcf23..d4ec3f1e3 100644 --- a/app/components/InputRich.tsx +++ b/app/components/InputRich.tsx @@ -3,8 +3,8 @@ import * as React from "react"; import { Trans } from "react-i18next"; import styled from "styled-components"; import Editor from "~/components/Editor"; -import HelpText from "~/components/HelpText"; import { LabelText, Outline } from "~/components/Input"; +import Text from "~/components/Text"; type Props = { label: string; @@ -32,9 +32,9 @@ function InputRich({ label, minHeight, maxHeight, ...rest }: Props) { > + Loading editor… - + } > diff --git a/app/components/InputSelect.tsx b/app/components/InputSelect.tsx index 60a509ebb..946860b11 100644 --- a/app/components/InputSelect.tsx +++ b/app/components/InputSelect.tsx @@ -11,7 +11,7 @@ import { VisuallyHidden } from "reakit/VisuallyHidden"; import scrollIntoView from "smooth-scroll-into-view-if-needed"; import styled, { css } from "styled-components"; import Button, { Inner } from "~/components/Button"; -import HelpText from "~/components/HelpText"; +import Text from "~/components/Text"; import useMenuHeight from "~/hooks/useMenuHeight"; import { Position, Background, Backdrop, Placement } from "./ContextMenu"; import { MenuAnchorCSS } from "./ContextMenu/MenuItem"; @@ -203,7 +203,11 @@ const InputSelect = (props: Props) => { }} - {note && {note}} + {note && ( + + {note} + + )} {select.visible && } ); diff --git a/app/components/Modal.tsx b/app/components/Modal.tsx index d5903905a..3dd205adb 100644 --- a/app/components/Modal.tsx +++ b/app/components/Modal.tsx @@ -83,7 +83,7 @@ const Modal = ({ - {t("Back")} + {t("Back")} diff --git a/app/components/Switch.tsx b/app/components/Switch.tsx index bd2e0d84b..7e45b268a 100644 --- a/app/components/Switch.tsx +++ b/app/components/Switch.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import styled from "styled-components"; -import HelpText from "~/components/HelpText"; import { LabelText } from "~/components/Input"; +import Text from "~/components/Text"; type Props = React.HTMLAttributes & { width?: number; @@ -48,7 +48,11 @@ function Switch({ {component} {label} - {note && {note}} + {note && ( + + {note} + + )} ); } @@ -67,6 +71,7 @@ const InlineLabelText = styled(LabelText)` const Label = styled.label<{ disabled?: boolean }>` display: flex; align-items: center; + user-select: none; ${(props) => (props.disabled ? `opacity: 0.75;` : "")} `; diff --git a/app/components/Text.ts b/app/components/Text.ts new file mode 100644 index 000000000..91a2d2b07 --- /dev/null +++ b/app/components/Text.ts @@ -0,0 +1,30 @@ +import styled from "styled-components"; + +type Props = { + type?: "secondary" | "tertiary"; + size?: "small" | "xsmall"; +}; + +/** + * Use this component for all interface text that should not be selectable + * by the user, this is the majority of UI text explainers, notes, headings. + */ +const Text = styled.p` + margin-top: 0; + color: ${(props) => + props.type === "secondary" + ? props.theme.textSecondary + : props.type === "tertiary" + ? props.theme.textTertiary + : props.theme.text}; + font-size: ${(props) => + props.size === "small" + ? "14px" + : props.size === "xsmall" + ? "13px" + : "inherit"}; + white-space: normal; + user-select: none; +`; + +export default Text; diff --git a/app/scenes/APITokenNew.tsx b/app/scenes/APITokenNew.tsx index 77eac68ee..1ee159e95 100644 --- a/app/scenes/APITokenNew.tsx +++ b/app/scenes/APITokenNew.tsx @@ -2,8 +2,8 @@ import * as React from "react"; import { useTranslation, Trans } from "react-i18next"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; import Input from "~/components/Input"; +import Text from "~/components/Text"; import useStores from "~/hooks/useStores"; import useToasts from "~/hooks/useToasts"; @@ -50,13 +50,13 @@ function APITokenNew({ onSubmit }: Props) { return (

- + Name your token something that will help you to remember it's use in the future, for example "local development", "production", or "continuous integration". - + - + Get started by creating a new one! )} - + {can.createDocument && ( diff --git a/app/scenes/CollectionDelete.tsx b/app/scenes/CollectionDelete.tsx index 6afdfc14c..4c38b14d5 100644 --- a/app/scenes/CollectionDelete.tsx +++ b/app/scenes/CollectionDelete.tsx @@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom"; import Collection from "~/models/Collection"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; +import Text from "~/components/Text"; import useCurrentTeam from "~/hooks/useCurrentTeam"; import useToasts from "~/hooks/useToasts"; import { homePath } from "~/utils/routeHelpers"; @@ -44,7 +44,7 @@ function CollectionDelete({ collection, onSubmit }: Props) { return ( - + , }} /> - + {team.defaultCollectionId === collection.id ? ( - + , }} /> - + ) : null} diff --git a/app/scenes/CollectionNew.tsx b/app/scenes/CollectionNew.tsx index 95e54ed56..bbe7289e3 100644 --- a/app/scenes/CollectionNew.tsx +++ b/app/scenes/CollectionNew.tsx @@ -7,11 +7,11 @@ import RootStore from "~/stores/RootStore"; import Collection from "~/models/Collection"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; import IconPicker, { icons } from "~/components/IconPicker"; import Input from "~/components/Input"; import InputSelectPermission from "~/components/InputSelectPermission"; import Switch from "~/components/Switch"; +import Text from "~/components/Text"; import withStores from "~/components/withStores"; import history from "~/utils/history"; @@ -115,13 +115,13 @@ class CollectionNew extends React.Component { const teamSharingEnabled = !!auth.team && auth.team.sharing; return ( - + Collections are for grouping your documents. They work best when organized around a topic or internal team — Product or Engineering for example. - + { return ( {can.createGroup && ( - + {t("Can’t find the group you’re looking for?")}{" "} {t("Create a group")} . - + )} { return ( - + {t("Need to add someone who’s not yet on the team yet?")}{" "} {t("Invite people to {{ teamName }}", { @@ -91,7 +91,7 @@ class AddPeopleToCollection extends React.Component { })} . - + - + {!collection.permission && ( ) : ( - {t("Only team members with permission can view")} + + {t("Only team members with permission can view")} + )} {canPublish && share?.published && !document.isDraft && ( @@ -231,7 +233,7 @@ const SwitchLabel = styled(Flex)` } `; -const SwitchText = styled(HelpText)` +const SwitchText = styled(Text)` margin: 0; font-size: 15px; `; diff --git a/app/scenes/DocumentDelete.tsx b/app/scenes/DocumentDelete.tsx index b4041e41d..774a4fa1d 100644 --- a/app/scenes/DocumentDelete.tsx +++ b/app/scenes/DocumentDelete.tsx @@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom"; import Document from "~/models/Document"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; +import Text from "~/components/Text"; import useStores from "~/hooks/useStores"; import useToasts from "~/hooks/useToasts"; import { collectionUrl, documentUrl } from "~/utils/routeHelpers"; @@ -83,7 +83,7 @@ function DocumentDelete({ document, onSubmit }: Props) { return ( - + {document.isTemplate ? ( )} - + {canArchive && ( - + If you’d like the option of referencing or restoring the{" "} {{ @@ -115,7 +115,7 @@ function DocumentDelete({ document, onSubmit }: Props) { }}{" "} in the future, consider archiving it instead. - + )} diff --git a/app/scenes/DocumentReparent.tsx b/app/scenes/DocumentReparent.tsx index 0678d55f0..9e9482e56 100644 --- a/app/scenes/DocumentReparent.tsx +++ b/app/scenes/DocumentReparent.tsx @@ -5,7 +5,7 @@ import { Trans, useTranslation } from "react-i18next"; import Collection from "~/models/Collection"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; +import Text from "~/components/Text"; import useStores from "~/hooks/useStores"; import useToasts from "~/hooks/useToasts"; import { NavigationNode } from "~/types"; @@ -68,7 +68,7 @@ function DocumentReparent({ collection, item, onSubmit, onCancel }: Props) { return ( - + , }} /> - + {" "} diff --git a/app/scenes/DocumentTemplatize.tsx b/app/scenes/DocumentTemplatize.tsx index dac3c4661..0db4135d3 100644 --- a/app/scenes/DocumentTemplatize.tsx +++ b/app/scenes/DocumentTemplatize.tsx @@ -6,7 +6,7 @@ import { useTranslation, Trans } from "react-i18next"; import { useHistory } from "react-router-dom"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; +import Text from "~/components/Text"; import useStores from "~/hooks/useStores"; import useToasts from "~/hooks/useToasts"; import { documentUrl } from "~/utils/routeHelpers"; @@ -56,7 +56,7 @@ function DocumentTemplatize({ documentId, onSubmit }: Props) { return ( - + , }} /> - + diff --git a/app/scenes/GroupDelete.tsx b/app/scenes/GroupDelete.tsx index 9b7a89424..0a4d0540c 100644 --- a/app/scenes/GroupDelete.tsx +++ b/app/scenes/GroupDelete.tsx @@ -5,7 +5,7 @@ import { useHistory } from "react-router-dom"; import Group from "~/models/Group"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; +import Text from "~/components/Text"; import useToasts from "~/hooks/useToasts"; import { groupSettingsPath } from "~/utils/routeHelpers"; @@ -40,7 +40,7 @@ function GroupDelete({ group, onSubmit }: Props) { return ( - + , }} /> - + diff --git a/app/scenes/GroupEdit.tsx b/app/scenes/GroupEdit.tsx index 3b1d86575..31d9cd43b 100644 --- a/app/scenes/GroupEdit.tsx +++ b/app/scenes/GroupEdit.tsx @@ -4,8 +4,8 @@ import { useTranslation, Trans } from "react-i18next"; import Group from "~/models/Group"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; import Input from "~/components/Input"; +import Text from "~/components/Text"; import useToasts from "~/hooks/useToasts"; type Props = { @@ -48,12 +48,12 @@ function GroupEdit({ group, onSubmit }: Props) { return ( - + You can edit the name of this group at any time, however doing so too often might confuse your team mates. - + { return ( - + {t( "Add team members below to give them access to the group. Need to add someone who’s not yet on the team yet?" )}{" "} @@ -92,7 +92,7 @@ class AddPeopleToGroup extends React.Component { })} . - + {can.update ? ( <> - + , }} /> - + diff --git a/app/scenes/Settings/Security.tsx b/app/scenes/Settings/Security.tsx index 1025dd9a3..4a86a5d0e 100644 --- a/app/scenes/Settings/Security.tsx +++ b/app/scenes/Settings/Security.tsx @@ -5,10 +5,10 @@ import { useState } from "react"; import * as React from "react"; import { useTranslation, Trans } from "react-i18next"; import Heading from "~/components/Heading"; -import HelpText from "~/components/HelpText"; import InputSelect from "~/components/InputSelect"; import Scene from "~/components/Scene"; import Switch from "~/components/Switch"; +import Text from "~/components/Text"; import env from "~/env"; import useCurrentTeam from "~/hooks/useCurrentTeam"; import useStores from "~/hooks/useStores"; @@ -62,12 +62,12 @@ function Security() { Security - + Settings that impact the access, security, and content of your knowledge base. - + }> {t("Share Links")} - + Documents that have been shared are listed below. Anyone that has the public link can access a read-only version of the document until the link has been revoked. - + {can.manage && ( - + {!canShareDocuments && ( {t("Sharing is currently disabled.")} )}{" "} @@ -41,7 +41,7 @@ function Shares() { em: , }} /> - + )} {t("Shared documents")} )} - + , }} /> - + {env.SLACK_KEY ? ( <>

@@ -102,13 +102,13 @@ function Slack() {

 

{t("Collections")}

- + Connect Outline collections to Slack channels and messages will be automatically posted to Slack when documents are published or updated. - + {groupedCollections.map(([collection, integration]) => { diff --git a/app/scenes/Settings/Tokens.tsx b/app/scenes/Settings/Tokens.tsx index abf1c0edf..bdd3afb8d 100644 --- a/app/scenes/Settings/Tokens.tsx +++ b/app/scenes/Settings/Tokens.tsx @@ -6,11 +6,11 @@ import APITokenNew from "~/scenes/APITokenNew"; import { Action } from "~/components/Actions"; import Button from "~/components/Button"; import Heading from "~/components/Heading"; -import HelpText from "~/components/HelpText"; import Modal from "~/components/Modal"; import PaginatedList from "~/components/PaginatedList"; import Scene from "~/components/Scene"; import Subheading from "~/components/Subheading"; +import Text from "~/components/Text"; import useBoolean from "~/hooks/useBoolean"; import useCurrentTeam from "~/hooks/useCurrentTeam"; import useStores from "~/hooks/useStores"; @@ -42,7 +42,7 @@ function Tokens() { } > {t("API Tokens")} - + }> {t("Zapier")} - + Zapier is a platform that allows Outline to easily integrate with thousands of other business tools. Head over to Zapier to setup a "Zap" and start programmatically interacting with Outline.' - +

diff --git a/app/scenes/UserProfile.tsx b/app/scenes/UserProfile.tsx index 00bc4c6f0..0a5014f80 100644 --- a/app/scenes/UserProfile.tsx +++ b/app/scenes/UserProfile.tsx @@ -10,10 +10,10 @@ import Avatar from "~/components/Avatar"; import Badge from "~/components/Badge"; import Button from "~/components/Button"; import Flex from "~/components/Flex"; -import HelpText from "~/components/HelpText"; import Modal from "~/components/Modal"; import PaginatedDocumentList from "~/components/PaginatedDocumentList"; import Subheading from "~/components/Subheading"; +import Text from "~/components/Text"; import useCurrentUser from "~/hooks/useCurrentUser"; import useStores from "~/hooks/useStores"; import { settingsPath } from "~/utils/routeHelpers"; @@ -79,11 +79,11 @@ function UserProfile(props: Props) { }} heading={{t("Recently updated")}} empty={ - + {t("{{ userName }} hasn’t updated any documents yet.", { userName: user.name, })} - + } showCollection /> @@ -103,7 +103,7 @@ const StyledBadge = styled(Badge)` top: -2px; `; -const Meta = styled(HelpText)` +const Meta = styled(Text)` margin-top: -12px; `;