is prop (#55)

* Rename as prop to is prop. * add changeset * Resolve issues with as prop rename. * Docs update. * Add missing doc file.
embellishing · Jun 28, 2024 · ffaad05 · ffaad05
1 parent c7f0d8e
commit ffaad05
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 66 deletions.
diff --git a/.changeset/perfect-windows-count.md b/.changeset/perfect-windows-count.md
@@ -0,0 +1,5 @@
+---
+"@embellish/react": minor
+---
+
+Renamed the `as` prop to `is`.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ behavior, and more. Consider this example of a `Box` component:
 
 ```tsx
 <Box
-  as="a"
+  is="a"
   href="https://github.com/embellishing/embellish"
   color="#fff"
   background="#03f"
@@ -206,7 +206,7 @@ function CtaButton({
 }) {
   return (
     <Box
-      as="a"
+      is="a"
       href={href}
       aria-disabled={disabled}
       display="inline-block"
@@ -263,7 +263,7 @@ function CtaButton({
 +         and: ["focus", { not: "disabled" }],
 +       },
 +     }}
-      as="a"
+      is="a"
       href={href}
       aria-disabled={disabled}
       display="inline-block"

diff --git a/docs/api/react.component.md b/docs/api/react.component.md
@@ -12,17 +12,17 @@ Polymorphic component with first-class style props and conditional styling capab
 export declare type Component<
 P,
 C extends string,
-DefaultAs extends
+DefaultIs extends
 | keyof JSX.IntrinsicElements
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 | React.JSXElementConstructor<any>,
 > = <
-As extends
+Is extends
 | keyof JSX.IntrinsicElements
-| React.JSXElementConstructor<any> = DefaultAs, // eslint-disable-line @typescript-eslint/no-explicit-any
+| React.JSXElementConstructor<any> = DefaultIs, // eslint-disable-line @typescript-eslint/no-explicit-any
 InlineConditionName extends string = never,
 >(
-props: ComponentProps<P, C, As, InlineConditionName>,
+props: ComponentProps<P, C, Is, InlineConditionName>,
 ) => JSX.Element;
 ```
 **References:** [ComponentProps](./react.componentprops.md)

diff --git a/docs/api/react.componentoptions.defaultas.md b/docs/api/react.componentoptions.defaultas.md
diff --git a/docs/api/react.componentoptions.defaultis.md b/docs/api/react.componentoptions.defaultis.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@embellish/react](./react.md) &gt; [ComponentOptions](./react.componentoptions.md) &gt; [defaultIs](./react.componentoptions.defaultis.md)
+
+## ComponentOptions.defaultIs property
+
+Default value for the `is` prop
+
+**Signature:**
+
+```typescript
+defaultIs?: DefaultIs;
+```
diff --git a/docs/api/react.componentoptions.md b/docs/api/react.componentoptions.md
@@ -9,7 +9,7 @@ Component configuration options
 **Signature:**
 
 ```typescript
-export declare interface ComponentOptions<P, C extends string, DefaultAs> 
+export declare interface ComponentOptions<P, C extends string, DefaultIs> 
 ```
 
 ## Properties
@@ -56,20 +56,20 @@ _(Optional)_ Conditions that can be applied to each style prop
 </td></tr>
 <tr><td>
 
-[defaultAs?](./react.componentoptions.defaultas.md)
+[defaultIs?](./react.componentoptions.defaultis.md)
 
 
 </td><td>
 
 
 </td><td>
 
-DefaultAs
+DefaultIs
 
 
 </td><td>
 
-_(Optional)_ Default value for the `as` prop
+_(Optional)_ Default value for the `is` prop
 
 
 </td></tr>

