as prop (#66)

* Convert "is" prop to "as". * add changeset
embellishing · Aug 7, 2024 · a408bdc · a408bdc
1 parent 6a82c21
commit a408bdc
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 58 deletions.
diff --git a/.changeset/dry-peas-care.md b/.changeset/dry-peas-care.md
@@ -0,0 +1,5 @@
+---
+"@embellish/react": minor
+---
+
+Renamed the `is` prop to `as`. Aside from `as` being the more common prop name, the HTML `as` attribute applies only to `link` elements, which are strictly non-presentational. On the other hand, the `is` prop is a global attribute used for customizing built-in elements, making the `is` prop collision more likely to create an impediment.
diff --git a/docs/api/react.component.md b/docs/api/react.component.md
@@ -12,16 +12,16 @@ Polymorphic component with first-class style props and conditional styling capab
 export declare type Component<
 P,
 C extends string,
-DefaultIs extends
+DefaultAs extends
 | keyof JSX.IntrinsicElements
 | React.JSXElementConstructor<any>,
 > = <
-Is extends
+As extends
 | keyof JSX.IntrinsicElements
-| React.JSXElementConstructor<any> = DefaultIs,
+| React.JSXElementConstructor<any> = DefaultAs,
 InlineConditionName extends string = never,
 >(
-props: ComponentProps<P, C, Is, InlineConditionName>,
+props: ComponentProps<P, C, As, InlineConditionName>,
 ) => JSX.Element;
 ```
 **References:** [ComponentProps](./react.componentprops.md)

diff --git a/docs/api/react.componentoptions.defaultis.md → docs/api/react.componentoptions.defaultas.md b/docs/api/react.componentoptions.defaultis.md → docs/api/react.componentoptions.defaultas.md
@@ -1,13 +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)
+[Home](./index.md) &gt; [@embellish/react](./react.md) &gt; [ComponentOptions](./react.componentoptions.md) &gt; [defaultAs](./react.componentoptions.defaultas.md)
 
-## ComponentOptions.defaultIs property
+## ComponentOptions.defaultAs property
 
 Default value for the `is` prop
 
 **Signature:**
 
 ```typescript
-defaultIs?: DefaultIs;
+defaultAs?: DefaultAs;
 ```
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, DefaultIs> 
+export declare interface ComponentOptions<P, C extends string, DefaultAs> 
 ```
 
 ## Properties
@@ -56,15 +56,15 @@ _(Optional)_ Conditions that can be applied to each style prop
 </td></tr>
 <tr><td>
 
-[defaultIs?](./react.componentoptions.defaultis.md)
+[defaultAs?](./react.componentoptions.defaultas.md)
 
 
 </td><td>
 
 
 </td><td>
 
-DefaultIs
+DefaultAs
 
 
 </td><td>

diff --git a/docs/api/react.componentprops.md b/docs/api/react.componentprops.md
@@ -12,10 +12,10 @@ Component props
 export declare type ComponentProps<
 P,
 C extends string,
-Is extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+As extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
 InlineConditionName extends string,
 OwnProps = {
-    is?: Is;
+    as?: As;
 } & (string extends C
 ? unknown
 : {
@@ -39,7 +39,7 @@ Partial<{
 }>,
 > = CallbackPropFix<
 Omit<
-JSX.LibraryManagedAttributes<Is, ComponentPropsWithRef<Is>>,
+JSX.LibraryManagedAttributes<As, ComponentPropsWithRef<As>>,
 keyof OwnProps
 >
 > &

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,
-DefaultIs extends
+DefaultAs extends
 | keyof JSX.IntrinsicElements
 | JSXElementConstructor<any> = "div",
->(options: ComponentOptions<P, C, DefaultIs>): Component<P, C, DefaultIs>;
+>(options: ComponentOptions<P, C, DefaultAs>): Component<P, C, DefaultAs>;
 ```
 
 ## Parameters
@@ -43,7 +43,7 @@ options
 
 </td><td>
 
-[ComponentOptions](./react.componentoptions.md)<!-- -->&lt;P, C, DefaultIs&gt;
+[ComponentOptions](./react.componentoptions.md)<!-- -->&lt;P, C, DefaultAs&gt;
 
 
 </td><td>
@@ -55,7 +55,7 @@ Component configuration options
 </tbody></table>
 **Returns:**
 
-[Component](./react.component.md)<!-- -->&lt;P, C, DefaultIs&gt;
+[Component](./react.component.md)<!-- -->&lt;P, C, DefaultAs&gt;
 
 A polymorphic React component with style props
 
diff --git a/packages/react/src/component.d.ts b/packages/react/src/component.d.ts
@@ -15,16 +15,16 @@ import type { ComponentPropsWithRef } from "./types";
  *
  * @typeParam P - Type of supported style props
  * @typeParam C - Type of supported condition names
- * @typeParam DefaultIs - Type of element to render the component by default
+ * @typeParam DefaultAs - Type of element to render the component by default
  *
  * @public
  */
-export interface ComponentOptions<P, C extends string, DefaultIs> {
+export interface ComponentOptions<P, C extends string, DefaultAs> {
   /** Component display name */
   displayName?: string;
 
   /** Default value for the `is` prop */
-  defaultIs?: DefaultIs;
+  defaultAs?: DefaultAs;
 
   /** Default styles to apply to the element */
   defaultStyle?: (
@@ -61,7 +61,7 @@ export type CallbackPropFix<T> = T extends any ? T : never;
  *
  * @typeParam P - Type of supported style props
  * @typeParam C - Type of supported condition names
- * @typeParam Is - Type of element to render the component
+ * @typeParam As - Type of element to render the component
  * @typeParam InlineConditionName - Type of inline condition names
  * @typeParam OwnProps - Type of the component's own props
  *
@@ -70,10 +70,10 @@ export type CallbackPropFix<T> = T extends any ? T : never;
 export type ComponentProps<
   P,
   C extends string,
-  Is extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
+  As extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>,
   InlineConditionName extends string,
   OwnProps = {
-    is?: Is;
+    as?: As;
   } & (string extends C
     ? unknown
     : {
@@ -97,7 +97,7 @@ export type ComponentProps<
     }>,
 > = CallbackPropFix<
   Omit<
-    JSX.LibraryManagedAttributes<Is, ComponentPropsWithRef<Is>>,
+    JSX.LibraryManagedAttributes<As, ComponentPropsWithRef<As>>,
     keyof OwnProps
   >
 > &
@@ -109,23 +109,23 @@ export type ComponentProps<
  *
  * @typeParam P - Type of supported style props
  * @typeParam C - Type of supported condition names
- * @typeParam DefaultIs - Type of element to render the component by default
+ * @typeParam DefaultAs - Type of element to render the component by default
  *
  * @public
  */
 export type Component<
   P,
   C extends string,
-  DefaultIs extends
+  DefaultAs extends
     | keyof JSX.IntrinsicElements
     | React.JSXElementConstructor<any>,
 > = <
-  Is extends
+  As extends
     | keyof JSX.IntrinsicElements
-    | React.JSXElementConstructor<any> = DefaultIs,
+    | React.JSXElementConstructor<any> = DefaultAs,
   InlineConditionName extends string = never,
 >(
-  props: ComponentProps<P, C, Is, InlineConditionName>,
+  props: ComponentProps<P, C, As, InlineConditionName>,
 ) => JSX.Element;
 
 /**
@@ -134,7 +134,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 DefaultIs - Default element type for the component, defaults to
+ * @typeParam DefaultAs - Default element type for the component, defaults to
  * "div"
  *
  * @param options - Component configuration options
@@ -146,7 +146,7 @@ export type Component<
 export function createComponent<
   P,
   C extends string,
-  DefaultIs extends
+  DefaultAs extends
     | keyof JSX.IntrinsicElements
     | JSXElementConstructor<any> = "div",
->(options: ComponentOptions<P, C, DefaultIs>): Component<P, C, DefaultIs>;
+>(options: ComponentOptions<P, C, DefaultAs>): Component<P, C, DefaultAs>;
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 = {},
-  defaultIs = "div",
+  defaultAs = "div",
   defaultStyle = () => ({}),
   conditions: configConditions,
   fallback: configFallback = "revert-layer",
@@ -104,7 +104,7 @@ export function createComponent({
   const Component = forwardRef(
     (
       {
-        is: Component = defaultIs,
+        as: Component = defaultAs,
         conditions: localConditions = {},
         style: styleProp = {},
         ...props