fix(ui-instructure): use CondensedButton for AI component triggers

Author: joyenjoyer

packages/ui-instructure/src/DataPermissionLevels/v1/index.tsx

@@ -23,10 +23,13 @@
  */
 import { useState } from 'react'
 import { Modal } from '@instructure/ui-modal/v11_6'
-import { Button, CloseButton } from '@instructure/ui-buttons/v11_6'
+import {
+  Button,
+  CloseButton,
+  CondensedButton
+} from '@instructure/ui-buttons/v11_6'
 import { Heading } from '@instructure/ui-heading/v11_6'
 import { Text } from '@instructure/ui-text/v11_6'
-import { Link } from '@instructure/ui-link/v11_6'
 import { useStyle as useStyleNew } from '@instructure/emotion'
 
 import { DataPermissionLevelsProps } from './props.js'
@@ -60,17 +63,9 @@ const DataPermissionLevels = ({
 
   return (
     <div>
-      <Link
-        variant="standalone"
-        onClick={(e) => {
-          e.preventDefault()
-          setOpen(true)
-        }}
-        forceButtonRole={false}
-        href="#"
-      >
+      <CondensedButton onClick={() => setOpen(true)} aria-haspopup="dialog">
         {triggerText}
-      </Link>
+      </CondensedButton>
       <Modal
         size={fullscreen ? 'fullscreen' : 'medium'}
         open={open}

packages/ui-instructure/src/DataPermissionLevels/v2/index.tsx

@@ -23,10 +23,13 @@
  */
 import { useState } from 'react'
 import { Modal } from '@instructure/ui-modal/latest'
-import { Button, CloseButton } from '@instructure/ui-buttons/latest'
+import {
+  Button,
+  CloseButton,
+  CondensedButton
+} from '@instructure/ui-buttons/latest'
 import { Heading } from '@instructure/ui-heading/latest'
 import { Text } from '@instructure/ui-text/latest'
-import { Link } from '@instructure/ui-link/latest'
 import { useStyleNew } from '@instructure/emotion'
 
 import { DataPermissionLevelsProps } from './props.js'
@@ -60,17 +63,9 @@ const DataPermissionLevels = ({
 
   return (
     <div>
-      <Link
-        variant="standalone"
-        onClick={(e) => {
-          e.preventDefault()
-          setOpen(true)
-        }}
-        forceButtonRole={false}
-        href="#"
-      >
+      <CondensedButton onClick={() => setOpen(true)} aria-haspopup="dialog">
         {triggerText}
-      </Link>
+      </CondensedButton>
       <Modal
         size={fullscreen ? 'fullscreen' : 'medium'}
         open={open}

packages/ui-instructure/src/NutritionFacts/v1/index.tsx

@@ -23,10 +23,13 @@
  */
 import { useState } from 'react'
 import { Modal } from '@instructure/ui-modal/v11_6'
-import { Button, CloseButton } from '@instructure/ui-buttons/v11_6'
+import {
+  Button,
+  CloseButton,
+  CondensedButton
+} from '@instructure/ui-buttons/v11_6'
 import { Heading } from '@instructure/ui-heading/v11_6'
 import { Text } from '@instructure/ui-text/v11_6'
-import { Link } from '@instructure/ui-link/v11_6'
 import { useStyle as useStyleNew } from '@instructure/emotion'
 
 import { NutritionFactsProps } from './props.js'
@@ -59,17 +62,9 @@ const NutritionFacts = ({
 
   return (
     <div>
-      <Link
-        variant="standalone"
-        onClick={(e) => {
-          e.preventDefault()
-          setOpen(true)
-        }}
-        forceButtonRole={false}
-        href="#"
-      >
+      <CondensedButton onClick={() => setOpen(true)} aria-haspopup="dialog">
         {triggerText}
-      </Link>
+      </CondensedButton>
       <Modal
         open={open}
         onDismiss={() => {

packages/ui-instructure/src/NutritionFacts/v2/index.tsx

@@ -23,10 +23,13 @@
  */
 import { useState } from 'react'
 import { Modal } from '@instructure/ui-modal/latest'
-import { Button, CloseButton } from '@instructure/ui-buttons/latest'
+import {
+  Button,
+  CloseButton,
+  CondensedButton
+} from '@instructure/ui-buttons/latest'
 import { Heading } from '@instructure/ui-heading/latest'
 import { Text } from '@instructure/ui-text/latest'
-import { Link } from '@instructure/ui-link/latest'
 import { useStyleNew } from '@instructure/emotion'
 
 import { NutritionFactsProps } from './props.js'
@@ -59,17 +62,9 @@ const NutritionFacts = ({
 
   return (
     <div>
-      <Link
-        variant="standalone"
-        onClick={(e) => {
-          e.preventDefault()
-          setOpen(true)
-        }}
-        forceButtonRole={false}
-        href="#"
-      >
+      <CondensedButton onClick={() => setOpen(true)} aria-haspopup="dialog">
         {triggerText}
-      </Link>
+      </CondensedButton>
       <Modal
         open={open}
         onDismiss={() => {