diff --git a/docs/api/react.componentprops.md b/docs/api/react.componentprops.md
@@ -13,11 +13,11 @@ export declare type ComponentProps<
 P,
 C extends string,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-As extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+Is extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
 InlineConditionName extends string,
 > = {
-    as?: As;
-} & Omit<JSX.LibraryManagedAttributes<As, ComponentPropsWithRef<As>>, never> &
+    is?: Is;
+} & Omit<JSX.LibraryManagedAttributes<Is, ComponentPropsWithRef<Is>>, never> &
 (string extends C
 ? unknown
 : {

diff --git a/docs/api/react.createcomponent.md b/docs/api/react.createcomponent.md
@@ -12,10 +12,10 @@ Creates a polymorphic component with first-class style props and conditional sty
 export declare function createComponent<
 P,
 C extends string,
-DefaultAs extends
+DefaultIs extends
 | keyof JSX.IntrinsicElements
 | JSXElementConstructor<any> = "div", // eslint-disable-line @typescript-eslint/no-explicit-any
->(options: ComponentOptions<P, C, DefaultAs>): Component<P, C, DefaultAs>;
+>(options: ComponentOptions<P, C, DefaultIs>): Component<P, C, DefaultIs>;
 ```
 
 ## Parameters
@@ -43,7 +43,7 @@ options
 
 </td><td>
 
-[ComponentOptions](./react.componentoptions.md)<!-- -->&lt;P, C, DefaultAs&gt;
+[ComponentOptions](./react.componentoptions.md)<!-- -->&lt;P, C, DefaultIs&gt;
 
 
 </td><td>
@@ -55,7 +55,7 @@ Component configuration options
 </tbody></table>
 **Returns:**
 
-[Component](./react.component.md)<!-- -->&lt;P, C, DefaultAs&gt;
+[Component](./react.component.md)<!-- -->&lt;P, C, DefaultIs&gt;
 
 A polymorphic React component with style props
 
diff --git a/packages/react/src/component.d.ts b/packages/react/src/component.d.ts
@@ -13,16 +13,16 @@ import type { ComponentPropsWithRef } from "./types";
  *
  * @typeParam P - Type of supported style props
  * @typeParam C - Type of supported condition names
- * @typeParam DefaultAs - Type of element to render the component by default
+ * @typeParam DefaultIs - Type of element to render the component by default
  *
  * @public
  */
-export interface ComponentOptions<P, C extends string, DefaultAs> {
+export interface ComponentOptions<P, C extends string, DefaultIs> {
   /** Component display name */
   displayName?: string;
 
-  /** Default value for the `as` prop */
-  defaultAs?: DefaultAs;
+  /** Default value for the `is` prop */
+  defaultIs?: DefaultIs;
 
   /** Default styles to apply to the element */
   defaultStyle?: CSSProperties;
@@ -45,7 +45,7 @@ export interface ComponentOptions<P, C extends string, DefaultAs> {
  *
  * @typeParam P - Type of supported style props
  * @typeParam C - Type of supported condition names
- * @typeParam As - Type of element to render the component
+ * @typeParam Is - Type of element to render the component
  * @typeParam InlineConditionName - Type of inline condition names
  *
  * @public
@@ -54,11 +54,11 @@ export type ComponentProps<
   P,
   C extends string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  As extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+  Is extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
   InlineConditionName extends string,
 > = {
-  as?: As;
-} & Omit<JSX.LibraryManagedAttributes<As, ComponentPropsWithRef<As>>, never> &
+  is?: Is;
+} & Omit<JSX.LibraryManagedAttributes<Is, ComponentPropsWithRef<Is>>, never> &
   (string extends C
     ? unknown
     : {
@@ -87,24 +87,24 @@ export type ComponentProps<
  *
  * @typeParam P - Type of supported style props
  * @typeParam C - Type of supported condition names
- * @typeParam DefaultAs - Type of element to render the component by default
+ * @typeParam DefaultIs - Type of element to render the component by default
  *
  * @public
  */
 export type Component<
   P,
   C extends string,
-  DefaultAs extends
+  DefaultIs extends
     | keyof JSX.IntrinsicElements
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     | React.JSXElementConstructor<any>,
 > = <
-  As extends
+  Is extends
     | keyof JSX.IntrinsicElements
-    | React.JSXElementConstructor<any> = DefaultAs, // eslint-disable-line @typescript-eslint/no-explicit-any
+    | React.JSXElementConstructor<any> = DefaultIs, // eslint-disable-line @typescript-eslint/no-explicit-any
   InlineConditionName extends string = never,
 >(
-  props: ComponentProps<P, C, As, InlineConditionName>,
+  props: ComponentProps<P, C, Is, InlineConditionName>,
 ) => JSX.Element;
 
 /**
@@ -113,7 +113,7 @@ export type Component<
  *
  * @typeParam P - Type of the style props that the component will expose
  * @typeParam C - Name of the conditions that the component will expose
- * @typeParam DefaultAs - Default element type for the component, defaults to
+ * @typeParam DefaultIs - Default element type for the component, defaults to
  * "div"
  *
  * @param options - Component configuration options
@@ -125,7 +125,7 @@ export type Component<
 export function createComponent<
   P,
   C extends string,
-  DefaultAs extends
+  DefaultIs extends
     | keyof JSX.IntrinsicElements
     | JSXElementConstructor<any> = "div", // eslint-disable-line @typescript-eslint/no-explicit-any
->(options: ComponentOptions<P, C, DefaultAs>): Component<P, C, DefaultAs>;
+>(options: ComponentOptions<P, C, DefaultIs>): Component<P, C, DefaultIs>;
diff --git a/packages/react/src/component.js b/packages/react/src/component.js
@@ -93,7 +93,7 @@ function stringifyValue(propertyName, value) {
 export function createComponent({
   displayName,
   styleProps = {},
-  defaultAs = "div",
+  defaultIs = "div",
   defaultStyle = {},
   conditions: configConditions,
   fallback: configFallback = "revert-layer",
@@ -104,7 +104,7 @@ export function createComponent({
   const Component = forwardRef(
     (
       {
-        as: Component = defaultAs,
+        is: Component = defaultIs,
         conditions: localConditions = {},
         style: styleProp = {},
         ...props