Migrate Label to @primer/react-brand (#62081)

Author: Ebonsignori

src/graphql/components/GraphqlItem.tsx

@@ -1,5 +1,5 @@
 import React, { type JSX } from 'react'
-import { Label } from '@primer/react'
+import { Label } from '@primer/react-brand'
 import { HeadingLink } from '@/frame/components/article/HeadingLink'
 import type { GraphqlT } from './types'
 import { Notice } from './Notice'
@@ -41,9 +41,9 @@ export function GraphqlItem({ item, heading, children, headingLevel = 2, kind }:
       <HeadingLink as={headingTag(headingLevel)} slug={slug}>
         {item.name}
       </HeadingLink>
-      <div className="d-flex flex-items-start" style={{ gap: '0.5rem' }}>
+      <div className="d-flex flex-items-baseline" style={{ gap: '0.5rem' }}>
         {kindLabel && (
-          <Label variant="secondary" style={{ flexShrink: 0, marginTop: '0.15rem' }}>
+          <Label color="gray" size="small" style={{ flexShrink: 0 }}>
             {kindLabel}
           </Label>
         )}

src/landings/components/CookBookArticleCard.module.scss

@@ -21,6 +21,7 @@
 }
 
 .labelGroup {
+  display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
 }

src/landings/components/CookBookArticleCard.tsx

@@ -1,4 +1,5 @@
-import { Label, LabelGroup, Link } from '@primer/react'
+import { Label } from '@primer/react-brand'
+import { Link } from '@primer/react'
 import { ValidOcticon, getOcticonComponent } from '../lib/octicons'
 
 import styles from './CookBookArticleCard.module.scss'
@@ -50,13 +51,13 @@ export const CookBookArticleCard = ({
             <Link href={url}>{title}</Link>
           </h3>
           <div className="fgColor-muted mb-3 mt-2">{description}</div>
-          <LabelGroup className={styles.labelGroup}>
+          <div className={styles.labelGroup}>
             {tags.map((tag, index) => (
-              <Label key={index} variant="accent" className={styles.label} size="small">
+              <Label key={index} color="blue" className={styles.label} size="small">
                 {tag}
               </Label>
             ))}
-          </LabelGroup>
+          </div>
         </div>
       </div>
     </div>