From e75c34750a4e744b4d43d45d0b1a1da3dffe3380 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 28 Apr 2021 07:41:53 -0700 Subject: [PATCH 1/6] components: Promote truncate --- docs/manifest.json | 6 ++++++ packages/components/src/index.js | 1 + packages/components/src/{ui => }/truncate/README.md | 0 packages/components/src/{ui => }/truncate/component.js | 2 +- packages/components/src/{ui => }/truncate/hook.js | 4 ++-- packages/components/src/truncate/index.js | 2 ++ packages/components/src/{ui => }/truncate/stories/index.js | 0 packages/components/src/{ui => }/truncate/styles.js | 0 packages/components/src/{ui => }/truncate/test/truncate.js | 0 packages/components/src/{ui => }/truncate/types.ts | 0 packages/components/src/{ui => }/truncate/utils.js | 0 packages/components/src/ui/index.js | 1 - packages/components/src/ui/text/hook.js | 2 +- packages/components/src/ui/text/types.ts | 2 +- packages/components/src/ui/truncate/index.js | 2 -- packages/components/tsconfig.json | 1 + 16 files changed, 15 insertions(+), 8 deletions(-) rename packages/components/src/{ui => }/truncate/README.md (100%) rename packages/components/src/{ui => }/truncate/component.js (94%) rename packages/components/src/{ui => }/truncate/hook.js (90%) create mode 100644 packages/components/src/truncate/index.js rename packages/components/src/{ui => }/truncate/stories/index.js (100%) rename packages/components/src/{ui => }/truncate/styles.js (100%) rename packages/components/src/{ui => }/truncate/test/truncate.js (100%) rename packages/components/src/{ui => }/truncate/types.ts (100%) rename packages/components/src/{ui => }/truncate/utils.js (100%) delete mode 100644 packages/components/src/ui/truncate/index.js diff --git a/docs/manifest.json b/docs/manifest.json index cb2e79f7e7f44f..5cc7e1e41570a3 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1139,6 +1139,12 @@ "markdown_source": "../packages/components/src/tree-select/README.md", "parent": "components" }, + { + "title": "Truncate", + "slug": "truncate", + "markdown_source": "../packages/components/src/truncate/README.md", + "parent": "components" + }, { "title": "UnitControl", "slug": "unit-control", diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 69fa690fa7cf35..d802378e1e4e4b 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -121,6 +121,7 @@ export { TreeGridItem as __experimentalTreeGridItem, } from './tree-grid'; export { default as TreeSelect } from './tree-select'; +export { default as __experimentalTruncate } from './truncate'; export { default as __experimentalUnitControl } from './unit-control'; export { default as VisuallyHidden } from './visually-hidden'; export { default as IsolatedEventContainer } from './isolated-event-container'; diff --git a/packages/components/src/ui/truncate/README.md b/packages/components/src/truncate/README.md similarity index 100% rename from packages/components/src/ui/truncate/README.md rename to packages/components/src/truncate/README.md diff --git a/packages/components/src/ui/truncate/component.js b/packages/components/src/truncate/component.js similarity index 94% rename from packages/components/src/ui/truncate/component.js rename to packages/components/src/truncate/component.js index d61585c7189980..f3e3b3674fc0da 100644 --- a/packages/components/src/ui/truncate/component.js +++ b/packages/components/src/truncate/component.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { createComponent } from '../utils'; +import { createComponent } from '../ui/utils'; import useTruncate from './hook'; /** diff --git a/packages/components/src/ui/truncate/hook.js b/packages/components/src/truncate/hook.js similarity index 90% rename from packages/components/src/ui/truncate/hook.js rename to packages/components/src/truncate/hook.js index 3f2bc5a5a7b3a1..07bfc21f6830fd 100644 --- a/packages/components/src/ui/truncate/hook.js +++ b/packages/components/src/truncate/hook.js @@ -11,12 +11,12 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { useContextSystem } from '../context'; +import { useContextSystem } from '../ui/context'; import * as styles from './styles'; import { TRUNCATE_ELLIPSIS, TRUNCATE_TYPE, truncateContent } from './utils'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../ui/context').ViewOwnProps} props */ export default function useTruncate( props ) { const { diff --git a/packages/components/src/truncate/index.js b/packages/components/src/truncate/index.js new file mode 100644 index 00000000000000..3d68d3a62d8151 --- /dev/null +++ b/packages/components/src/truncate/index.js @@ -0,0 +1,2 @@ +export { default } from './component'; +export { default as useTruncate } from './hook'; diff --git a/packages/components/src/ui/truncate/stories/index.js b/packages/components/src/truncate/stories/index.js similarity index 100% rename from packages/components/src/ui/truncate/stories/index.js rename to packages/components/src/truncate/stories/index.js diff --git a/packages/components/src/ui/truncate/styles.js b/packages/components/src/truncate/styles.js similarity index 100% rename from packages/components/src/ui/truncate/styles.js rename to packages/components/src/truncate/styles.js diff --git a/packages/components/src/ui/truncate/test/truncate.js b/packages/components/src/truncate/test/truncate.js similarity index 100% rename from packages/components/src/ui/truncate/test/truncate.js rename to packages/components/src/truncate/test/truncate.js diff --git a/packages/components/src/ui/truncate/types.ts b/packages/components/src/truncate/types.ts similarity index 100% rename from packages/components/src/ui/truncate/types.ts rename to packages/components/src/truncate/types.ts diff --git a/packages/components/src/ui/truncate/utils.js b/packages/components/src/truncate/utils.js similarity index 100% rename from packages/components/src/ui/truncate/utils.js rename to packages/components/src/truncate/utils.js diff --git a/packages/components/src/ui/index.js b/packages/components/src/ui/index.js index 40f1bb0fa5a43c..d25660977b9bb9 100644 --- a/packages/components/src/ui/index.js +++ b/packages/components/src/ui/index.js @@ -10,6 +10,5 @@ export * from './heading'; export * from './shortcut'; export * from './spinner'; export * from './text'; -export * from './truncate'; export * from './v-stack'; export * from './view'; diff --git a/packages/components/src/ui/text/hook.js b/packages/components/src/ui/text/hook.js index 4b6eb65ea0a674..923ee7be4cc1fa 100644 --- a/packages/components/src/ui/text/hook.js +++ b/packages/components/src/ui/text/hook.js @@ -13,7 +13,7 @@ import { useMemo, Children, cloneElement } from '@wordpress/element'; * Internal dependencies */ import { hasConnectNamespace, useContextSystem } from '../context'; -import { useTruncate } from '../truncate'; +import { useTruncate } from '../../truncate'; import { getOptimalTextShade } from '../utils'; import * as styles from './styles'; import { createHighlighterText } from './utils'; diff --git a/packages/components/src/ui/text/types.ts b/packages/components/src/ui/text/types.ts index 63a94694ee9980..faf411f23a4b29 100644 --- a/packages/components/src/ui/text/types.ts +++ b/packages/components/src/ui/text/types.ts @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import type { Props as TruncateProps } from '../truncate/types'; +import type { Props as TruncateProps } from '../../truncate/types'; /** * External dependencies diff --git a/packages/components/src/ui/truncate/index.js b/packages/components/src/ui/truncate/index.js deleted file mode 100644 index 0ea1912af03c8b..00000000000000 --- a/packages/components/src/ui/truncate/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Truncate } from './component'; -export { default as useTruncate } from './hook'; diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index b5bf38764f2d95..275e6bc5163f49 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -26,6 +26,7 @@ "src/shortcut/**/*", "src/spinner/**/*", "src/tip/**/*", + "src/truncate/**/*", "src/ui/**/*", "src/utils/**/*", "src/visually-hidden/**/*", From 3d61de583685c27a80e481416b8dce3341e4f810 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 28 Apr 2021 08:28:22 -0700 Subject: [PATCH 2/6] components: Promote text --- .../styles/resize-tooltip.styles.js | 2 - packages/components/src/text/README.md | 253 +++++++++++++++--- .../components/src/{ui => }/text/component.js | 4 +- .../src/{ui => }/text/get-line-height.ts | 4 +- packages/components/src/{ui => }/text/hook.js | 12 +- packages/components/src/text/index.js | 23 +- packages/components/src/text/next.js | 37 --- packages/components/src/text/stories/index.js | 63 +++-- .../components/src/{ui => }/text/styles.js | 2 +- .../components/src/text/styles/emotion-css.js | 6 - .../components/src/text/styles/font-family.js | 2 - .../{text-mixins.js => text-mixins.native.js} | 0 .../text/test/__snapshots__/text.js.snap | 0 packages/components/src/text/test/index.js | 98 ------- .../components/src/{ui => }/text/test/text.js | 0 .../components/src/{ui => }/text/types.ts | 2 +- .../components/src/{ui => }/text/utils.js | 0 .../src/ui/__storybook-utils/example-grid.js | 2 +- .../components/src/ui/card/stories/index.js | 2 +- .../components/src/ui/control-label/hook.js | 2 +- .../components/src/ui/control-label/types.ts | 2 +- .../src/ui/form-group/stories/index.js | 2 +- packages/components/src/ui/heading/hook.ts | 4 +- packages/components/src/ui/index.js | 1 - .../src/ui/surface/stories/index.js | 2 +- packages/components/src/ui/text/README.md | 237 ---------------- packages/components/src/ui/text/index.js | 2 - .../components/src/ui/text/stories/index.js | 53 ---- .../src/ui/tooltip/stories/index.js | 2 +- .../components/src/ui/tooltip/test/index.js | 2 +- .../header/document-actions/index.js | 6 +- .../src/components/template-details/index.js | 6 +- 32 files changed, 292 insertions(+), 541 deletions(-) rename packages/components/src/{ui => }/text/component.js (83%) rename packages/components/src/{ui => }/text/get-line-height.ts (91%) rename packages/components/src/{ui => }/text/hook.js (91%) delete mode 100644 packages/components/src/text/next.js rename packages/components/src/{ui => }/text/styles.js (94%) delete mode 100644 packages/components/src/text/styles/emotion-css.js delete mode 100644 packages/components/src/text/styles/font-family.js rename packages/components/src/text/styles/{text-mixins.js => text-mixins.native.js} (100%) rename packages/components/src/{ui => }/text/test/__snapshots__/text.js.snap (100%) delete mode 100644 packages/components/src/text/test/index.js rename packages/components/src/{ui => }/text/test/text.js (100%) rename packages/components/src/{ui => }/text/types.ts (97%) rename packages/components/src/{ui => }/text/utils.js (100%) delete mode 100644 packages/components/src/ui/text/README.md delete mode 100644 packages/components/src/ui/text/index.js delete mode 100644 packages/components/src/ui/text/stories/index.js diff --git a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js index 203bee6b3c4397..b3b998fc700197 100644 --- a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js +++ b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js @@ -7,7 +7,6 @@ import styled from '@emotion/styled'; * Internal dependencies */ import Text from '../../../text'; -import { text } from '../../../text/styles/text-mixins'; import { color } from '../../../utils/style-mixins'; export const Root = styled.div` @@ -45,7 +44,6 @@ export const Tooltip = styled.div` export const LabelText = styled( Text )` &&& { - ${ text }; display: block; font-size: 13px; line-height: 1.4; diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md index 68113190e0a48e..761098a169ebe8 100644 --- a/packages/components/src/text/README.md +++ b/packages/components/src/text/README.md @@ -1,54 +1,237 @@ # Text -A component for rendering text. +`Text` is a core component that renders text in the library, using the library's typography system. ## Usage +`Text` can be used to render any text-content, like an HTML `p` or `span`. + ```jsx -import { __experimentalText as Text } from '@wordpress/components'; +import { Text } from '@wordpress/components'; -const HeroPanel = () => ( - <> - - Hello World! - - Greetings to you! - -); +function Example() { + return Code is Poetry; +} ``` ## Props -The component accepts the following props: +##### adjustLineHeightForInnerControls + +**Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"` + +Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`). + +```jsx +import { Text, TextInput } from '@wordpress/components'; + +function Example() { + return ( + + Lorem ipsum dolor sit amet, consectetur + + + ); +} +``` + +##### align + +**Type**: `CSS['textAlign']` + +Adjusts the text alignment. + +```jsx +import { Text } from '@wordpress/components'; + +function Example() { + return ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit... + + ); +} +``` + +##### color + +**Type**: `CSS['color']` + +Adjusts the text color. + +##### display + +**Type**: `CSS['display']` + +Adjusts the CSS display. + +##### ellipsis + +**Type**: `string` + +The ellipsis string when `truncate` is set. + +##### ellipsizeMode + +**Type**: `"auto"`,`"head"`,`"tail"`,`"middle"` + +Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set `ellipsizeMode` to `middle` and a text `limit`. + +- `auto`: Trims content at the end automatically without a `limit`. +- `head`: Trims content at the beginning. Requires a `limit`. +- `middle`: Trims content in the middle. Requires a `limit`. +- `tail`: Trims content at the end. Requires a `limit`. + +##### highlightCaseSensitive + +**Type**: `boolean` + +Escape characters in `highlightWords` which are meaningful in regular expressions. + +##### highlightEscape + +**Type**: `boolean` + +Determines if `highlightWords` should be case sensitive. + +##### highlightSanitize + +**Type**: `boolean` + +Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true. + +##### highlightWords + +**Type**: `any[]` + +Letters or words within `Text` can be highlighted using `highlightWords`. + +```jsx +import { Text } from '@wordpress/components'; + +function Example() { + return ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex + neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac + mollis mi. Morbi id elementum massa. Suspendisse interdum auctor + ligula eget cursus. In fermentum ultricies mauris, pharetra + fermentum erat pellentesque id. + + ); +} +``` + +##### isBlock + +**Type**: `boolean` + +Sets `Text` to have `display: block`. + +##### isDestructive + +**Type**: `boolean` + +Renders a destructive color. + +##### limit + +**Type**: `number` + +Determines the max characters when `truncate` is set. + +##### lineHeight -#### as +**Type**: `CSS['lineHeight']` -Determines the HTML selector for the text. +Adjusts all text line-height based on the typography system. + +##### numberOfLines + +**Type**: `number` + +Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end. + +##### optimizeReadabilityFor + +**Type**: `CSS['color']` + +The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...). + +```jsx +import { Text, View } from '@wordpress/components'; + +function Example() { + const backgroundColor = 'blue'; + + return ( + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + ); +} +``` -For most use-cases you can use this component instead of a `h1`, `h2`, `h3`, `h4`, `h5`, `h6` or `p`. +##### size -- Type: `String` -- Required: No -- Default: '' +**Type**: `CSS['fontSize']`,`TextSize` -#### variant +Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`. + +```jsx +import { Text } from '@wordpress/components'; + +function Example() { + return Code is Poetry; +} +``` + +##### truncate + +**Type**: `boolean` + +Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways. + +```jsx +import { Text } from '@wordpress/components'; + +function Example() { + return ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex + neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac + mollis mi. Morbi id elementum massa. Suspendisse interdum auctor + ligula eget cursus. In fermentum ultricies mauris, pharetra + fermentum erat pellentesque id. + + ); +} +``` + +##### upperCase + +**Type**: `boolean` + +Uppercases the text content. + +##### variant + +**Type**: `"muted"` + +Adjusts style variation of the text. + +```jsx +import { Text } from '@wordpress/components'; + +function Example() { + return Code is Poetry; +} +``` -Determines the style for the text. Available variants: +##### weight -- `title` -- `title.large` -- `title.medium` -- `title.small` -- `subtitle` -- `subtitle.large` -- `subtitle.small` -- `body` -- `body.large` -- `body.small` -- `button` -- `caption` -- `label` +**Type**: `CSS['fontWeight']`,`TextWeight` -* Type: `String` -* Required: No -* Default: 'body' +Adjusts font-weight of the text. diff --git a/packages/components/src/ui/text/component.js b/packages/components/src/text/component.js similarity index 83% rename from packages/components/src/ui/text/component.js rename to packages/components/src/text/component.js index a659faa6b67fa8..10b4040ceaaed2 100644 --- a/packages/components/src/ui/text/component.js +++ b/packages/components/src/text/component.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { createComponent } from '../utils'; +import { createComponent } from '../ui/utils'; import useText from './hook'; /** @@ -13,7 +13,7 @@ import useText from './hook'; * @example * * ```jsx - * import { Text } from `@wordpress/components/ui`; + * import { Text } from `@wordpress/components`; * * function Example() { * return Code is Poetry; diff --git a/packages/components/src/ui/text/get-line-height.ts b/packages/components/src/text/get-line-height.ts similarity index 91% rename from packages/components/src/ui/text/get-line-height.ts rename to packages/components/src/text/get-line-height.ts index f298bf07d75e29..5a9b92d5784d3b 100644 --- a/packages/components/src/ui/text/get-line-height.ts +++ b/packages/components/src/text/get-line-height.ts @@ -8,8 +8,8 @@ import type { CSSProperties } from 'react'; * Internal dependencies */ import type { Props } from './types'; -import { space } from '../utils/space'; -import { CONFIG } from '../../utils'; +import { space } from '../ui/utils/space'; +import { CONFIG } from '../utils'; export function getLineHeight( adjustLineHeightForInnerControls: Props[ 'adjustLineHeightForInnerControls' ], diff --git a/packages/components/src/ui/text/hook.js b/packages/components/src/text/hook.js similarity index 91% rename from packages/components/src/ui/text/hook.js rename to packages/components/src/text/hook.js index 923ee7be4cc1fa..24bc033dc2dbcd 100644 --- a/packages/components/src/ui/text/hook.js +++ b/packages/components/src/text/hook.js @@ -12,17 +12,17 @@ import { useMemo, Children, cloneElement } from '@wordpress/element'; /** * Internal dependencies */ -import { hasConnectNamespace, useContextSystem } from '../context'; -import { useTruncate } from '../../truncate'; -import { getOptimalTextShade } from '../utils'; +import { hasConnectNamespace, useContextSystem } from '../ui/context'; +import { useTruncate } from '../truncate'; +import { getOptimalTextShade } from '../ui/utils'; import * as styles from './styles'; import { createHighlighterText } from './utils'; -import { getFontSize } from '../utils/font-size'; -import { CONFIG, COLORS } from '../../utils'; +import { getFontSize } from '../ui/utils/font-size'; +import { CONFIG, COLORS } from '../utils'; import { getLineHeight } from './get-line-height'; /** - * @param {import('../context').ViewOwnProps} props + * @param {import('../ui/context').ViewOwnProps} props */ export default function useText( props ) { const { diff --git a/packages/components/src/text/index.js b/packages/components/src/text/index.js index e6eb39c0c6cb34..a11c4fd3a65c2d 100644 --- a/packages/components/src/text/index.js +++ b/packages/components/src/text/index.js @@ -1,21 +1,2 @@ -/** - * External dependencies - */ -import styled from '@emotion/styled'; - -/** - * Internal dependencies - */ -import { text } from './styles/text-mixins'; -import { withNextComponent } from './next'; - -const Text = styled.p( - ` - box-sizing: border-box; - margin: 0; -`, - text -); - -// @ts-ignore Text _is_ forwarded ref but the styled component definition doesn't include $$typeof so we'll just ignore it here -export default withNextComponent( Text ); +export { default } from './component'; +export { default as useText } from './hook'; diff --git a/packages/components/src/text/next.js b/packages/components/src/text/next.js deleted file mode 100644 index a818f51cbe0cd0..00000000000000 --- a/packages/components/src/text/next.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Internal dependencies - */ -import { withNext } from '../ui/context'; -import { Text as NextText } from '../ui/text'; -import { text } from './styles/text-mixins'; - -const Text = process.env.COMPONENT_SYSTEM_PHASE === 1 ? NextText : undefined; - -/** - * @typedef AdaptedTextProps - * @property {keyof JSX.IntrinsicElements} as Styled components `as` prop. - * @property {import('./styles/text-mixins').TextVariant} variant The variant to render. - * @property {import('react').ReactNode} children Children to render. - * @property {string} [className] Classname to render on the element. - */ - -/** - * @param {AdaptedTextProps} props - */ -export const adapter = ( { as, variant, ...restProps } ) => ( { - // as has not changed - as, - // luckily `text` just returns an emotion CSS object, so we can pass the styles from that directly to the handy `css` prop - css: text( { variant } ).styles, - // mostly className and children - ...restProps, -} ); - -/* eslint-disable jsdoc/valid-types */ -/** - * @param {import('react').ForwardRefExoticComponent} Current - */ -/* eslint-enable jsdoc/valid-types */ -export function withNextComponent( Current ) { - return withNext( Current, Text, 'WPComponentsText', adapter ); -} diff --git a/packages/components/src/text/stories/index.js b/packages/components/src/text/stories/index.js index aeb3cd330fdd3a..653f48d214287e 100644 --- a/packages/components/src/text/stories/index.js +++ b/packages/components/src/text/stories/index.js @@ -1,30 +1,53 @@ /** * Internal dependencies */ -import Text from '../index'; +import { Text } from '..'; export default { - title: 'Components/Text', component: Text, + title: 'Components/Text', }; -export const _default = () => ( - <> - - Title Large - - - Title Medium +export const _default = () => { + return Hello; +}; + +export const truncate = () => { + return ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut + facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. + Duis semper dui id augue malesuada, ut feugiat nisi aliquam. + Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla + facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. + In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis + arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque + eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada + ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat + risus. Vivamus iaculis dui aliquet ante ultricies feugiat. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + posuere cubilia curae; Vivamus nec pretium velit, sit amet + consectetur ante. Praesent porttitor ex eget fermentum mattis. - - Title Small + ); +}; + +export const highlight = () => { + return ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut + facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. + Duis semper dui id augue malesuada, ut feugiat nisi aliquam. + Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla + facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. + In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis + arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque + eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada + ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat + risus. Vivamus iaculis dui aliquet ante ultricies feugiat. + Vestibulum ante ipsum primis in faucibus orci luctus et ultrices + posuere cubilia curae; Vivamus nec pretium velit, sit amet + consectetur ante. Praesent porttitor ex eget fermentum mattis. - Subtitle - Subtitle Small - Body - Body Small - Button - Caption - Label - -); + ); +}; diff --git a/packages/components/src/ui/text/styles.js b/packages/components/src/text/styles.js similarity index 94% rename from packages/components/src/ui/text/styles.js rename to packages/components/src/text/styles.js index 6ded079d76d36f..707e7d7f914d87 100644 --- a/packages/components/src/ui/text/styles.js +++ b/packages/components/src/text/styles.js @@ -6,7 +6,7 @@ import { css } from 'emotion'; /** * Internal dependencies */ -import { COLORS, CONFIG } from '../../utils'; +import { COLORS, CONFIG } from '../utils'; export const Text = css` color: ${ COLORS.black }; diff --git a/packages/components/src/text/styles/emotion-css.js b/packages/components/src/text/styles/emotion-css.js deleted file mode 100644 index c86ee0154e7630..00000000000000 --- a/packages/components/src/text/styles/emotion-css.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * External dependencies - */ -import { css } from '@emotion/core'; - -export default css; diff --git a/packages/components/src/text/styles/font-family.js b/packages/components/src/text/styles/font-family.js deleted file mode 100644 index 860cd63dee575f..00000000000000 --- a/packages/components/src/text/styles/font-family.js +++ /dev/null @@ -1,2 +0,0 @@ -export const fontFamily = `font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, -Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;`; diff --git a/packages/components/src/text/styles/text-mixins.js b/packages/components/src/text/styles/text-mixins.native.js similarity index 100% rename from packages/components/src/text/styles/text-mixins.js rename to packages/components/src/text/styles/text-mixins.native.js diff --git a/packages/components/src/ui/text/test/__snapshots__/text.js.snap b/packages/components/src/text/test/__snapshots__/text.js.snap similarity index 100% rename from packages/components/src/ui/text/test/__snapshots__/text.js.snap rename to packages/components/src/text/test/__snapshots__/text.js.snap diff --git a/packages/components/src/text/test/index.js b/packages/components/src/text/test/index.js deleted file mode 100644 index d2068ec9a1a828..00000000000000 --- a/packages/components/src/text/test/index.js +++ /dev/null @@ -1,98 +0,0 @@ -/** - * External dependencies - */ -import { render, unmountComponentAtNode } from 'react-dom'; -import { act } from 'react-dom/test-utils'; - -/** - * Internal dependencies - */ -import Text from '../'; - -let container = null; - -beforeEach( () => { - container = document.createElement( 'div' ); - document.body.appendChild( container ); -} ); - -afterEach( () => { - unmountComponentAtNode( container ); - container.remove(); - container = null; -} ); - -function getComputedStyle( node ) { - return node.ownerDocument.defaultView.getComputedStyle( node ); -} - -function getTextStyle( node ) { - const text = node || container.children[ 0 ]; - return getComputedStyle( text ); -} - -describe( 'Text', () => { - describe( 'Basic rendering', () => { - it( 'should render', () => { - act( () => { - render( Hello, container ); - } ); - - const [ text ] = container.children; - - expect( text.innerHTML ).toBe( 'Hello' ); - } ); - - it( 'should render as a

, by default', () => { - act( () => { - render( , container ); - } ); - - const [ text ] = container.children; - - expect( text.tagName ).toBe( 'P' ); - } ); - - it( 'should render as another selector, if specified', () => { - act( () => { - render( - <> - - - - - , - container - ); - } ); - - const [ h1, h2, span, div ] = container.children; - - expect( h1.tagName ).toBe( 'H1' ); - expect( h2.tagName ).toBe( 'H2' ); - expect( span.tagName ).toBe( 'SPAN' ); - expect( div.tagName ).toBe( 'DIV' ); - } ); - } ); - - describe( 'Variants', () => { - it( 'should render with specified variantion styles', () => { - act( () => { - render( - <> - Base - Title Large - Caption - , - container - ); - } ); - - const [ base, title, caption ] = container.children; - - expect( getTextStyle( base ).fontSize ).toBeFalsy(); - expect( getTextStyle( title ).fontSize ).toBe( '32px' ); - expect( getTextStyle( caption ).fontSize ).toBe( '12px' ); - } ); - } ); -} ); diff --git a/packages/components/src/ui/text/test/text.js b/packages/components/src/text/test/text.js similarity index 100% rename from packages/components/src/ui/text/test/text.js rename to packages/components/src/text/test/text.js diff --git a/packages/components/src/ui/text/types.ts b/packages/components/src/text/types.ts similarity index 97% rename from packages/components/src/ui/text/types.ts rename to packages/components/src/text/types.ts index faf411f23a4b29..63a94694ee9980 100644 --- a/packages/components/src/ui/text/types.ts +++ b/packages/components/src/text/types.ts @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import type { Props as TruncateProps } from '../../truncate/types'; +import type { Props as TruncateProps } from '../truncate/types'; /** * External dependencies diff --git a/packages/components/src/ui/text/utils.js b/packages/components/src/text/utils.js similarity index 100% rename from packages/components/src/ui/text/utils.js rename to packages/components/src/text/utils.js diff --git a/packages/components/src/ui/__storybook-utils/example-grid.js b/packages/components/src/ui/__storybook-utils/example-grid.js index 5c079a1490ee4d..7b3c073eeccf92 100644 --- a/packages/components/src/ui/__storybook-utils/example-grid.js +++ b/packages/components/src/ui/__storybook-utils/example-grid.js @@ -3,7 +3,7 @@ */ import { Grid } from '../grid'; import { Surface } from '../surface'; -import { Text } from '../text'; +import Text from '../../text'; import { View } from '../view'; import { VStack } from '../v-stack'; diff --git a/packages/components/src/ui/card/stories/index.js b/packages/components/src/ui/card/stories/index.js index bbbd8c0a5b4590..d44c093dbc8cec 100644 --- a/packages/components/src/ui/card/stories/index.js +++ b/packages/components/src/ui/card/stories/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import { Grid } from '../../grid'; -import { Text } from '../../text'; +import Text from '../../../text'; import { VStack } from '../../v-stack'; import { Card, CardBody, CardFooter } from '../index'; import { Divider } from '../../divider'; diff --git a/packages/components/src/ui/control-label/hook.js b/packages/components/src/ui/control-label/hook.js index d758dcb75092b6..81f201d80112ef 100644 --- a/packages/components/src/ui/control-label/hook.js +++ b/packages/components/src/ui/control-label/hook.js @@ -8,7 +8,7 @@ import { cx } from 'emotion'; */ import { useContextSystem } from '../context'; import { useFormGroupContextId } from '../form-group'; -import { useText } from '../text'; +import { useText } from '../../text'; import * as styles from './styles'; /** diff --git a/packages/components/src/ui/control-label/types.ts b/packages/components/src/ui/control-label/types.ts index 7fbed983546cd6..e76b7d3d895e73 100644 --- a/packages/components/src/ui/control-label/types.ts +++ b/packages/components/src/ui/control-label/types.ts @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import type { Props as TextProps } from '../text/types'; +import type { Props as TextProps } from '../../text/types'; export type Props = TextProps & { isBlock?: boolean; diff --git a/packages/components/src/ui/form-group/stories/index.js b/packages/components/src/ui/form-group/stories/index.js index c207ab2df5456d..226bbe0b64088a 100644 --- a/packages/components/src/ui/form-group/stories/index.js +++ b/packages/components/src/ui/form-group/stories/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import { FormGroup, useFormGroupContextId } from '../index'; -import { Text } from '../../text'; +import Text from '../../../text'; // @todo: Refactor this after adding next TextInput component. const TextInput = ( { id: idProp, ...props } ) => { diff --git a/packages/components/src/ui/heading/hook.ts b/packages/components/src/ui/heading/hook.ts index 98337acfc36c6c..44ba244611dcf8 100644 --- a/packages/components/src/ui/heading/hook.ts +++ b/packages/components/src/ui/heading/hook.ts @@ -4,8 +4,8 @@ import { useContextSystem } from '../context'; // eslint-disable-next-line no-duplicate-imports import type { ViewOwnProps } from '../context'; -import type { Props as TextProps } from '../text/types'; -import { useText } from '../text'; +import type { Props as TextProps } from '../../text/types'; +import { useText } from '../../text'; import { getHeadingFontSize } from '../utils/font-size'; import { CONFIG, COLORS } from '../../utils'; diff --git a/packages/components/src/ui/index.js b/packages/components/src/ui/index.js index d25660977b9bb9..43318054a97bfd 100644 --- a/packages/components/src/ui/index.js +++ b/packages/components/src/ui/index.js @@ -9,6 +9,5 @@ export * from './h-stack'; export * from './heading'; export * from './shortcut'; export * from './spinner'; -export * from './text'; export * from './v-stack'; export * from './view'; diff --git a/packages/components/src/ui/surface/stories/index.js b/packages/components/src/ui/surface/stories/index.js index cac136319bb58e..669eb9a4478078 100644 --- a/packages/components/src/ui/surface/stories/index.js +++ b/packages/components/src/ui/surface/stories/index.js @@ -7,7 +7,7 @@ import { boolean, number, select } from '@storybook/addon-knobs'; * Internal dependencies */ import { Surface } from '../index'; -import { Text } from '../../text'; +import Text from '../../../text'; export default { component: Surface, diff --git a/packages/components/src/ui/text/README.md b/packages/components/src/ui/text/README.md deleted file mode 100644 index 87fbb20ca3b664..00000000000000 --- a/packages/components/src/ui/text/README.md +++ /dev/null @@ -1,237 +0,0 @@ -# Text - -`Text` is a core component that renders text in the library, using the library's typography system. - -## Usage - -`Text` can be used to render any text-content, like an HTML `p` or `span`. - -```jsx -import { Text } from '@wordpress/components/ui'; - -function Example() { - return Code is Poetry; -} -``` - -## Props - -##### adjustLineHeightForInnerControls - -**Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"` - -Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`). - -```jsx -import { Text, TextInput } from '@wordpress/components/ui'; - -function Example() { - return ( - - Lorem ipsum dolor sit amet, consectetur - - - ); -} -``` - -##### align - -**Type**: `CSS['textAlign']` - -Adjusts the text alignment. - -```jsx -import { Text } from '@wordpress/components/ui'; - -function Example() { - return ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit... - - ); -} -``` - -##### color - -**Type**: `CSS['color']` - -Adjusts the text color. - -##### display - -**Type**: `CSS['display']` - -Adjusts the CSS display. - -##### ellipsis - -**Type**: `string` - -The ellipsis string when `truncate` is set. - -##### ellipsizeMode - -**Type**: `"auto"`,`"head"`,`"tail"`,`"middle"` - -Determines where to truncate. For example, we can truncate text right in the middle. To do this, we need to set `ellipsizeMode` to `middle` and a text `limit`. - -- `auto`: Trims content at the end automatically without a `limit`. -- `head`: Trims content at the beginning. Requires a `limit`. -- `middle`: Trims content in the middle. Requires a `limit`. -- `tail`: Trims content at the end. Requires a `limit`. - -##### highlightCaseSensitive - -**Type**: `boolean` - -Escape characters in `highlightWords` which are meaningful in regular expressions. - -##### highlightEscape - -**Type**: `boolean` - -Determines if `highlightWords` should be case sensitive. - -##### highlightSanitize - -**Type**: `boolean` - -Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true. - -##### highlightWords - -**Type**: `any[]` - -Letters or words within `Text` can be highlighted using `highlightWords`. - -```jsx -import { Text } from '@wordpress/components/ui'; - -function Example() { - return ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex - neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac - mollis mi. Morbi id elementum massa. Suspendisse interdum auctor - ligula eget cursus. In fermentum ultricies mauris, pharetra - fermentum erat pellentesque id. - - ); -} -``` - -##### isBlock - -**Type**: `boolean` - -Sets `Text` to have `display: block`. - -##### isDestructive - -**Type**: `boolean` - -Renders a destructive color. - -##### limit - -**Type**: `number` - -Determines the max characters when `truncate` is set. - -##### lineHeight - -**Type**: `CSS['lineHeight']` - -Adjusts all text line-height based on the typography system. - -##### numberOfLines - -**Type**: `number` - -Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end. - -##### optimizeReadabilityFor - -**Type**: `CSS['color']` - -The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...). - -```jsx -import { Text, View } from '@wordpress/components/ui'; - -function Example() { - const backgroundColor = 'blue'; - - return ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - - - ); -} -``` - -##### size - -**Type**: `CSS['fontSize']`,`TextSize` - -Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`. - -```jsx -import { Text } from '@wordpress/components/ui'; - -function Example() { - return Code is Poetry; -} -``` - -##### truncate - -**Type**: `boolean` - -Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways. - -```jsx -import { Text } from '@wordpress/components/ui'; - -function Example() { - return ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex - neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac - mollis mi. Morbi id elementum massa. Suspendisse interdum auctor - ligula eget cursus. In fermentum ultricies mauris, pharetra - fermentum erat pellentesque id. - - ); -} -``` - -##### upperCase - -**Type**: `boolean` - -Uppercases the text content. - -##### variant - -**Type**: `"muted"` - -Adjusts style variation of the text. - -```jsx -import { Text } from '@wordpress/components/ui'; - -function Example() { - return Code is Poetry; -} -``` - -##### weight - -**Type**: `CSS['fontWeight']`,`TextWeight` - -Adjusts font-weight of the text. diff --git a/packages/components/src/ui/text/index.js b/packages/components/src/ui/text/index.js deleted file mode 100644 index 2341fd018171b0..00000000000000 --- a/packages/components/src/ui/text/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Text } from './component'; -export { default as useText } from './hook'; diff --git a/packages/components/src/ui/text/stories/index.js b/packages/components/src/ui/text/stories/index.js deleted file mode 100644 index 34e7e5c21459c7..00000000000000 --- a/packages/components/src/ui/text/stories/index.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Internal dependencies - */ -import { Text } from '..'; - -export default { - component: Text, - title: 'G2 Components (Experimental)/Text', -}; - -export const _default = () => { - return Hello; -}; - -export const truncate = () => { - return ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut - facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. - Duis semper dui id augue malesuada, ut feugiat nisi aliquam. - Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla - facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. - In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis - arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque - eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada - ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat - risus. Vivamus iaculis dui aliquet ante ultricies feugiat. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices - posuere cubilia curae; Vivamus nec pretium velit, sit amet - consectetur ante. Praesent porttitor ex eget fermentum mattis. - - ); -}; - -export const highlight = () => { - return ( - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut - facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt. - Duis semper dui id augue malesuada, ut feugiat nisi aliquam. - Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla - facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel. - In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis - arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque - eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada - ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat - risus. Vivamus iaculis dui aliquet ante ultricies feugiat. - Vestibulum ante ipsum primis in faucibus orci luctus et ultrices - posuere cubilia curae; Vivamus nec pretium velit, sit amet - consectetur ante. Praesent porttitor ex eget fermentum mattis. - - ); -}; diff --git a/packages/components/src/ui/tooltip/stories/index.js b/packages/components/src/ui/tooltip/stories/index.js index 2822df04a46a6b..704c70501fcb83 100644 --- a/packages/components/src/ui/tooltip/stories/index.js +++ b/packages/components/src/ui/tooltip/stories/index.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { Text } from '../../index'; +import Text from '../../../text'; import { Tooltip } from '../index'; export default { diff --git a/packages/components/src/ui/tooltip/test/index.js b/packages/components/src/ui/tooltip/test/index.js index 7d135792cb75da..c17a5c71e3433a 100644 --- a/packages/components/src/ui/tooltip/test/index.js +++ b/packages/components/src/ui/tooltip/test/index.js @@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react'; /** * Internal dependencies */ -import { Text } from '../../text'; +import Text from '../../../text'; import { Tooltip } from '../index'; describe( 'props', () => { diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 3890e481958157..99fe151aae290f 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -92,7 +92,7 @@ export default function DocumentActions( { className="edit-site-document-actions__title-wrapper" > @@ -105,7 +105,7 @@ export default function DocumentActions( { @@ -113,7 +113,7 @@ export default function DocumentActions( { { label ?? '' } diff --git a/packages/edit-site/src/components/template-details/index.js b/packages/edit-site/src/components/template-details/index.js index 103c4f0e4107b2..9876606c38502a 100644 --- a/packages/edit-site/src/components/template-details/index.js +++ b/packages/edit-site/src/components/template-details/index.js @@ -43,11 +43,13 @@ export default function TemplateDetails( { template, onClose } ) { return ( <>

- { title } + + { title } + { description && ( { description } From e27e55a2ea2fdc4680ab3d594f39c7ea714008ee Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 28 Apr 2021 08:33:38 -0700 Subject: [PATCH 3/6] Fix resize tooltip font color --- .../resizable-box/resize-tooltip/styles/resize-tooltip.styles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js index b3b998fc700197..7837f7d6742fdd 100644 --- a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js +++ b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js @@ -44,6 +44,7 @@ export const Tooltip = styled.div` export const LabelText = styled( Text )` &&& { + color: white; display: block; font-size: 13px; line-height: 1.4; From f2e0eb3812d675c3232982b748e14389d6eabb83 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Wed, 28 Apr 2021 08:58:50 -0700 Subject: [PATCH 4/6] Fix test imports for text and truncate --- packages/components/src/text/test/text.js | 6 +++--- packages/components/src/truncate/test/truncate.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/text/test/text.js b/packages/components/src/text/test/text.js index 45b3d956c0809b..b30a18e735de5f 100644 --- a/packages/components/src/text/test/text.js +++ b/packages/components/src/text/test/text.js @@ -6,9 +6,9 @@ import { render } from '@testing-library/react'; /** * Internal dependencies */ -import { getFontSize } from '../../utils/font-size'; -import { COLORS } from '../../../utils/colors-values'; -import { Text } from '..'; +import { getFontSize } from '../../ui/utils/font-size'; +import { COLORS } from '../../utils'; +import Text from '..'; describe( 'Text', () => { describe( 'snapshot tests', () => { diff --git a/packages/components/src/truncate/test/truncate.js b/packages/components/src/truncate/test/truncate.js index 82b5b95d6e3e67..564ddcf3d66cb6 100644 --- a/packages/components/src/truncate/test/truncate.js +++ b/packages/components/src/truncate/test/truncate.js @@ -6,7 +6,7 @@ import { render } from '@testing-library/react'; /** * Internal dependencies */ -import { Truncate } from '..'; +import Truncate from '..'; describe( 'props', () => { test( 'should render correctly', () => { From 842f5652c9b51385834cdabafb703b8199b99fcf Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Thu, 29 Apr 2021 07:43:37 -0700 Subject: [PATCH 5/6] Update README --- packages/components/src/text/README.md | 58 +++++++++++++------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md index 761098a169ebe8..9b4f9ca2c2e9f3 100644 --- a/packages/components/src/text/README.md +++ b/packages/components/src/text/README.md @@ -7,7 +7,7 @@ `Text` can be used to render any text-content, like an HTML `p` or `span`. ```jsx -import { Text } from '@wordpress/components'; +import { __experimentalText as Text } from '@wordpress/components'; function Example() { return Code is Poetry; @@ -16,7 +16,7 @@ function Example() { ## Props -##### adjustLineHeightForInnerControls +### adjustLineHeightForInnerControls **Type**: `boolean`,`"large"`,`"medium"`,`"small"`,`"xSmall"` @@ -35,9 +35,9 @@ function Example() { } ``` -##### align +### align -**Type**: `CSS['textAlign']` +**Type**: `CSSProperties['textAlign']` Adjusts the text alignment. @@ -53,25 +53,25 @@ function Example() { } ``` -##### color +### color -**Type**: `CSS['color']` +**Type**: `CSSProperties['color']` Adjusts the text color. -##### display +### display -**Type**: `CSS['display']` +**Type**: `CSSProperties['display']` Adjusts the CSS display. -##### ellipsis +### ellipsis **Type**: `string` The ellipsis string when `truncate` is set. -##### ellipsizeMode +### ellipsizeMode **Type**: `"auto"`,`"head"`,`"tail"`,`"middle"` @@ -82,25 +82,25 @@ Determines where to truncate. For example, we can truncate text right in the mid - `middle`: Trims content in the middle. Requires a `limit`. - `tail`: Trims content at the end. Requires a `limit`. -##### highlightCaseSensitive +### highlightCaseSensitive **Type**: `boolean` Escape characters in `highlightWords` which are meaningful in regular expressions. -##### highlightEscape +### highlightEscape **Type**: `boolean` Determines if `highlightWords` should be case sensitive. -##### highlightSanitize +### highlightSanitize **Type**: `boolean` Array of search words. String search terms are automatically cast to RegExps unless `highlightEscape` is true. -##### highlightWords +### highlightWords **Type**: `any[]` @@ -122,39 +122,39 @@ function Example() { } ``` -##### isBlock +### isBlock **Type**: `boolean` Sets `Text` to have `display: block`. -##### isDestructive +### isDestructive **Type**: `boolean` Renders a destructive color. -##### limit +### limit **Type**: `number` Determines the max characters when `truncate` is set. -##### lineHeight +### lineHeight -**Type**: `CSS['lineHeight']` +**Type**: `CSSProperties['lineHeight']` Adjusts all text line-height based on the typography system. -##### numberOfLines +### numberOfLines **Type**: `number` Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end. -##### optimizeReadabilityFor +### optimizeReadabilityFor -**Type**: `CSS['color']` +**Type**: `CSSProperties['color']` The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...). @@ -174,9 +174,9 @@ function Example() { } ``` -##### size +### size -**Type**: `CSS['fontSize']`,`TextSize` +**Type**: `CSSProperties['fontSize']`,`TextSize` Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`. @@ -188,7 +188,7 @@ function Example() { } ``` -##### truncate +### truncate **Type**: `boolean` @@ -210,13 +210,13 @@ function Example() { } ``` -##### upperCase +### upperCase **Type**: `boolean` Uppercases the text content. -##### variant +### variant **Type**: `"muted"` @@ -230,8 +230,8 @@ function Example() { } ``` -##### weight +### weight -**Type**: `CSS['fontWeight']`,`TextWeight` +**Type**: `CSSProperties['fontWeight']`,`TextWeight` Adjusts font-weight of the text. From 3d9ae4e0f87c2099599c30d92f05e6044b05a622 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Fri, 30 Apr 2021 10:59:49 +0200 Subject: [PATCH 6/6] Fix integration issues --- packages/components/src/box-control/index.js | 2 +- packages/components/src/flex/flex/component.js | 7 ++++++- packages/components/src/flex/stories/index.js | 5 ++--- packages/components/src/flex/test/index.js | 4 +--- packages/components/src/index.js | 4 ++-- .../input-control/styles/input-control-styles.js | 2 +- .../src/navigation/styles/navigation-styles.js | 2 +- .../styles/resize-tooltip.styles.js | 2 +- packages/components/src/text/README.md | 16 ++++++++-------- packages/components/src/text/component.js | 2 +- packages/components/src/text/index.js | 2 +- packages/components/src/text/stories/index.js | 2 +- .../{text.js.snap => index.js.snap} | 0 .../src/text/test/{text.js => index.js} | 2 +- packages/components/src/truncate/README.md | 4 ++-- packages/components/src/truncate/component.js | 2 +- packages/components/src/truncate/index.js | 2 +- .../src/truncate/test/{truncate.js => index.js} | 2 +- .../src/ui/__storybook-utils/example-grid.js | 2 +- packages/components/src/ui/card/stories/index.js | 2 +- .../src/ui/form-group/stories/index.js | 2 +- .../components/src/ui/surface/stories/index.js | 2 +- .../components/src/ui/tooltip/stories/index.js | 2 +- packages/components/src/ui/tooltip/test/index.js | 2 +- 24 files changed, 38 insertions(+), 36 deletions(-) rename packages/components/src/text/test/__snapshots__/{text.js.snap => index.js.snap} (100%) rename packages/components/src/text/test/{text.js => index.js} (99%) rename packages/components/src/truncate/test/{truncate.js => index.js} (97%) diff --git a/packages/components/src/box-control/index.js b/packages/components/src/box-control/index.js index 9421792b564717..21bf8314270ba0 100644 --- a/packages/components/src/box-control/index.js +++ b/packages/components/src/box-control/index.js @@ -18,7 +18,7 @@ import { FlexItem, FlexBlock } from '../flex'; import AllInputControl from './all-input-control'; import InputControls from './input-controls'; import BoxControlIcon from './icon'; -import Text from '../text'; +import { Text } from '../text'; import LinkedButton from './linked-button'; import Visualizer from './visualizer'; import { diff --git a/packages/components/src/flex/flex/component.js b/packages/components/src/flex/flex/component.js index 21e8ff24b08163..310b85c53369be 100644 --- a/packages/components/src/flex/flex/component.js +++ b/packages/components/src/flex/flex/component.js @@ -33,7 +33,12 @@ function Flex( props, forwardedRef ) { * * @example * ```jsx - * import { Flex, FlexItem, FlexBlock, Text } from `@wordpress/components/ui`; + * import { + * __experimentalFlex as Flex, + * __experimentalFlexBlock as FlexBlock, + * __experimentalFlexItem as FlexItem, + * __experimentalText as Text + * } from `@wordpress/components`; * * function Example() { * return ( diff --git a/packages/components/src/flex/stories/index.js b/packages/components/src/flex/stories/index.js index a1b27e8b8a2656..c5860db4c3ee3c 100644 --- a/packages/components/src/flex/stories/index.js +++ b/packages/components/src/flex/stories/index.js @@ -1,9 +1,8 @@ /** * Internal dependencies */ -import Flex from '../flex'; -import FlexItem from '../flex-item'; -import { View } from '../../view'; +import { Flex, FlexItem } from '../'; +import { View } from '../../ui/view'; export default { component: Flex, diff --git a/packages/components/src/flex/test/index.js b/packages/components/src/flex/test/index.js index d20b383cbb883c..a4ce8fb8ef141a 100644 --- a/packages/components/src/flex/test/index.js +++ b/packages/components/src/flex/test/index.js @@ -7,9 +7,7 @@ import { render } from '@testing-library/react'; * Internal dependencies */ import { View } from '../../ui/view'; -import Flex from '../flex'; -import FlexItem from '../flex-item'; -import FlexBlock from '../flex-block'; +import { Flex, FlexBlock, FlexItem } from '../'; describe( 'props', () => { let base; diff --git a/packages/components/src/index.js b/packages/components/src/index.js index d802378e1e4e4b..bed734fbd31bfb 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -102,7 +102,7 @@ export { default as Snackbar } from './snackbar'; export { default as SnackbarList } from './snackbar/list'; export { default as Spinner } from './spinner'; export { default as TabPanel } from './tab-panel'; -export { default as __experimentalText } from './text'; +export { Text as __experimentalText } from './text'; export { default as TextControl } from './text-control'; export { default as TextareaControl } from './textarea-control'; export { default as TextHighlight } from './text-highlight'; @@ -121,7 +121,7 @@ export { TreeGridItem as __experimentalTreeGridItem, } from './tree-grid'; export { default as TreeSelect } from './tree-select'; -export { default as __experimentalTruncate } from './truncate'; +export { Truncate as __experimentalTruncate } from './truncate'; export { default as __experimentalUnitControl } from './unit-control'; export { default as VisuallyHidden } from './visually-hidden'; export { default as IsolatedEventContainer } from './isolated-event-container'; diff --git a/packages/components/src/input-control/styles/input-control-styles.js b/packages/components/src/input-control/styles/input-control-styles.js index 9aa80b78db50a1..759f52ef0608b8 100644 --- a/packages/components/src/input-control/styles/input-control-styles.js +++ b/packages/components/src/input-control/styles/input-control-styles.js @@ -8,7 +8,7 @@ import styled from '@emotion/styled'; * Internal dependencies */ import { Flex, FlexItem } from '../../flex'; -import Text from '../../text'; +import { Text } from '../../text'; import { color, rtl } from '../../utils/style-mixins'; const rootFloatLabelStyles = () => { diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index 48331fe94a789c..862579cc54b48d 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -13,7 +13,7 @@ import { isRTL } from '@wordpress/i18n'; */ import { G2, UI } from '../../utils/colors-values'; import Button from '../../button'; -import Text from '../../text'; +import { Text } from '../../text'; import { reduceMotion, space, rtl } from '../../utils'; export const NavigationUI = styled.div` diff --git a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js index 7837f7d6742fdd..ea134719d50fe6 100644 --- a/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js +++ b/packages/components/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js @@ -6,7 +6,7 @@ import styled from '@emotion/styled'; /** * Internal dependencies */ -import Text from '../../../text'; +import { Text } from '../../../text'; import { color } from '../../../utils/style-mixins'; export const Root = styled.div` diff --git a/packages/components/src/text/README.md b/packages/components/src/text/README.md index 9b4f9ca2c2e9f3..51ecdbd1d465a4 100644 --- a/packages/components/src/text/README.md +++ b/packages/components/src/text/README.md @@ -1,4 +1,4 @@ -# Text +# Text (Experimental) `Text` is a core component that renders text in the library, using the library's typography system. @@ -23,7 +23,7 @@ function Example() { Automatically calculate the appropriate line-height value for contents that render text and Control elements (e.g. `TextInput`). ```jsx -import { Text, TextInput } from '@wordpress/components'; +import { __experimentalText as Text, TextInput } from '@wordpress/components'; function Example() { return ( @@ -42,7 +42,7 @@ function Example() { Adjusts the text alignment. ```jsx -import { Text } from '@wordpress/components'; +import { __experimentalText as Text } from '@wordpress/components'; function Example() { return ( @@ -107,7 +107,7 @@ Array of search words. String search terms are automatically cast to RegExps unl Letters or words within `Text` can be highlighted using `highlightWords`. ```jsx -import { Text } from '@wordpress/components'; +import { __experimentalText as Text } from '@wordpress/components'; function Example() { return ( @@ -159,7 +159,7 @@ Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` The `Text` color can be adapted to a background color for optimal readability. `optimizeReadabilityFor` can accept CSS variables, in addition to standard CSS color values (e.g. Hex, RGB, HSL, etc...). ```jsx -import { Text, View } from '@wordpress/components'; +import { __experimentalText as Text, View } from '@wordpress/components'; function Example() { const backgroundColor = 'blue'; @@ -181,7 +181,7 @@ function Example() { Adjusts text size based on the typography system. `Text` can render a wide range of font sizes, which are automatically calculated and adapted to the typography system. The `size` value can be a system preset, a `number`, or a custom unit value (`string`) such as `30em`. ```jsx -import { Text } from '@wordpress/components'; +import { __experimentalText as Text } from '@wordpress/components'; function Example() { return Code is Poetry; @@ -195,7 +195,7 @@ function Example() { Enables text truncation. When `truncate` is set,we are able to truncate the long text in a variety of ways. ```jsx -import { Text } from '@wordpress/components'; +import { __experimentalText as Text } from '@wordpress/components'; function Example() { return ( @@ -223,7 +223,7 @@ Uppercases the text content. Adjusts style variation of the text. ```jsx -import { Text } from '@wordpress/components'; +import { __experimentalText as Text } from '@wordpress/components'; function Example() { return Code is Poetry; diff --git a/packages/components/src/text/component.js b/packages/components/src/text/component.js index 10b4040ceaaed2..bd7f063294521e 100644 --- a/packages/components/src/text/component.js +++ b/packages/components/src/text/component.js @@ -13,7 +13,7 @@ import useText from './hook'; * @example * * ```jsx - * import { Text } from `@wordpress/components`; + * import { __experimentalText as Text } from `@wordpress/components`; * * function Example() { * return Code is Poetry; diff --git a/packages/components/src/text/index.js b/packages/components/src/text/index.js index a11c4fd3a65c2d..2341fd018171b0 100644 --- a/packages/components/src/text/index.js +++ b/packages/components/src/text/index.js @@ -1,2 +1,2 @@ -export { default } from './component'; +export { default as Text } from './component'; export { default as useText } from './hook'; diff --git a/packages/components/src/text/stories/index.js b/packages/components/src/text/stories/index.js index 653f48d214287e..34e7e5c21459c7 100644 --- a/packages/components/src/text/stories/index.js +++ b/packages/components/src/text/stories/index.js @@ -5,7 +5,7 @@ import { Text } from '..'; export default { component: Text, - title: 'Components/Text', + title: 'G2 Components (Experimental)/Text', }; export const _default = () => { diff --git a/packages/components/src/text/test/__snapshots__/text.js.snap b/packages/components/src/text/test/__snapshots__/index.js.snap similarity index 100% rename from packages/components/src/text/test/__snapshots__/text.js.snap rename to packages/components/src/text/test/__snapshots__/index.js.snap diff --git a/packages/components/src/text/test/text.js b/packages/components/src/text/test/index.js similarity index 99% rename from packages/components/src/text/test/text.js rename to packages/components/src/text/test/index.js index b30a18e735de5f..093f0a4eb29a68 100644 --- a/packages/components/src/text/test/text.js +++ b/packages/components/src/text/test/index.js @@ -8,7 +8,7 @@ import { render } from '@testing-library/react'; */ import { getFontSize } from '../../ui/utils/font-size'; import { COLORS } from '../../utils'; -import Text from '..'; +import { Text } from '../'; describe( 'Text', () => { describe( 'snapshot tests', () => { diff --git a/packages/components/src/truncate/README.md b/packages/components/src/truncate/README.md index 76c98c0a4166bf..663f04b1119f6b 100644 --- a/packages/components/src/truncate/README.md +++ b/packages/components/src/truncate/README.md @@ -5,7 +5,7 @@ ## Usage ```jsx -import { Truncate } from '@wordpress/components/ui'; +import { __experimentalTruncate as Truncate } from '@wordpress/components'; function Example() { return ( @@ -50,7 +50,7 @@ Determines the max characters when `truncate` is set. Clamps the text content to the specifiec `numberOfLines`, adding the `ellipsis` at the end. ```jsx -import { Truncate } from '@wordpress/components/ui'; +import { __experimentalTruncate as Truncate } from '@wordpress/components'; function Example() { return ( diff --git a/packages/components/src/truncate/component.js b/packages/components/src/truncate/component.js index f3e3b3674fc0da..5cb453b778c8de 100644 --- a/packages/components/src/truncate/component.js +++ b/packages/components/src/truncate/component.js @@ -12,7 +12,7 @@ import useTruncate from './hook'; * * @example * ```jsx - * import { Truncate } from `@wordpress/components/ui`; + * import { __experimentalTruncate as Truncate } from `@wordpress/components`; * * function Example() { * return ( diff --git a/packages/components/src/truncate/index.js b/packages/components/src/truncate/index.js index 3d68d3a62d8151..0ea1912af03c8b 100644 --- a/packages/components/src/truncate/index.js +++ b/packages/components/src/truncate/index.js @@ -1,2 +1,2 @@ -export { default } from './component'; +export { default as Truncate } from './component'; export { default as useTruncate } from './hook'; diff --git a/packages/components/src/truncate/test/truncate.js b/packages/components/src/truncate/test/index.js similarity index 97% rename from packages/components/src/truncate/test/truncate.js rename to packages/components/src/truncate/test/index.js index 564ddcf3d66cb6..82b5b95d6e3e67 100644 --- a/packages/components/src/truncate/test/truncate.js +++ b/packages/components/src/truncate/test/index.js @@ -6,7 +6,7 @@ import { render } from '@testing-library/react'; /** * Internal dependencies */ -import Truncate from '..'; +import { Truncate } from '..'; describe( 'props', () => { test( 'should render correctly', () => { diff --git a/packages/components/src/ui/__storybook-utils/example-grid.js b/packages/components/src/ui/__storybook-utils/example-grid.js index 7b3c073eeccf92..7ba8a2725329cd 100644 --- a/packages/components/src/ui/__storybook-utils/example-grid.js +++ b/packages/components/src/ui/__storybook-utils/example-grid.js @@ -3,7 +3,7 @@ */ import { Grid } from '../grid'; import { Surface } from '../surface'; -import Text from '../../text'; +import { Text } from '../../text'; import { View } from '../view'; import { VStack } from '../v-stack'; diff --git a/packages/components/src/ui/card/stories/index.js b/packages/components/src/ui/card/stories/index.js index d44c093dbc8cec..dff054f89ffb90 100644 --- a/packages/components/src/ui/card/stories/index.js +++ b/packages/components/src/ui/card/stories/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import { Grid } from '../../grid'; -import Text from '../../../text'; +import { Text } from '../../../text'; import { VStack } from '../../v-stack'; import { Card, CardBody, CardFooter } from '../index'; import { Divider } from '../../divider'; diff --git a/packages/components/src/ui/form-group/stories/index.js b/packages/components/src/ui/form-group/stories/index.js index 226bbe0b64088a..ba693c3825fe4e 100644 --- a/packages/components/src/ui/form-group/stories/index.js +++ b/packages/components/src/ui/form-group/stories/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import { FormGroup, useFormGroupContextId } from '../index'; -import Text from '../../../text'; +import { Text } from '../../../text'; // @todo: Refactor this after adding next TextInput component. const TextInput = ( { id: idProp, ...props } ) => { diff --git a/packages/components/src/ui/surface/stories/index.js b/packages/components/src/ui/surface/stories/index.js index 669eb9a4478078..7ab5b68b329e8d 100644 --- a/packages/components/src/ui/surface/stories/index.js +++ b/packages/components/src/ui/surface/stories/index.js @@ -7,7 +7,7 @@ import { boolean, number, select } from '@storybook/addon-knobs'; * Internal dependencies */ import { Surface } from '../index'; -import Text from '../../../text'; +import { Text } from '../../../text'; export default { component: Surface, diff --git a/packages/components/src/ui/tooltip/stories/index.js b/packages/components/src/ui/tooltip/stories/index.js index 704c70501fcb83..e216b126def9ea 100644 --- a/packages/components/src/ui/tooltip/stories/index.js +++ b/packages/components/src/ui/tooltip/stories/index.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import Text from '../../../text'; +import { Text } from '../../../text'; import { Tooltip } from '../index'; export default { diff --git a/packages/components/src/ui/tooltip/test/index.js b/packages/components/src/ui/tooltip/test/index.js index c17a5c71e3433a..b1ac48ff350437 100644 --- a/packages/components/src/ui/tooltip/test/index.js +++ b/packages/components/src/ui/tooltip/test/index.js @@ -6,7 +6,7 @@ import { render, screen } from '@testing-library/react'; /** * Internal dependencies */ -import Text from '../../../text'; +import { Text } from '../../../text'; import { Tooltip } from '../index'; describe( 'props', () => {