From ff5d842e94ece7d1420bc27d41eca6499bba3340 Mon Sep 17 00:00:00 2001 From: Juan Andrade Date: Mon, 3 Jun 2024 14:51:48 -0400 Subject: [PATCH] Migrate Typography to Panda CSS --- .changeset/rare-actors-boil.md | 3 +- .../typography.stories.tsx | 8 +- .../src/components/text.tsx | 69 ++++++++++++++--- .../src/components/text-field.tsx | 6 +- .../src/util/styles.ts | 74 ++++++++++--------- panda.config.ts | 2 +- 6 files changed, 105 insertions(+), 57 deletions(-) diff --git a/.changeset/rare-actors-boil.md b/.changeset/rare-actors-boil.md index 1bb73356a..17ffec150 100644 --- a/.changeset/rare-actors-boil.md +++ b/.changeset/rare-actors-boil.md @@ -1,5 +1,6 @@ --- "@khanacademy/wonder-blocks-form": major +"@khanacademy/wonder-blocks-typography": major --- -Migrate TextField to PandaCSS +Migrate TextField and Typography to PandaCSS diff --git a/__docs__/wonder-blocks-typography/typography.stories.tsx b/__docs__/wonder-blocks-typography/typography.stories.tsx index b1c3c4cb9..6eabb96df 100644 --- a/__docs__/wonder-blocks-typography/typography.stories.tsx +++ b/__docs__/wonder-blocks-typography/typography.stories.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import {css, StyleSheet} from "aphrodite"; +// import {css, StyleSheet} from "aphrodite"; import type {Meta, StoryObj} from "@storybook/react"; import {View} from "@khanacademy/wonder-blocks-core"; @@ -31,6 +31,8 @@ import TypographyArgTypes from "./typography.argtypes"; // NOTE: Only for testing purposes. // eslint-disable-next-line import/no-unassigned-import import "./styles.css"; +import {SystemStyleObject} from "@/styled-system/types"; +import {css} from "@/styled-system/css"; const typographyDescription = `Typography. \`wonder-blocks-typography\` provides a set of standardized components for displaying text in a consistent @@ -117,14 +119,14 @@ TypographyElements.parameters = { */ export const WithStyle: StoryObj = { render: () => { - const styles = StyleSheet.create({ + const styles: Record = { blueText: { color: color.blue, }, highlighted: { background: color.offBlack16, }, - }); + }; return ( 0 && + style.some( + (s) => + s && + typeof s === "object" && + Object.prototype.hasOwnProperty.call(s, "_definition"), + )) + ); +} + +const rawStyles: Record<string, SystemStyleObject> = { + text: { + fontSmoothing: "antialiased", + }, + header: { + marginTop: 0, + marginBottom: 0, + }, +}; + const styles = StyleSheet.create({ text: { // Disable subpixel antialiasing on Mac desktop for consistency of @@ -45,23 +72,41 @@ const Text = React.forwardRef(function Text( ref, ) { const isHeader = isHeaderRegex.test(Tag); - const styleAttributes = processStyleList([ - styles.text, - isHeader && styles.header, - style, - ]); - // Make sure we include the className from the parent component, if any. - const classNames = otherProps.className - ? [otherProps.className, styleAttributes.className].join(" ") - : styleAttributes.className; + if (isAphroditeStyle(style)) { + const styleAttributes = processStyleList([ + styles.text, + isHeader && styles.header, + style, + ]); + + // Make sure we include the className from the parent component, if any. + const classNames = otherProps.className + ? [otherProps.className, styleAttributes.className].join(" ") + : styleAttributes.className; + + return ( + // @ts-expect-error [FEI-5019] - TS2322 - Type '{ children: ReactNode; style: any; className: string; "data-testid": string | undefined; tabIndex?: number | undefined; id?: string | undefined; "data-modal-launcher-portal"?: boolean | undefined; ... 69 more ...; onBlur?: ((e: FocusEvent<...>) => unknown) | undefined; }' is not assignable to type 'IntrinsicAttributes'. + <Tag + {...otherProps} + style={styleAttributes.style} + className={classNames} + data-testid={testId} + ref={ref} + > + {children} + </Tag> + ); + } return ( // @ts-expect-error [FEI-5019] - TS2322 - Type '{ children: ReactNode; style: any; className: string; "data-testid": string | undefined; tabIndex?: number | undefined; id?: string | undefined; "data-modal-launcher-portal"?: boolean | undefined; ... 69 more ...; onBlur?: ((e: FocusEvent<...>) => unknown) | undefined; }' is not assignable to type 'IntrinsicAttributes'. <Tag {...otherProps} - style={styleAttributes.style} - className={classNames} + className={cx( + css(rawStyles.text, isHeader && rawStyles.header, style), + otherProps.className, + )} data-testid={testId} ref={ref} > diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx index f4ea23dac..fc45a8a01 100644 --- a/packages/wonder-blocks-form/src/components/text-field.tsx +++ b/packages/wonder-blocks-form/src/components/text-field.tsx @@ -3,7 +3,7 @@ import * as React from "react"; // import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens"; // import {addStyle} from "@khanacademy/wonder-blocks-core"; -// import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography"; +import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography"; import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core"; import {SystemStyleObject} from "@/styled-system/types"; @@ -275,9 +275,7 @@ class TextField extends React.Component<PropsWithForwardRef, State> { <StyledInput className={css( styles.input, - // TODO(juan): Convert typography styles to - // SystemStyleObject - // typographyStyles.LabelMedium, + typographyStyles.LabelMedium, styles.default, // Prioritizes disabled, then focused, then error (if any) disabled diff --git a/packages/wonder-blocks-typography/src/util/styles.ts b/packages/wonder-blocks-typography/src/util/styles.ts index 4612fc2ee..204ef4049 100644 --- a/packages/wonder-blocks-typography/src/util/styles.ts +++ b/packages/wonder-blocks-typography/src/util/styles.ts @@ -1,5 +1,7 @@ -import {StyleSheet} from "aphrodite"; -import type {StyleDeclaration} from "aphrodite"; +import {css} from "@/styled-system/css"; +import {SystemStyleObject} from "@/styled-system/types"; +// import {StyleSheet} from "aphrodite"; +// import type {StyleDeclaration} from "aphrodite"; const Regular = 400; const Bold = 700; @@ -17,8 +19,8 @@ const SansFamily = 'Lato, "Noto Sans", sans-serif'; const SerifFamily = '"Noto Serif", serif'; const InconsolataFamily = "Inconsolata, monospace"; -const styles: StyleDeclaration = StyleSheet.create({ - Title: { +const styles: Record<string, SystemStyleObject> = { + Title: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Black, @@ -30,15 +32,15 @@ const styles: StyleDeclaration = StyleSheet.create({ fontSize: 28, lineHeight: "32px", }, - }, - Tagline: { + }), + Tagline: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Regular, fontSize: 20, lineHeight: "24px", - }, - HeadingLarge: { + }), + HeadingLarge: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Bold, @@ -50,8 +52,8 @@ const styles: StyleDeclaration = StyleSheet.create({ fontSize: 24, lineHeight: "28px", }, - }, - HeadingMedium: { + }), + HeadingMedium: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Bold, @@ -63,15 +65,15 @@ const styles: StyleDeclaration = StyleSheet.create({ fontSize: 22, lineHeight: "26px", }, - }, - HeadingSmall: { + }), + HeadingSmall: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Bold, fontSize: 20, lineHeight: "24px", - }, - HeadingXSmall: { + }), + HeadingXSmall: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Bold, @@ -79,77 +81,77 @@ const styles: StyleDeclaration = StyleSheet.create({ lineHeight: "16px", letterSpacing: 0.6, textTransform: "uppercase", - }, - BodySerifBlock: { + }), + BodySerifBlock: css.raw({ ...common, fontFamily: SerifFamily, fontWeight: Regular, fontSize: 22, lineHeight: "28px", - }, - BodySerif: { + }), + BodySerif: css.raw({ ...common, fontFamily: SerifFamily, fontWeight: Regular, fontSize: 18, lineHeight: "22px", - }, - BodyMonospace: { + }), + BodyMonospace: css.raw({ ...common, fontFamily: InconsolataFamily, fontWeight: Regular, fontSize: 17, lineHeight: "22px", - }, - Body: { + }), + Body: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Regular, fontSize: 16, lineHeight: "22px", - }, - LabelLarge: { + }), + LabelLarge: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Bold, fontSize: 16, lineHeight: "20px", - }, - LabelMedium: { + }), + LabelMedium: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Regular, fontSize: 16, lineHeight: "20px", - }, - LabelSmall: { + }), + LabelSmall: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Regular, fontSize: 14, lineHeight: "18px", - }, - LabelXSmall: { + }), + LabelXSmall: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Regular, fontSize: 12, lineHeight: "16px", - }, - Caption: { + }), + Caption: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Regular, fontSize: 14, lineHeight: "20px", - }, - Footnote: { + }), + Footnote: css.raw({ ...common, fontFamily: SansFamily, fontWeight: Regular, fontSize: 12, lineHeight: "18px", - }, -}); + }), +}; export {styles as default}; diff --git a/panda.config.ts b/panda.config.ts index d73097f81..af6ef422b 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -64,5 +64,5 @@ export default defineConfig({ strictTokens: false, // optimizations minify: true, - hash: true, + // hash: true, });