[ui] add borderRadius to TextInput and allow any Modal width- the uma…

… auth sdk (#414) * [ui] add borderRadius to TextInput and allow any Modal width (#11939) - the uma auth sdk modal has a different width - TextInput is styled differently in the uma auth sdk GitOrigin-RevId: 6e52e4edbe2cfcfa19243a9c155cc76609f9d670 * [ui] add themes for uma auth sdk (#11941) GitOrigin-RevId: f87f1cae1b2e3d6868322f932c44f9fe6e4402ba * [ui] add BorderRadius type for TextInput (#11943) GitOrigin-RevId: e564eb3b774fff8b5bfef9d4a3ffc267cf2d739e * [ui] Consolidate typography props and styles (#11945) Consolidate common typographic props into CommonTypographyProps and CommonStyledTypographyProps. Add typographyStyles shorthand for consistent typography styles. GitOrigin-RevId: 8ee705385d0a90136e4bae058cdf16aaf1ea6bc6 * [ui] add tertiary Button kind and theme prop, adjust uma auth sdk font-weights (#11981) GitOrigin-RevId: 0688a81705d13946e2cdac525bd82e103cb01874 * [ui] Fix missing Headline typography styles (#11994) GitOrigin-RevId: 79aaa522ec19cfa996a50145226b48fdf3cd648d * Create chilly-hounds-exercise.md --------- Co-authored-by: Brian Siao Tick Chong <[email protected]> Co-authored-by: Corey Martin <[email protected]>
lightsparkdev · Aug 20, 2024 · 8f5673d · 8f5673d
1 parent f3fc2be
commit 8f5673d
Show file tree

Hide file tree

Showing 25 changed files with 1,433 additions and 251 deletions.
diff --git a/.changeset/chilly-hounds-exercise.md b/.changeset/chilly-hounds-exercise.md
@@ -0,0 +1,10 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+- add borderRadius to TextInput
+- allow any Modal width
+- add themes for UMA Auth SDK
+- consolidate typography props and styles
+- add tertiary Button kind and theme prop
+- fix missing Headline typography styles
diff --git a/apps/examples/ui-test-app/src/tests/renderTypography.test.tsx b/apps/examples/ui-test-app/src/tests/renderTypography.test.tsx
@@ -6,4 +6,14 @@ describe("renderTypography", () => {
     renderTypography("Display", { hey: "hey" });
     renderTypography("Display", { content: "hey" });
   });
+
+  test("should properly infer argument types and raise errors for invalid tags", () => {
+    /* @ts-expect-error `span` is not a valid tag for Display component */
+    renderTypography("Display", { tag: "span" });
+    renderTypography("Display", { tag: "h1" });
+
+    /* @ts-expect-error `h1` is not a valid tag for Body component */
+    renderTypography("Body", { tag: "h1" });
+    renderTypography("Body", { tag: "span" });
+  });
 });
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
@@ -39,6 +39,7 @@ export const buttonKinds = [
   "blue43",
   "blue39",
   "danger",
+  "tertiary",
 ] as const;
 export type ButtonKind = (typeof buttonKinds)[number];
 

diff --git a/packages/ui/src/components/Modal.tsx b/packages/ui/src/components/Modal.tsx
@@ -88,7 +88,7 @@ type ModalProps<T extends TypographyTypeKey> = {
   smKind?: SmKind;
   top?: number;
   nonDismissable?: boolean;
-  width?: 460 | 600;
+  width?: number;
   progressBar?: ProgressBarProps;
   /** Determines if buttons are laid out horizontally or vertically */
   buttonLayout?: "horizontal" | "vertical";

diff --git a/packages/ui/src/components/TextInput.tsx b/packages/ui/src/components/TextInput.tsx
@@ -16,6 +16,7 @@ import {
   inputSpacingPx,
   textInputPlaceholderColor,
   textInputStyle,
+  type TextInputBorderRadius,
 } from "../styles/fields.js";
 import { getFontColor, type FontColorKey } from "../styles/themes.js";
 import {
@@ -85,6 +86,7 @@ export type TextInputProps = {
         width: number;
       }
     | undefined;
+  borderRadius?: TextInputBorderRadius | undefined;
 };
 
 export function TextInput(props: TextInputProps) {
@@ -177,6 +179,7 @@ export function TextInput(props: TextInputProps) {
           props.onBeforeInput(event);
         }
       }}
+      borderRadius={props.borderRadius}
     />
   );
 
