@arbor-education/design-system.components 1.0.5 → 2.0.1

package/src/components/table/tableControls/TableControls.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import { Button } from 'Components/button/Button';
+import { Icon } from 'Components/icon/Icon';
 import { SearchBar } from 'Components/searchBar/SearchBar';
 import { BulkActionsDropdown, type BulkAction } from './BulkActionsDropdown.js';
 import {
@@ -71,19 +72,21 @@ export const TableControls = (props: TableControlsProps) => {
             <Button
               variant="secondary"
               borderless
-              iconRightName="undo"
-              iconRightScreenReaderText="Undo"
+              isRound
               onClick={onUndo}
-            />
+            >
+              <Icon name="undo" screenReaderText="Undo" />
+            </Button>
           )}
           {onRedo && (
             <Button
               variant="secondary"
               borderless
-              iconRightName="redo"
-              iconRightScreenReaderText="Redo"
+              isRound
               onClick={onRedo}
-            />
+            >
+              <Icon name="redo" screenReaderText="Redo" />
+            </Button>
           )}
           {showHideColumns && <HideColumnsDropdown {...hideColumnsProps} />}
         </div>
@@ -100,43 +103,49 @@ export const TableControls = (props: TableControlsProps) => {
             <Button
               variant="secondary"
               borderless
-              iconRightName="download"
-              iconRightScreenReaderText="Download"
+              isRound
               onClick={onDownload}
-            />
+            >
+              <Icon name="download" screenReaderText="Download" />
+            </Button>
           )}
           {onTooltipsToggle && (
             <Button
               variant="secondary"
               borderless
-              iconRightName="message-square-more"
-              iconRightScreenReaderText={
-                tooltipsEnabled ? 'Disable tooltips' : 'Enable tooltips'
-              }
+              isRound
               aria-pressed={tooltipsEnabled}
               onClick={() => onTooltipsToggle(!tooltipsEnabled)}
-            />
+            >
+              <Icon
+                name="message-square-more"
+                screenReaderText={tooltipsEnabled ? 'Disable tooltips' : 'Enable tooltips'}
+              />
+            </Button>
           )}
           {showSettings && <TableSettingsDropdown />}
           {onHelp && (
             <Button
               variant="secondary"
               borderless
-              iconRightName="circle-help"
-              iconRightScreenReaderText="Help"
+              isRound
               onClick={onHelp}
-            />
+            >
+              <Icon name="circle-help" screenReaderText="Help" />
+            </Button>
           )}
           {onExpandToggle && (
             <Button
               variant="secondary"
               borderless
-              iconRightName={isExpanded ? 'shrink' : 'expand'}
-              iconRightScreenReaderText={
-                isExpanded ? 'Shrink table' : 'Expand table'
-              }
+              isRound
               onClick={() => onExpandToggle(!isExpanded)}
-            />
+            >
+              <Icon
+                name={isExpanded ? 'shrink' : 'expand'}
+                screenReaderText={isExpanded ? 'Shrink table' : 'Expand table'}
+              />
+            </Button>
           )}
         </div>
       )}

package/src/components/table/tableControls/TableSettingsDropdown.tsx

@@ -1,4 +1,5 @@
 import { Button } from 'Components/button/Button';
