refactor(components): only use css stylable props (#5977)

* refactor(components): only use css stylable props * cleanup
Arize-ai · Jan 9, 2025 · 0d425a7 · 0d425a7
1 parent 4973813
commit 0d425a7
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 16 deletions.
diff --git a/app/src/components/button/Button.tsx b/app/src/components/button/Button.tsx
@@ -3,21 +3,21 @@ import {
   Button as AriaButton,
   ButtonProps as AriaButtonProps,
 } from "react-aria-components";
+import { css } from "@emotion/react";
 
 import {
   SizingProps,
-  StyleProps,
+  StylableProps,
   VarianceProps,
 } from "@phoenix/components/types";
-import { useStyleProps } from "@phoenix/components/utils";
 
 import { buttonCSS } from "./styles";
 
 interface ButtonProps
-  extends Omit<AriaButtonProps, "className">,
+  extends AriaButtonProps,
     SizingProps,
     VarianceProps,
-    StyleProps {
+    StylableProps {
   /**
    * An optional prefixed icon for the button
    */
@@ -30,18 +30,18 @@ function Button(props: ButtonProps, ref: Ref<HTMLButtonElement>) {
     variant = "default",
     icon,
     children,
+    css: propCSS,
     ...otherProps
   } = props;
-  const { styleProps } = useStyleProps<StyleProps>(otherProps);
+
   return (
     <AriaButton
       {...otherProps}
       ref={ref}
       data-size={size}
       data-variant={variant}
       data-childless={!children}
-      css={buttonCSS}
-      style={styleProps.style}
+      css={css(buttonCSS, propCSS)}
     >
       {icon}
       <>{children}</>

diff --git a/app/src/components/disclosure/Disclosure.tsx b/app/src/components/disclosure/Disclosure.tsx
@@ -9,17 +9,15 @@ import {
   type DisclosureProps as AriaDisclosureProps,
   Heading,
 } from "react-aria-components";
-import { css, SerializedStyles } from "@emotion/react";
+import { css } from "@emotion/react";
 
 import { classNames, Flex, Icon, Icons } from "@phoenix/components";
 
-import { FlexStyleProps, SizingProps } from "../types";
+import { FlexStyleProps, SizingProps, StylableProps } from "../types";
 
 import { disclosureCSS, disclosureGroupCSS } from "./styles";
 
-export type DisclosureGroupProps = AriaDisclosureGroupProps & {
-  css?: SerializedStyles;
-};
+export type DisclosureGroupProps = AriaDisclosureGroupProps & StylableProps;
 
 /**
  * Wrap multiple Disclosure components in a DisclosureGroup to control
@@ -29,14 +27,14 @@ export type DisclosureGroupProps = AriaDisclosureGroupProps & {
  */
 export const DisclosureGroup = ({
   className,
-  css: cssProp,
+  css: propCSS,
   ...props
 }: DisclosureGroupProps) => {
   return (
     <AriaDisclosureGroup
       allowsMultipleExpanded
       className={classNames("ac-disclosure-group", className)}
-      css={css(disclosureGroupCSS, cssProp)}
+      css={css(disclosureGroupCSS, propCSS)}
       {...props}
     />
   );

diff --git a/app/src/components/types/style.ts b/app/src/components/types/style.ts
@@ -1,3 +1,5 @@
+import { SerializedStyles } from "@emotion/react";
+
 export type ColorValue =
   | "grey-50"
   | "grey-75"
@@ -584,3 +586,14 @@ export type TextColorValue =
   | "text-300"
   | "inherit"
   | ColorValue;
+
+/**
+ * Makes a component stylable with emotion in addition to the component's styles.
+ * To be used sparingly when a component needs to be styled for very specific use cases.
+ */
+export interface StylableProps {
+  /**
+   * Take an emotion css prop to be merged after the component's styles.
+   */
+  css?: SerializedStyles;
+}
diff --git a/app/src/pages/prompt/DeletePromptVersionTagButton.tsx b/app/src/pages/prompt/DeletePromptVersionTagButton.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { graphql, useMutation } from "react-relay";
+import { css } from "@emotion/react";
 
 import {
   Button,
@@ -58,7 +59,9 @@ export function DeletePromptVersionTagButton({
               </Text>
             </View>
             <Button
-              width="100%"
+              css={css`
+                width: 100%;
+              `}
               variant="danger"
               size="S"
               onPress={() =>

diff --git a/app/src/pages/prompt/TagPromptVersionButton.tsx b/app/src/pages/prompt/TagPromptVersionButton.tsx
@@ -1,6 +1,7 @@
 import React, { Suspense, useState } from "react";
 import { graphql, useLazyLoadQuery, useMutation } from "react-relay";
 import { useParams } from "react-router";
+import { css } from "@emotion/react";
 
 import {
   Button,
@@ -64,7 +65,9 @@ export function TagPromptVersionButton() {
               <Button
                 icon={<Icon svg={<Icons.PlusOutline />} />}
                 size="S"
-                width="100%"
+                css={css`
+                  width: 100%;
+                `}
                 onPress={() => setShowNewTagDialog(true)}
               >
                 New Tag

diff --git a/app/stories/Button.stories.tsx b/app/stories/Button.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
+import { css } from "@emotion/react";
 
 import { Button, ButtonProps } from "@phoenix/components";
 
@@ -26,3 +27,13 @@ export const Default = Template.bind({});
 Default.args = {
   children: "Button",
 };
+
+export const CustomCSS = Template.bind({});
+
+CustomCSS.args = {
+  css: css`
+    /* TODO: we need to make it simpler to not have to make styles more specific */
+    border-color: var(--ac-global-color-primary) !important;
+  `,
+  children: "Custom",
+};