chore: change <SvgIcon> "kind" prop to "purpose"

"kind" is kind of generic, and "purpose" better describes the... purpose... of the prop.
chanzuckerberg · Aug 2, 2021 · 2d165c0 · 2d165c0
1 parent f0222dc
commit 2d165c0
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git a/packages/components/src/Button/button.stories.tsx b/packages/components/src/Button/button.stories.tsx
@@ -76,7 +76,7 @@ export const linkWithIcon = Template.bind(null);
 linkWithIcon.args = {
   children: (
     <>
-      Link with icon <CheckCircle type="decorative" />
+      Link with icon <CheckCircle purpose="decorative" />
     </>
   ),
   color: "success",
@@ -87,7 +87,7 @@ export const outlineWithIcon = Template.bind(null);
 outlineWithIcon.args = {
   children: (
     <>
-      Outline with icon <CheckCircle type="decorative" />
+      Outline with icon <CheckCircle purpose="decorative" />
     </>
   ),
   color: "warning",

diff --git a/packages/components/src/SvgIcon/SvgIcon.stories.tsx b/packages/components/src/SvgIcon/SvgIcon.stories.tsx
@@ -100,11 +100,11 @@ export const InText = ({ icon, ...rest }: Args) => {
   return (
     <Text size="h1">
       The svg icon defaults to the surrounding text size (
-      <Icon {...rest} type="informative" title="icon with 1em line height" />,
-      1em), but often looks better with the line height (
+      <Icon {...rest} purpose="informative" title="icon with 1em line height" />
+      , 1em), but often looks better with the line height (
       <Icon
         {...rest}
-        type="informative"
+        purpose="informative"
         title="icon with 2em line height"
         size="2rem"
       />

diff --git a/packages/components/src/SvgIcon/SvgIcon.tsx b/packages/components/src/SvgIcon/SvgIcon.tsx
@@ -42,7 +42,7 @@ interface InformativeIconProps extends IconPropsBase {
    * Use "informative" when the icon **_does_** provide additional meaning to other text on the
    * page. You'll be required to pass in a title to label the icon.
    */
-  type: "informative";
+  purpose: "informative";
   title: string;
 }
 
@@ -54,7 +54,7 @@ interface DecorativeIconProps extends IconPropsBase {
    * associated text. Basically the icon is for show and people don't need it to understand what's
    * on the page.
    */
-  type: "decorative";
+  purpose: "decorative";
 }
 
 export type SvgIconProps = DecorativeIconProps | InformativeIconProps;
@@ -100,7 +100,7 @@ function SvgIcon(props: SvgIconProps) {
     xmlns: "http://www.w3.org/2000/svg",
   };
 
-  if (props.type === "informative") {
+  if (props.purpose === "informative") {
     return (
       <svg {...svgCommonProps} role="img">
         <title>{props.title}</title>

diff --git a/packages/components/src/Tag/Tag.stories.tsx b/packages/components/src/Tag/Tag.stories.tsx
@@ -62,12 +62,12 @@ OutlineVariants.args = {
 export const WithIcon = Template.bind(null);
 WithIcon.args = {
   ...defaultArgs,
-  icon: <WarningIcon key="icon" type="informative" title="warning" />,
+  icon: <WarningIcon key="icon" purpose="informative" title="warning" />,
 };
 
 export const WithLongTextAndIcon = Template.bind(null);
 WithLongTextAndIcon.args = {
   ...defaultArgs,
   children: "This tag has a really long text message",
-  icon: <WarningIcon key="icon" type="informative" title="warning" />,
+  icon: <WarningIcon key="icon" purpose="informative" title="warning" />,
 };
diff --git a/packages/components/src/common/CloseButton/CloseButton.tsx b/packages/components/src/common/CloseButton/CloseButton.tsx
@@ -36,7 +36,7 @@ const CloseButton = ({ className, color, onClose, size }: CloseButtonProps) => (
     onClick={onClose}
     variant="link"
   >
-    <CloseIcon type="informative" size={size} title="close" />
+    <CloseIcon purpose="informative" size={size} title="close" />
   </Button>
 );
 

diff --git a/packages/components/src/common/Notifications/NotificationIcon/NotificationIcon.tsx b/packages/components/src/common/Notifications/NotificationIcon/NotificationIcon.tsx
@@ -53,7 +53,7 @@ const NotificationIcon = ({ variant }: Props) => {
 
   return (
     <div className={iconAssets.style}>
-      <iconAssets.icon type="informative" title={iconAssets.title} />
+      <iconAssets.icon purpose="informative" title={iconAssets.title} />
     </div>
   );
 };