diff --git a/.changeset/fuzzy-bats-exercise.md b/.changeset/fuzzy-bats-exercise.md new file mode 100644 index 0000000000..df8a774f0f --- /dev/null +++ b/.changeset/fuzzy-bats-exercise.md @@ -0,0 +1,6 @@ +--- +'@twilio-paste/inline-code': patch +'@twilio-paste/core': patch +--- + +[Inline Code] Design upate to the default inline code to match the minimal styles with a view to deprecating "blue" inline code styles diff --git a/packages/paste-core/components/inline-code/src/index.tsx b/packages/paste-core/components/inline-code/src/index.tsx index dc40643df3..77b1eea635 100644 --- a/packages/paste-core/components/inline-code/src/index.tsx +++ b/packages/paste-core/components/inline-code/src/index.tsx @@ -1,35 +1,35 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import {Box, safelySpreadBoxProps} from '@twilio-paste/box'; -import type {BoxProps, BoxStyleProps} from '@twilio-paste/box'; +import type {BoxProps} from '@twilio-paste/box'; +/** + * Inline Code style variants. + * Minimal is a deprecated vairant that we now hide, but we can't remove as it's a breaking change + */ type InlineCodeVariants = 'default' | 'minimal'; export interface InlineCodeProps extends Partial> { children: string; element?: BoxProps['element']; + + /** + * Choose the badge variant you would like to use. + * Please not the `minimal` variant is now deprecated + * + * @type {InlineCodeVariants} + * @memberof InlineCodeProps + */ variant?: InlineCodeVariants; } -const variantStyles: Record = { - default: { - color: 'colorTextPrimaryStronger', - backgroundColor: 'colorBackgroundPrimaryWeakest', - borderColor: 'colorBorderPrimaryWeaker', - }, - minimal: { - color: 'colorTextWeak', - backgroundColor: 'colorBackgroundWeak', - borderColor: 'colorBorderWeak', - }, -}; - const InlineCode = React.forwardRef( ({children, element = 'INLINE_CODE', variant = 'default', ...props}, ref) => { return ( ( fontSize="inherit" lineHeight="inherit" paddingX="space20" - {...variantStyles[variant]} + color="inherit" + backgroundColor="colorBackgroundWeak" + borderColor="colorBorderWeak" ref={ref} > {children} diff --git a/packages/paste-core/components/inline-code/stories/index.stories.tsx b/packages/paste-core/components/inline-code/stories/index.stories.tsx index 317b71ac93..030a5bb2c3 100644 --- a/packages/paste-core/components/inline-code/stories/index.stories.tsx +++ b/packages/paste-core/components/inline-code/stories/index.stories.tsx @@ -19,10 +19,6 @@ export const Default: StoryFn = () => { return 0000001111111122234444444; }; -export const Minimal: StoryFn = () => { - return 0000001111111122234444444; -}; - export const ReallyLongContent: StoryFn = () => { return ( <> diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json index 20b94155cf..3e3692c50c 100644 --- a/packages/paste-website/package.json +++ b/packages/paste-website/package.json @@ -38,38 +38,51 @@ "@twilio-paste/box": "^9.0.0", "@twilio-paste/breadcrumb": "^10.0.0", "@twilio-paste/button": "^13.0.0", + "@twilio-paste/button-group": "^3.0.0", "@twilio-paste/callout": "^3.0.0", "@twilio-paste/card": "^8.0.0", + "@twilio-paste/chat-composer": "^3.0.0", "@twilio-paste/chat-log": "^4.0.0", "@twilio-paste/checkbox": "^12.0.0", "@twilio-paste/clipboard-copy-library": "^2.0.0", + "@twilio-paste/code-block": "^3.0.0", "@twilio-paste/color-contrast-utils": "^4.0.0", - "@twilio-paste/combobox": "^15.0.0", + "@twilio-paste/combobox": "^15.0.1", "@twilio-paste/combobox-primitive": "^1.0.0", "@twilio-paste/customization": "^7.0.0", "@twilio-paste/data-grid": "^7.0.0", "@twilio-paste/data-visualization-library": "^4.0.0", "@twilio-paste/date-picker": "^5.0.0", - "@twilio-paste/design-tokens": "^9.0.2", + "@twilio-paste/description-list": "^3.0.0", + "@twilio-paste/design-tokens": "^9.0.3", + "@twilio-paste/detail-text": "^2.0.0", "@twilio-paste/disclosure": "^11.0.0", "@twilio-paste/disclosure-primitive": "^1.0.0", "@twilio-paste/display-heading": "^3.0.0", "@twilio-paste/display-pill-group": "^7.0.0", "@twilio-paste/dropdown-library": "^2.0.0", + "@twilio-paste/file-picker": "^3.0.0", + "@twilio-paste/file-uploader": "^3.0.0", "@twilio-paste/flex": "^7.0.0", + "@twilio-paste/form": "^10.0.0", "@twilio-paste/form-pill-group": "^7.0.0", "@twilio-paste/grid": "^7.0.0", "@twilio-paste/heading": "^10.0.0", "@twilio-paste/help-text": "^12.0.0", - "@twilio-paste/icons": "^11.0.0", + "@twilio-paste/icons": "11.0.0", + "@twilio-paste/in-page-navigation": "^3.0.0", + "@twilio-paste/inline-code": "^3.0.0", "@twilio-paste/inline-control-group": "^12.0.0", "@twilio-paste/input": "^8.0.0", "@twilio-paste/input-box": "^9.0.0", - "@twilio-paste/label": "^12.0.0", + "@twilio-paste/label": "^12.0.1", + "@twilio-paste/lexical-library": "^2.0.0", "@twilio-paste/list": "^7.0.0", + "@twilio-paste/listbox-primitive": "^2.0.0", "@twilio-paste/media-object": "^9.0.0", "@twilio-paste/menu": "^13.0.0", "@twilio-paste/menu-primitive": "^1.0.0", + "@twilio-paste/minimizable-dialog": "^3.0.0", "@twilio-paste/modal": "^15.0.0", "@twilio-paste/modal-dialog-primitive": "^1.0.0", "@twilio-paste/non-modal-dialog-primitive": "^1.0.0", @@ -78,23 +91,26 @@ "@twilio-paste/popover": "^12.0.0", "@twilio-paste/radio-button-group": "^3.0.0", "@twilio-paste/radio-group": "^12.0.0", + "@twilio-paste/react-textarea-autosize-library": "^2.0.0", "@twilio-paste/reakit-library": "^1.0.0", "@twilio-paste/screen-reader-only": "^12.0.0", - "@twilio-paste/select": "^11.0.0", + "@twilio-paste/select": "^11.0.1", "@twilio-paste/separator": "^7.0.0", "@twilio-paste/sibling-box": "^8.0.0", - "@twilio-paste/side-modal": "^3.0.0", + "@twilio-paste/side-modal": "^3.0.1", "@twilio-paste/skeleton-loader": "^5.0.0", "@twilio-paste/spinner": "^13.0.0", "@twilio-paste/stack": "^7.0.0", "@twilio-paste/style-props": "^8.0.0", - "@twilio-paste/styling-library": "^2.0.0", + "@twilio-paste/styling-library": "^2.0.1", + "@twilio-paste/switch": "^4.0.0", + "@twilio-paste/syntax-highlighter-library": "^2.0.0", "@twilio-paste/table": "^7.0.0", "@twilio-paste/tabs": "^7.0.0", "@twilio-paste/tabs-primitive": "^1.0.0", "@twilio-paste/text": "^9.0.0", "@twilio-paste/textarea": "^9.0.0", - "@twilio-paste/theme": "^10.0.0", + "@twilio-paste/theme": "^10.0.1", "@twilio-paste/time-picker": "^5.0.0", "@twilio-paste/toast": "^11.0.0", "@twilio-paste/tooltip": "^10.0.0", diff --git a/packages/paste-website/src/components/ThemeObjectDisplay.tsx b/packages/paste-website/src/components/ThemeObjectDisplay.tsx index afe405cb85..ba79d1c5f2 100644 --- a/packages/paste-website/src/components/ThemeObjectDisplay.tsx +++ b/packages/paste-website/src/components/ThemeObjectDisplay.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import {Box} from '@twilio-paste/box'; import {useTheme} from '@twilio-paste/theme'; +import {CodeBlock} from '@twilio-paste/code-block'; import {format as prettyFormat} from 'pretty-format'; -import {Codeblock} from './codeblock'; - export const ThemeObjectDisplay: React.FC> = () => { const theme = useTheme(); const themeKeys = Object.keys(theme); @@ -13,8 +12,8 @@ export const ThemeObjectDisplay: React.FC> = () reducedTheme[key] = {}; }); return ( - - {prettyFormat(reducedTheme)} + + ); }; diff --git a/packages/paste-website/src/components/Typography.tsx b/packages/paste-website/src/components/Typography.tsx index fe0e9cb192..2900483827 100644 --- a/packages/paste-website/src/components/Typography.tsx +++ b/packages/paste-website/src/components/Typography.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import {Text} from '@twilio-paste/text'; import {Box} from '@twilio-paste/box'; -import type {BoxProps} from '@twilio-paste/box'; export interface PProps { variant?: 'default' | 'lead'; @@ -20,29 +19,5 @@ export const P: React.FC> = ({children, variant} }; export const Pre: React.FC = (props) => { - return ( - - {props.children} - - ); -}; - -export const InlineCode: React.FC> = (props) => { - return ( - - ); + return {props.children}; }; diff --git a/packages/paste-website/src/components/codeblock/index.tsx b/packages/paste-website/src/components/codeblock/index.tsx index 94b912b168..a85d27d37f 100644 --- a/packages/paste-website/src/components/codeblock/index.tsx +++ b/packages/paste-website/src/components/codeblock/index.tsx @@ -1,90 +1,18 @@ import * as React from 'react'; -import {styled, themeGet} from '@twilio-paste/styling-library'; -import Highlight, {defaultProps} from 'prism-react-renderer'; +import type {CodeBlockProps} from '@twilio-paste/code-block'; +import {CodeBlock} from '@twilio-paste/code-block'; -import {CodeblockTheme} from '../shortcodes/live-preview/theme'; - -const StyledCode = styled.code((props) => ({ - display: 'block', - borderRadius: themeGet('radii.borderRadius20')(props), - height: '100%', - fontFamily: themeGet('fonts.fontFamilyCode')(props), - fontSize: 'inherit', - lineHeight: themeGet('lineHeights.lineHeight30')(props), - overflowX: 'auto', - padding: `${themeGet('space.space40')(props)} ${themeGet('space.space60')(props)}`, - whiteSpace: 'pre-wrap', -})); - -export type Language = - | 'markup' - | 'bash' - | 'clike' - | 'c' - | 'cpp' - | 'css' - | 'javascript' - | 'jsx' - | 'coffeescript' - | 'actionscript' - | 'css-extr' - | 'diff' - | 'git' - | 'go' - | 'graphql' - | 'handlebars' - | 'json' - | 'less' - | 'makefile' - | 'markdown' - | 'objectivec' - | 'ocaml' - | 'python' - | 'reason' - | 'sass' - | 'scss' - | 'sql' - | 'stylus' - | 'typescript' - | 'wasm' - | 'yaml'; - -export interface CodeblockProps extends React.ComponentProps<'code'> { - children: string; - className?: string; - live?: boolean; -} - -const Codeblock: React.FC> = ({children, className = 'language-jsx'}) => { - const language = className.replace(/language-/, '') as Language; - - return ( - - {({className: _className, style, tokens, getLineProps, getTokenProps}) => { - const lastLineIndex = tokens.length - 1; - return ( - - {tokens.map((line, i) => { - // Codeblocks keep adding an extra blank line, this checks for that and removes it - if (i === lastLineIndex && line.length === 1 && (line[0].content === '' || line[0].empty)) { - return null; - } - - return ( - // eslint-disable-next-line react/no-array-index-key -
- {line.map((token, key) => ( - // eslint-disable-next-line react/no-array-index-key - - ))} -
- ); - })} - - ); - }} - - ); +export type CodeblockProps = CodeBlockProps & { + className: string; }; -export {Codeblock}; +export const Codeblock: React.FC> = ({ + children, + className = 'language-jsx', +}) => { + if (children == null) { + return null; + } + const language = className.replace(/language-/, '') as CodeBlockProps['language']; + return ; +}; diff --git a/packages/paste-website/src/components/icons-list/IconCard.tsx b/packages/paste-website/src/components/icons-list/IconCard.tsx index 948e2f0f52..116d785073 100644 --- a/packages/paste-website/src/components/icons-list/IconCard.tsx +++ b/packages/paste-website/src/components/icons-list/IconCard.tsx @@ -4,8 +4,8 @@ import {Heading} from '@twilio-paste/heading'; import {Box} from '@twilio-paste/box'; import {Text} from '@twilio-paste/text'; import {Paragraph} from '@twilio-paste/paragraph'; +import {CodeBlock} from '@twilio-paste/code-block'; -import {Codeblock} from '../codeblock'; import {CopyButton} from '../CopyButton'; import {SiteLink} from '../SiteLink'; import type {IconObject} from './types'; @@ -39,7 +39,7 @@ const IconCard: React.FC> = ({selectedIco Install using React - {iconSnippet(selectedIcon.name)} + diff --git a/packages/paste-website/src/components/paste-mdx-provider/index.tsx b/packages/paste-website/src/components/paste-mdx-provider/index.tsx index a0735c9a15..b1f643ab16 100644 --- a/packages/paste-website/src/components/paste-mdx-provider/index.tsx +++ b/packages/paste-website/src/components/paste-mdx-provider/index.tsx @@ -11,11 +11,12 @@ import {OrderedList, UnorderedList, ListItem} from '@twilio-paste/list'; import {Separator} from '@twilio-paste/separator'; import type {SeparatorProps} from '@twilio-paste/separator'; import {Table, THead, TBody, TFoot, Tr, Th, Td} from '@twilio-paste/table'; +import {InlineCode} from '@twilio-paste/inline-code'; -import {Codeblock} from '../codeblock'; import type {CodeblockProps} from '../codeblock'; +import {Codeblock} from '../codeblock'; import {AnchoredHeading} from '../Heading'; -import {InlineCode, Pre} from '../Typography'; +import {Pre} from '../Typography'; // Shortcode imports import {GenericHeader} from '../shortcodes/generic-header'; import {NormalizedPatternHeader} from '../shortcodes/normalized-pattern-header'; diff --git a/packages/paste-website/src/components/shortcodes/live-preview/index.tsx b/packages/paste-website/src/components/shortcodes/live-preview/index.tsx index f8426a274b..f9f24434e7 100644 --- a/packages/paste-website/src/components/shortcodes/live-preview/index.tsx +++ b/packages/paste-website/src/components/shortcodes/live-preview/index.tsx @@ -1,6 +1,7 @@ // https://github.com/FormidableLabs/react-live import * as React from 'react'; import {LiveProvider, LiveEditor, LiveError, LivePreview as ReactLivePreview} from 'react-live'; +import type {LiveProviderProps} from 'react-live'; import {Box} from '@twilio-paste/box'; import {Button} from '@twilio-paste/button'; import {Theme, useTheme} from '@twilio-paste/theme'; @@ -10,7 +11,6 @@ import {HideIcon} from '@twilio-paste/icons/esm/HideIcon'; import {CodeblockTheme} from './theme'; import {CodeBlockOverlayShadow} from './CodeBlockOverlayShadow'; -import type {Language} from '../../codeblock'; import {CopyButton} from '../../CopyButton'; import {ThemeSwitcher} from './ThemeSwitcher'; import {usePreviewThemeContext} from '../../../context/PreviewThemeContext'; @@ -18,7 +18,7 @@ import {usePreviewThemeContext} from '../../../context/PreviewThemeContext'; interface LivePreviewProps { children: string; scope: {[key: string]: any}; - language?: Language; + language?: LiveProviderProps['language']; disabled?: boolean; noInline?: boolean; showOverflow?: boolean; diff --git a/packages/paste-website/src/components/tokens-list/sectionIntros.tsx b/packages/paste-website/src/components/tokens-list/sectionIntros.tsx index 01dc4fed7b..a92bb5fd85 100644 --- a/packages/paste-website/src/components/tokens-list/sectionIntros.tsx +++ b/packages/paste-website/src/components/tokens-list/sectionIntros.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import {Box} from '@twilio-paste/box'; import {Paragraph} from '@twilio-paste/paragraph'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {InlineCode} from '@twilio-paste/inline-code'; import {SiteLink} from '../SiteLink'; -import {InlineCode} from '../Typography'; import type {Token} from './types'; const ColorGuidelinesLink: React.FC = () => Read the color guidelines; diff --git a/packages/paste-website/src/pages/components/inline-code/index.mdx b/packages/paste-website/src/pages/components/inline-code/index.mdx index b106e16f3f..f0118be6ea 100644 --- a/packages/paste-website/src/pages/components/inline-code/index.mdx +++ b/packages/paste-website/src/pages/components/inline-code/index.mdx @@ -86,14 +86,6 @@ Inline Code is also commonly used standalone for key pieces of code text, such a `} -### Minimal variant - -Set `variant="minimal"` to use a more subtle snippet of code. - - - {`WQC0000001111111122234444444`} - - ## Usage Guide ### API @@ -114,11 +106,10 @@ const ExampleInlineCode = () => console.log(mySustainabilityGoals) { ## The super family, Twilio Sans -Twilio’s branded typeface is a super family composed of three related, but distinct, typefaces: Display, Text, and Mono. Each is designed for a specific function that is core to the Twilio brand. +Twilio’s branded typeface is a super family composed of three related, but distinct, typefaces: Display, Text, and Mono. Each is designed for a specific function that is core to the Twilio brand. ### Use the right font for the job For our products, we have simplified the fonts used within Twilio Sans in order to quickly orient people to the most important information. -[Learn more about Twilio’s brand guidelines](https://www.twilio.com/brand/elements/typography) +[Learn more about Twilio’s brand guidelines](https://www.twilio.com/brand/elements/typography) @@ -214,7 +214,7 @@ Need a place to start in your designs? Start with [the Heading component](/compo #### When you have lots to say, use Twilio Sans Text Regular -In order to create juxtaposition and legibility within our designs, Twilio Sans Text’s Regular font weight is used for all body copy. This blends well and gives a nice balance with the headings that are Semibold. +In order to create juxtaposition and legibility within our designs, Twilio Sans Text’s Regular font weight is used for all body copy. This blends well and gives a nice balance with the headings that are Semibold. [The Paragraph component](/components/paragraph) is perfect for large blocks of content. @@ -235,7 +235,7 @@ In order to create juxtaposition and legibility within our designs, Twilio Sans #### Reserve Twilio Sans Text Medium for smaller type -For captions, we use Twilio Sans Text’s Medium font weight to anchor small units of type. +For captions, we use Twilio Sans Text’s Medium font weight to anchor small units of type. Need to display smaller, supplementary text under an image or add a footnote? Check out your new best friend, [the Detail Text component](/components/detail-text). @@ -278,38 +278,20 @@ Check out [the Code Block component](/components/code-block) and [the Inline Cod
Border-color: color-border-primary-weaker
- - Inline Code (minimal) -
-
- Font-family: Twilio Sans Mono -
- Font-weight: normal -
- Font-size: inherit -
- Line-height: inherit -
- Text-color: color-text-weak -
- Background-color: color-background-weak -
- Border-color: color-border-weak -

## Tokens and styles -Typography is managed through the use of design tokens in Paste. Type tokens are pre-set style decisions for font size, font weight, or leading (line height). Below are just a few examples of the many tokens and styles you can use to compose your UI’s. +Typography is managed through the use of design tokens in Paste. Type tokens are pre-set style decisions for font size, font weight, or leading (line height). Below are just a few examples of the many tokens and styles you can use to compose your UI’s. ### Some well-loved type tokens #### Size + leading (line-height) -Leading refers to the overall space between lines and blocks of content. In product, we use line-height to determine the amount of space a line of text takes up. It’s important to pick the appropriate line height with your selected type size for better readability and processing of information quickly. If your line heights look like a railroad track, they are too open. We don't want our lines of text to look too open nor too tight. +Leading refers to the overall space between lines and blocks of content. In product, we use line-height to determine the amount of space a line of text takes up. It’s important to pick the appropriate line height with your selected type size for better readability and processing of information quickly. If your line heights look like a railroad track, they are too open. We don't want our lines of text to look too open nor too tight. -In Paste, we’ve matched our line height and font size tokens so that it’s easy for you to pair them. For example, using `$font-size-40` with `$line-height-40` will give you the ideal sizing and spacing pair. The same is true for `$font-size-10` and `$line-height-10`, etc. +In Paste, we’ve matched our line height and font size tokens so that it’s easy for you to pair them. For example, using `$font-size-40` with `$line-height-40` will give you the ideal sizing and spacing pair. The same is true for `$font-size-10` and `$line-height-10`, etc. Heads up about font sizes in Paste @@ -363,7 +345,7 @@ In Paste, we’ve matched our line height and font size tokens so that it’s ea #### Text and icon colors -Text color tokens are used to define text and icon colors. We’ve created a set of accessible text color tokens to promote legibility and readability to be used on dark and light backgrounds. +Text color tokens are used to define text and icon colors. We’ve created a set of accessible text color tokens to promote legibility and readability to be used on dark and light backgrounds. We specifically have color-text-_ and color-text-icon-_ tokens, since icons have different contrast requirements. Since they are graphical objects, they only need to meet a 3:1 color contrast ratio, as opposed to text, which must meet 4.5:1. This means that icons can use any color-text-_ or color-text-icon-_ token, but text should never use color-text-icon-\* tokens. [Take a look at all our color text tokens.](/foundations/colors/#text-and-icon-colors) @@ -466,7 +448,7 @@ Most of our block-level typography components like Heading, Paragraph, and Detai ## Ever wonder why we make the choices we make when it comes to styling type? -Let’s do a small deep dive into some of our favorite tips for typography. +Let’s do a small deep dive into some of our favorite tips for typography. ### Alignment @@ -490,7 +472,7 @@ We suggest using a left alignment for styling UI copy in left-to-right languages #### When to center type -We don’t suggest centering large groups of text, it’s not always the most effective in information design and legibility. However, it may make sense within a card or under a data visual or image if it's a small amount of content. +We don’t suggest centering large groups of text, it’s not always the most effective in information design and legibility. However, it may make sense within a card or under a data visual or image if it's a small amount of content. @@ -553,7 +535,7 @@ Leading helps with legibility in your designs. Having leading too tight or too o #### All caps -We recommend avoiding forced capitalization. It’s not accessible with screen readers, and in many languages, does not translate. It also tends to be less legible than sentence case. +We recommend avoiding forced capitalization. It’s not accessible with screen readers, and in many languages, does not translate. It also tends to be less legible than sentence case. @@ -581,7 +563,7 @@ Developers should avoid using CSS, e.g. text-transform: capitalize; to handle ca [Read about capitalization and more on our localization page.](/foundations/localization/#avoid-forced-capitalization) -Here’s when you do capitalize: +Here’s when you do capitalize: - Proper nouns – products, people, places. - Products include features, programs, or systems that Twilio has given a specific name to. @@ -593,7 +575,7 @@ Here’s when you do capitalize: ### Stacked headings We understand that in product, typesetting is sometimes out of our control. -However, it’s good to be mindful of awkward ragged edges in our content blocks, known as [rags](https://fonts.google.com/knowledge/glossary/rag). We also want to be aware of [orphans and widows](https://fonts.google.com/knowledge/glossary/widows_orphans), which is where the content breaks awkwardly, and one word is alone on a single line. +However, it’s good to be mindful of awkward ragged edges in our content blocks, known as [rags](https://fonts.google.com/knowledge/glossary/rag). We also want to be aware of [orphans and widows](https://fonts.google.com/knowledge/glossary/widows_orphans), which is where the content breaks awkwardly, and one word is alone on a single line. Though we may not be able to adjust content blocks as screen sizes vary, we can still be mindful of these sorts of type accidents. They are especially noticeable in headings. We suggest stacking a headline into two or three lines, versus one long line, which helps to avoid widows. @@ -636,7 +618,7 @@ We want to create comfortable reading for our customers. We suggest no more than -It's also good practice to give more padding (space) if your content is within a container. Just like us humans, our type doesn’t like to feel claustrophobic. +It's also good practice to give more padding (space) if your content is within a container. Just like us humans, our type doesn’t like to feel claustrophobic. @@ -652,7 +634,7 @@ It's also good practice to give more padding (space) if your content is within a alt="do: make use of padding in text content areas; don't: let paragrapht text reach the borders of its parent component" /> -## Let’s play with type ✨ +## Let’s play with type ✨ ### 3-minute type zhush @@ -678,7 +660,7 @@ It's also good practice to give more padding (space) if your content is within a -## Here’s some typography resources we are loving +## Here’s some typography resources we are loving - [Thinking with Type, 2nd revised and expanded edition: A Critical Guide for Designers, Writers, Editors, & Students](https://www.amazon.com/Thinking-Type-2nd-revised-expanded/dp/1568989695/ref=zg_bs_1875_sccl_3/144-6229454-1545658?pd_rd_i=1568989695&psc=1) - [User Friendly: How the hidden Rules of Design Are Changing the Way We Live, Work, and Play](https://www.amazon.com/User-Friendly-Hidden-Design-Changing/dp/0374279756/ref=asc_df_0374279756/?tag=hyprod-20&linkCode=df0&hvadid=385641680285&hvpos=&hvnetw=g&hvrand=3773570413195077771&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9029145&hvtargid=pla-841674880230&psc=1&tag=&ref=&adgrpid=79288120715&hvpone=&hvptwo=&hvadid=385641680285&hvpos=&hvnetw=g&hvrand=3773570413195077771&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9029145&hvtargid=pla-841674880230) diff --git a/packages/paste-website/src/pages/introduction/about-paste/index.mdx b/packages/paste-website/src/pages/introduction/about-paste/index.mdx index c590b5a079..289f654409 100644 --- a/packages/paste-website/src/pages/introduction/about-paste/index.mdx +++ b/packages/paste-website/src/pages/introduction/about-paste/index.mdx @@ -9,7 +9,7 @@ import {Paragraph} from '@twilio-paste/paragraph'; import {UnorderedList, ListItem} from '@twilio-paste/list'; import {Anchor} from '@twilio-paste/anchor'; import {Disclosure, DisclosureHeading, DisclosureContent} from '@twilio-paste/disclosure'; -import {InlineCode} from '../../../components/Typography'; +import {InlineCode} from '@twilio-paste/inline-code'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../utils/api'; diff --git a/packages/paste-website/src/pages/primitives/text/index.mdx b/packages/paste-website/src/pages/primitives/text/index.mdx index 439518fef3..93318d516f 100644 --- a/packages/paste-website/src/pages/primitives/text/index.mdx +++ b/packages/paste-website/src/pages/primitives/text/index.mdx @@ -12,10 +12,10 @@ import packageJson from '@twilio-paste/text/package.json'; import {Paragraph} from '@twilio-paste/paragraph'; import Changelog from '@twilio-paste/text/CHANGELOG.md'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {InlineCode} from '@twilio-paste/inline-code'; import {SidebarCategoryRoutes} from '../../../constants'; import {DoDont, Do, Dont} from '../../../components/DoDont'; -import {InlineCode} from '../../../components/Typography'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; diff --git a/packages/paste-website/stories/InlineCode.stories.tsx b/packages/paste-website/stories/InlineCode.stories.tsx index 41b107da4a..87a9cafaa0 100644 --- a/packages/paste-website/stories/InlineCode.stories.tsx +++ b/packages/paste-website/stories/InlineCode.stories.tsx @@ -2,23 +2,20 @@ import * as React from 'react'; import {Anchor} from '@twilio-paste/anchor'; import {Box} from '@twilio-paste/box'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; - -import {InlineCode} from '../src/components/Typography'; +import {InlineCode} from '@twilio-paste/inline-code'; export const RegularInline = (): React.ReactNode => string; export const AnchorInline = (): React.ReactNode => ( - - string - + + string + ); export const ExternalAnchorInline = (): React.ReactNode => ( - - - string - - + + string + ); export const InParagraphInline = (): React.ReactNode => ( diff --git a/yarn.lock b/yarn.lock index 5ee675583b..bd78459a65 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10477,7 +10477,7 @@ __metadata: languageName: unknown linkType: soft -"@twilio-paste/code-block@^3.1.0, @twilio-paste/code-block@workspace:packages/paste-core/components/code-block": +"@twilio-paste/code-block@^3.0.0, @twilio-paste/code-block@^3.1.0, @twilio-paste/code-block@workspace:packages/paste-core/components/code-block": version: 0.0.0-use.local resolution: "@twilio-paste/code-block@workspace:packages/paste-core/components/code-block" dependencies: @@ -10596,7 +10596,7 @@ __metadata: languageName: unknown linkType: soft -"@twilio-paste/combobox@^15.0.0, @twilio-paste/combobox@^15.0.1, @twilio-paste/combobox@workspace:packages/paste-core/components/combobox": +"@twilio-paste/combobox@^15.0.1, @twilio-paste/combobox@workspace:packages/paste-core/components/combobox": version: 0.0.0-use.local resolution: "@twilio-paste/combobox@workspace:packages/paste-core/components/combobox" dependencies: @@ -11209,7 +11209,7 @@ __metadata: languageName: unknown linkType: soft -"@twilio-paste/file-picker@^3.0.1, @twilio-paste/file-picker@workspace:packages/paste-core/components/file-picker": +"@twilio-paste/file-picker@^3.0.0, @twilio-paste/file-picker@^3.0.1, @twilio-paste/file-picker@workspace:packages/paste-core/components/file-picker": version: 0.0.0-use.local resolution: "@twilio-paste/file-picker@workspace:packages/paste-core/components/file-picker" dependencies: @@ -11558,7 +11558,7 @@ __metadata: languageName: unknown linkType: soft -"@twilio-paste/icons@^11.0.0, @twilio-paste/icons@workspace:packages/paste-icons": +"@twilio-paste/icons@11.0.0, @twilio-paste/icons@^11.0.0, @twilio-paste/icons@workspace:packages/paste-icons": version: 0.0.0-use.local resolution: "@twilio-paste/icons@workspace:packages/paste-icons" dependencies: @@ -12527,7 +12527,7 @@ __metadata: languageName: unknown linkType: soft -"@twilio-paste/select@^11.0.0, @twilio-paste/select@^11.0.1, @twilio-paste/select@workspace:packages/paste-core/components/select": +"@twilio-paste/select@^11.0.1, @twilio-paste/select@workspace:packages/paste-core/components/select": version: 0.0.0-use.local resolution: "@twilio-paste/select@workspace:packages/paste-core/components/select" dependencies: @@ -12644,7 +12644,7 @@ __metadata: languageName: unknown linkType: soft -"@twilio-paste/side-modal@^3.0.0, @twilio-paste/side-modal@^3.0.1, @twilio-paste/side-modal@workspace:packages/paste-core/components/side-modal": +"@twilio-paste/side-modal@^3.0.1, @twilio-paste/side-modal@workspace:packages/paste-core/components/side-modal": version: 0.0.0-use.local resolution: "@twilio-paste/side-modal@workspace:packages/paste-core/components/side-modal" dependencies: @@ -13545,38 +13545,51 @@ __metadata: "@twilio-paste/box": ^9.0.0 "@twilio-paste/breadcrumb": ^10.0.0 "@twilio-paste/button": ^13.0.0 + "@twilio-paste/button-group": ^3.0.0 "@twilio-paste/callout": ^3.0.0 "@twilio-paste/card": ^8.0.0 + "@twilio-paste/chat-composer": ^3.0.0 "@twilio-paste/chat-log": ^4.0.0 "@twilio-paste/checkbox": ^12.0.0 "@twilio-paste/clipboard-copy-library": ^2.0.0 + "@twilio-paste/code-block": ^3.0.0 "@twilio-paste/color-contrast-utils": ^4.0.0 - "@twilio-paste/combobox": ^15.0.0 + "@twilio-paste/combobox": ^15.0.1 "@twilio-paste/combobox-primitive": ^1.0.0 "@twilio-paste/customization": ^7.0.0 "@twilio-paste/data-grid": ^7.0.0 "@twilio-paste/data-visualization-library": ^4.0.0 "@twilio-paste/date-picker": ^5.0.0 - "@twilio-paste/design-tokens": ^9.0.2 + "@twilio-paste/description-list": ^3.0.0 + "@twilio-paste/design-tokens": ^9.0.3 + "@twilio-paste/detail-text": ^2.0.0 "@twilio-paste/disclosure": ^11.0.0 "@twilio-paste/disclosure-primitive": ^1.0.0 "@twilio-paste/display-heading": ^3.0.0 "@twilio-paste/display-pill-group": ^7.0.0 "@twilio-paste/dropdown-library": ^2.0.0 + "@twilio-paste/file-picker": ^3.0.0 + "@twilio-paste/file-uploader": ^3.0.0 "@twilio-paste/flex": ^7.0.0 + "@twilio-paste/form": ^10.0.0 "@twilio-paste/form-pill-group": ^7.0.0 "@twilio-paste/grid": ^7.0.0 "@twilio-paste/heading": ^10.0.0 "@twilio-paste/help-text": ^12.0.0 - "@twilio-paste/icons": ^11.0.0 + "@twilio-paste/icons": 11.0.0 + "@twilio-paste/in-page-navigation": ^3.0.0 + "@twilio-paste/inline-code": ^3.0.0 "@twilio-paste/inline-control-group": ^12.0.0 "@twilio-paste/input": ^8.0.0 "@twilio-paste/input-box": ^9.0.0 - "@twilio-paste/label": ^12.0.0 + "@twilio-paste/label": ^12.0.1 + "@twilio-paste/lexical-library": ^2.0.0 "@twilio-paste/list": ^7.0.0 + "@twilio-paste/listbox-primitive": ^2.0.0 "@twilio-paste/media-object": ^9.0.0 "@twilio-paste/menu": ^13.0.0 "@twilio-paste/menu-primitive": ^1.0.0 + "@twilio-paste/minimizable-dialog": ^3.0.0 "@twilio-paste/modal": ^15.0.0 "@twilio-paste/modal-dialog-primitive": ^1.0.0 "@twilio-paste/non-modal-dialog-primitive": ^1.0.0 @@ -13585,23 +13598,26 @@ __metadata: "@twilio-paste/popover": ^12.0.0 "@twilio-paste/radio-button-group": ^3.0.0 "@twilio-paste/radio-group": ^12.0.0 + "@twilio-paste/react-textarea-autosize-library": ^2.0.0 "@twilio-paste/reakit-library": ^1.0.0 "@twilio-paste/screen-reader-only": ^12.0.0 - "@twilio-paste/select": ^11.0.0 + "@twilio-paste/select": ^11.0.1 "@twilio-paste/separator": ^7.0.0 "@twilio-paste/sibling-box": ^8.0.0 - "@twilio-paste/side-modal": ^3.0.0 + "@twilio-paste/side-modal": ^3.0.1 "@twilio-paste/skeleton-loader": ^5.0.0 "@twilio-paste/spinner": ^13.0.0 "@twilio-paste/stack": ^7.0.0 "@twilio-paste/style-props": ^8.0.0 - "@twilio-paste/styling-library": ^2.0.0 + "@twilio-paste/styling-library": ^2.0.1 + "@twilio-paste/switch": ^4.0.0 + "@twilio-paste/syntax-highlighter-library": ^2.0.0 "@twilio-paste/table": ^7.0.0 "@twilio-paste/tabs": ^7.0.0 "@twilio-paste/tabs-primitive": ^1.0.0 "@twilio-paste/text": ^9.0.0 "@twilio-paste/textarea": ^9.0.0 - "@twilio-paste/theme": ^10.0.0 + "@twilio-paste/theme": ^10.0.1 "@twilio-paste/time-picker": ^5.0.0 "@twilio-paste/toast": ^11.0.0 "@twilio-paste/tooltip": ^10.0.0