@@ -325,6 +328,7 @@ interface InputProps {
   paddingLeftPx?: number | undefined;
   paddingRightPx?: number | undefined;
   typography: RequiredSimpleTypographyProps;
+  borderRadius?: TextInputBorderRadius | undefined;
 }
 
 const Input = styled.input<InputProps>`

diff --git a/packages/ui/src/components/documentation/DocsBodyParagraph.tsx b/packages/ui/src/components/documentation/DocsBodyParagraph.tsx
@@ -10,12 +10,25 @@ import { StyledBody } from "../typography/Body.js";
 
 type DocsBodyParagraphProps = PartialBy<
   ComponentProps<typeof StyledBody>,
-  "size" | "block"
+  "size" | "block" | "colorProp" | "displayProp" | "hideOverflow"
 >;
 
 export function DocsBodyParagraph({
+  colorProp,
+  displayProp,
+  hideOverflow = false,
   size = "Medium",
   ...rest
 }: DocsBodyParagraphProps) {
-  return <StyledBody {...rest} size={size} block as="div" />;
+  return (
+    <StyledBody
+      {...rest}
+      as="div"
+      block
+      colorProp={colorProp}
+      displayProp={displayProp}
+      hideOverflow={hideOverflow}
+      size={size}
+    />
+  );
 }
diff --git a/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx b/packages/ui/src/components/documentation/DocsBodyStrongParagraph.tsx
@@ -11,17 +11,27 @@ import { StyledBodyStrong } from "../typography/BodyStrong.js";
 
 type DocsBodyStrongParagraphProps = PartialBy<
   ComponentProps<typeof StyledBodyStrong>,
-  "size" | "block"
+  "size" | "block" | "colorProp" | "displayProp" | "hideOverflow"
 >;
 
 export function DocsBodyStrongParagraph({
-  size = "Medium",
   block = false,
+  colorProp,
+  displayProp,
+  hideOverflow = false,
+  size = "Medium",
   ...rest
 }: DocsBodyStrongParagraphProps) {
   return (
     <StyledBodyStrongBlock>
-      <StyledBodyStrong {...rest} size={size} block={block} />
+      <StyledBodyStrong
+        {...rest}
+        block={block}
+        colorProp={colorProp}
+        displayProp={displayProp}
+        hideOverflow={hideOverflow}
+        size={size}
+      />
     </StyledBodyStrongBlock>
   );
 }

diff --git a/packages/ui/src/components/documentation/DocsHeadline.tsx b/packages/ui/src/components/documentation/DocsHeadline.tsx
@@ -88,6 +88,8 @@ export const DocsHeadline = ({
       size={size}
       colorProp={color}
       displayProp="block"
+      hideOverflow={false}
+      block
     >
       {children}
     </StyledHeadline>

diff --git a/packages/ui/src/components/typography/Body.tsx b/packages/ui/src/components/typography/Body.tsx
@@ -2,32 +2,29 @@
 
 import styled from "@emotion/styled";
 import { type ReactNode } from "react";
-import { type FontColorKey } from "../../styles/themes.js";
-import { type TokenSizeKey } from "../../styles/tokens/typography.js";
 import { applyTypography } from "../../styles/typography.js";
+import { toNonTypographicReactNodes } from "../../utils/toNonTypographicReactNodes.js";
 import {
-  toNonTypographicReactNodes,
-  type ToNonTypographicReactNodesArgs,
-} from "../../utils/toNonTypographicReactNodes.js";
+  type CommonStyledTypographyProps,
+  type CommonTypographyProps,
+} from "./types.js";
+import { typographyStyles } from "./typographyStyles.js";
 
 type AllowedBodyTags = "span" | "p" | "pre" | "div";
 
-type BodyProps = {
-  content?: ToNonTypographicReactNodesArgs | undefined | null;
-  /* children must be a string. use content prop for more complex content */
-  children?: string | undefined | null;
-  size?: TokenSizeKey | undefined;
-  color?: FontColorKey | undefined;
-  block?: boolean | undefined;
+type BodyProps = CommonTypographyProps & {
   tag?: AllowedBodyTags | undefined;
 };
 
 export const Body = ({
-  content,
+  block = false,
+  children,
   color,
+  content,
+  display,
+  hideOverflow = false,
+  id,
   size = "Medium",
-  children,
-  block = false,
   tag = "span",
 }: BodyProps) => {
   let reactNodes: ReactNode = children || null;
@@ -36,22 +33,24 @@ export const Body = ({
   }
 
   return (
-    <StyledBody size={size} colorProp={color} block={block} as={tag}>
+    <StyledBody
+      as={tag}
+      block={block}
+      colorProp={color}
+      displayProp={display}
+      hideOverflow={hideOverflow}
+      id={id}
+      size={size}
+    >
       {reactNodes}
     </StyledBody>
   );
 };
 
-type StyledBodyProps = {
-  children: ReactNode;
-  size: TokenSizeKey;
-  /* color is an inherent html prop so we need to use colorProp instead */
-  colorProp?: FontColorKey | undefined;
-  block: boolean;
-};
+type StyledBodyProps = CommonStyledTypographyProps;
 
 export const StyledBody = styled.span<StyledBodyProps>`
   ${({ theme, size, colorProp }) =>
     applyTypography(theme, "Body", size, colorProp)}