+import { Icon } from 'Components/icon/Icon';
 import { Dropdown } from 'Components/dropdown/Dropdown';
 import { CheckboxGroup } from 'Components/formField/inputs/checkbox/CheckboxGroup';
 import { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonGroup';
@@ -138,15 +139,17 @@ export const TableSettingsDropdown = ({ items = TABLE_SETTINGS_ITEMS }: TableSet
       <Dropdown.Trigger>
         <Button
           variant="secondary"
-          iconRightName="settings"
-          iconRightScreenReaderText="Table settings"
+          isRound
           borderless
-        />
+        >
+          <Icon name="settings" screenReaderText="Table settings" />
+        </Button>
       </Dropdown.Trigger>
       <Dropdown.Content>
         {items.map(renderItem)}
         <Separator />
-        <Button variant="tertiary" iconLeftName="redo" onClick={resetSettings}>
+        <Button variant="tertiary" onClick={resetSettings}>
+          <Icon name="redo" />
           Reset Table Settings
         </Button>
       </Dropdown.Content>

package/src/components/toast/Toast.tsx

@@ -36,7 +36,7 @@ export const Toast = (props: ToastProps): React.JSX.Element => {
           )}
         </div>
       </div>
-      <RadixToast.Close className="ds-toast__close ds-button ds-button--secondary ds-button--icon-only ds-button--borderless">
+      <RadixToast.Close className="ds-toast__close ds-button ds-button--secondary ds-button--round ds-button--borderless">
         <Icon name="x" screenReaderText="Close" />
       </RadixToast.Close>
     </RadixToast.Root>

package/src/components/tooltip/Tooltip.stories.tsx

@@ -237,7 +237,7 @@ const AllPlacementsTemplate = () => (
         <span style={{ fontSize: 'var(--font-size-2-13)', color: 'var(--color-grey-600)' }}>{`side="${side}"`}</span>
         <Tooltip delayDuration={0}>
           <Tooltip.Trigger>
-            <Button type="secondary">Hover me</Button>
+            <Button variant="secondary">Hover me</Button>
           </Tooltip.Trigger>
           <Tooltip.Content side={side}>
             Tooltip on the
@@ -253,7 +253,7 @@ const AllPlacementsTemplate = () => (
 const WithoutArrowTemplate = () => (
   <Tooltip delayDuration={0}>
     <Tooltip.Trigger>
-      <Button type="secondary">Hover me</Button>
+      <Button variant="secondary">Hover me</Button>
     </Tooltip.Trigger>
     <Tooltip.Content shouldShowArrow={false}>
       No arrow on this tooltip
@@ -264,7 +264,7 @@ const WithoutArrowTemplate = () => (
 const WithRichContentTemplate = () => (
   <Tooltip delayDuration={0}>
     <Tooltip.Trigger>
-      <Button type="secondary">Assessment period</Button>
+      <Button variant="secondary">Assessment period</Button>
     </Tooltip.Trigger>
     <Tooltip.Content>
       <div>
@@ -327,7 +327,7 @@ const SlowDelayTemplate = () => (
       </span>
       <Tooltip delayDuration={0}>
         <Tooltip.Trigger>
-          <Button type="secondary">Instant</Button>
+          <Button variant="secondary">Instant</Button>
         </Tooltip.Trigger>
         <Tooltip.Content>Shows immediately on hover</Tooltip.Content>
       </Tooltip>
@@ -341,7 +341,7 @@ const SlowDelayTemplate = () => (
       </span>
       <Tooltip delayDuration={400}>
         <Tooltip.Trigger>
-          <Button type="secondary">Default delay</Button>
+          <Button variant="secondary">Default delay</Button>
         </Tooltip.Trigger>
         <Tooltip.Content>Shows after 400ms</Tooltip.Content>
       </Tooltip>
@@ -353,7 +353,7 @@ const SlowDelayTemplate = () => (
       </span>
       <Tooltip delayDuration={1000}>
         <Tooltip.Trigger>
-          <Button type="secondary">Slow</Button>
+          <Button variant="secondary">Slow</Button>
         </Tooltip.Trigger>
         <Tooltip.Content>Shows after 1 second</Tooltip.Content>
       </Tooltip>
@@ -372,7 +372,7 @@ export const Default: Story = {
   render: args => (
     <Tooltip {...args}>
       <Tooltip.Trigger>
-        <Button type="primary">Hover or focus me</Button>
+        <Button variant="primary">Hover or focus me</Button>
       </Tooltip.Trigger>
       <Tooltip.Content>
         This is a tooltip

package/src/components/tooltip/TooltipWrapper.stories.tsx

@@ -244,7 +244,7 @@ const WithContentPropsTemplate = () => (
       contentProps={{ side: 'right' }}
       delayDuration={0}
     >
-      <Button type="secondary">Side: right</Button>
+      <Button variant="secondary">Side: right</Button>
     </TooltipWrapper>
 
     <TooltipWrapper
@@ -252,7 +252,7 @@ const WithContentPropsTemplate = () => (
       contentProps={{ shouldShowArrow: false }}
       delayDuration={0}
     >
-      <Button type="secondary">No arrow</Button>
+      <Button variant="secondary">No arrow</Button>
     </TooltipWrapper>
 
     <TooltipWrapper
@@ -260,7 +260,7 @@ const WithContentPropsTemplate = () => (
       contentProps={{ sideOffset: 16 }}
       delayDuration={0}
     >
-      <Button type="secondary">sideOffset=16</Button>
+      <Button variant="secondary">sideOffset=16</Button>
     </TooltipWrapper>
   </div>
 );
@@ -273,7 +273,7 @@ export const Default: Story = {
   args: {
     tooltipContent: 'This is the tooltip content',
     delayDuration: 400,
-    children: <Button type="primary">Hover or focus me</Button>,
+    children: <Button variant="primary">Hover or focus me</Button>,
   },
   parameters: {
     docs: {

package/src/components/userDropdown/internal/UserDropdownTrigger.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Dropdown } from 'Components/dropdown/Dropdown';
 import { Avatar } from 'Components/avatar/Avatar';
 import { Button } from 'Components/button/Button';
+import { Icon } from 'Components/icon/Icon';
 
 type UserDropdownTriggerProps = {
   avatarSrc?: string;
@@ -25,10 +26,10 @@ export const UserDropdownTrigger = (props: UserDropdownTriggerProps) => {
         <Button
           variant="secondary"
           borderless={true}
-          iconRightName="chevron-down"
           className="ds-user-dropdown__trigger"
         >
           <Avatar size="medium" src={avatarSrc} alt={avatarAlt} initials={avatarInitials} />
+          <Icon name="chevron-down" />
         </Button>
       </Dropdown.Trigger>
       {logoSrc && (