-  ${({ block }) => (block ? "display: block;" : "")}
+  ${typographyStyles}
 `;
diff --git a/packages/ui/src/components/typography/BodyStrong.tsx b/packages/ui/src/components/typography/BodyStrong.tsx
@@ -2,51 +2,48 @@
 
 import styled from "@emotion/styled";
 import { type ReactNode } from "react";
-import { type FontColorKey } from "../../styles/themes.js";
-import { type TokenSizeKey } from "../../styles/tokens/typography.js";
 import { applyTypography } from "../../styles/typography.js";
+import { toNonTypographicReactNodes } from "../../utils/toNonTypographicReactNodes.js";
 import {
-  toNonTypographicReactNodes,
-  type ToNonTypographicReactNodesArgs,
-} from "../../utils/toNonTypographicReactNodes.js";
+  type CommonStyledTypographyProps,
+  type CommonTypographyProps,
+} from "./types.js";
+import { typographyStyles } from "./typographyStyles.js";
 
-type BodyStrongProps = {
-  content?: ToNonTypographicReactNodesArgs | undefined | null;
-  /* children must be a string. use content prop for more complex content */
-  children?: string | undefined | null;
-  size?: TokenSizeKey | undefined;
-  color?: FontColorKey | undefined;
-  block?: boolean | undefined;
-};
+type BodyStrongProps = CommonTypographyProps;
 
 export const BodyStrong = ({
-  content,
+  block = false,
   children,
   color,
+  content,
+  display,
+  hideOverflow = false,
+  id,
   size = "Medium",
-  block = false,
 }: BodyStrongProps) => {
   let reactNodes: ReactNode = children || null;
   if (content) {
     reactNodes = toNonTypographicReactNodes(content);
   }
   return (
-    <StyledBodyStrong size={size} colorProp={color} block={block}>
+    <StyledBodyStrong
+      block={block}
+      colorProp={color}
+      displayProp={display}
+      hideOverflow={hideOverflow}
+      id={id}
+      size={size}
+    >
       {reactNodes}
     </StyledBodyStrong>
   );
 };
 
-type StyledBodyStrongProps = {
-  children: ReactNode;
-  size: TokenSizeKey;
-  /* color is an inherent html prop so we need to use colorProp instead */
-  colorProp?: FontColorKey | undefined;
-  block: boolean;
-};
+type StyledBodyStrongProps = CommonStyledTypographyProps;
 
 export const StyledBodyStrong = styled.span<StyledBodyStrongProps>`
   ${({ theme, size, colorProp }) =>
     applyTypography(theme, "Body Strong", size, colorProp)}
-  display: ${({ block }) => (block ? "block" : "inline")};
+  ${typographyStyles}
 `;
diff --git a/packages/ui/src/components/typography/Code.tsx b/packages/ui/src/components/typography/Code.tsx
@@ -2,47 +2,48 @@
 
 import styled from "@emotion/styled";
 import { type ReactNode } from "react";
-import { type FontColorKey } from "../../styles/themes.js";
-import { type TokenSizeKey } from "../../styles/tokens/typography.js";
 import { applyTypography } from "../../styles/typography.js";
+import { toNonTypographicReactNodes } from "../../utils/toNonTypographicReactNodes.js";
 import {
-  toNonTypographicReactNodes,
-  type ToNonTypographicReactNodesArgs,
-} from "../../utils/toNonTypographicReactNodes.js";
+  type CommonStyledTypographyProps,
+  type CommonTypographyProps,
+} from "./types.js";
+import { typographyStyles } from "./typographyStyles.js";
 
-export type CodeProps = {
-  content?: ToNonTypographicReactNodesArgs | undefined | null;
-  /* children must be a string. use content prop for more complex content */
-  children?: string | undefined | null;
-  size?: TokenSizeKey | undefined;
-  color?: FontColorKey | undefined;
-};
+export type CodeProps = CommonTypographyProps;
 
 export const Code = ({
-  content,
+  block = false,
+  children,
   color,
+  content,
+  display,
+  hideOverflow = false,
+  id,
   size = "Medium",
-  children,
 }: CodeProps) => {
   let reactNodes: ReactNode = children || null;
   if (content) {
     reactNodes = toNonTypographicReactNodes(content);
   }
   return (
-    <StyledCode size={size} colorProp={color}>
+    <StyledCode
+      block={block}
+      colorProp={color}
+      displayProp={display}
+      hideOverflow={hideOverflow}
+      id={id}
+      size={size}
+    >
       {reactNodes}
     </StyledCode>
   );
 };
 
-type StyledCodeProps = {
-  /* color is an inherent html prop so we need to use colorProp instead */
-  colorProp?: FontColorKey | undefined;
-  children: ReactNode;
-  size: TokenSizeKey;
-};
+type StyledCodeProps = CommonStyledTypographyProps;
 
-export const StyledCode = styled.div<StyledCodeProps>`
+export const StyledCode = styled.span<StyledCodeProps>`
   ${({ theme, size, colorProp }) =>
     applyTypography(theme, "Code", size, colorProp)}
+  ${typographyStyles}
 `;