feat: [UIE-10536] - IAM: divider component

packages/manager/src/features/IAM/Roles/RolesTable/AssignSingleSelectedRole.tsx

@@ -1,9 +1,10 @@
-import { Divider, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
 import { AssignedPermissionsPanel } from 'src/features/IAM/Shared/AssignedPermissionsPanel/AssignedPermissionsPanel';
+import { Divider } from 'src/features/IAM/Shared/Divider/Divider';
 
 import type { RoleView } from 'src/features/IAM/Shared/types';
 import type { AssignNewRoleFormValues } from 'src/features/IAM/Shared/utilities';
@@ -28,10 +29,8 @@ export const AssignSingleSelectedRole = ({
       <Box display="flex" flexDirection="column" sx={{ flex: '5 1 auto' }}>
         {index !== 0 && (
           <Divider
-            sx={{
-              marginBottom: theme.tokens.spacing.S6,
-              marginTop: theme.tokens.spacing.S12,
-            }}
+            spacingBottom={theme.tokens.spacing.S6}
+            spacingTop={theme.tokens.spacing.S12}
           />
         )}
 

packages/manager/src/features/IAM/Shared/Divider/Divider.test.tsx

@@ -0,0 +1,19 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { Divider } from './Divider';
+
+describe('Divider', () => {
+  it('renders an hr element', () => {
+    renderWithTheme(<Divider />);
+    screen.getByRole('separator');
+  });
+
+  it('applies spacingTop and spacingBottom styles', () => {
+    renderWithTheme(<Divider spacingBottom="16px" spacingTop="8px" />);
+    const hr = screen.getByRole('separator');
+    expect(hr).toHaveStyle({ marginTop: '8px', marginBottom: '16px' });
+  });
+});

packages/manager/src/features/IAM/Shared/Divider/Divider.tsx

@@ -0,0 +1,25 @@
+import { omittedProps, styled } from '@linode/ui';
+import React from 'react';
+
+export interface DividerProps {
+  spacingBottom?: number | string;
+  spacingTop?: number | string;
+}
+
+export const Divider = (props: DividerProps) => {
+  return <StyledDivider {...props} />;
+};
+
+export const StyledDivider = styled('hr', {
+  label: 'StyledDivider',
+  shouldForwardProp: omittedProps(['spacingTop', 'spacingBottom']),
+})<DividerProps>(({ theme, spacingTop, spacingBottom }) => ({
+  display: 'block',
+  margin: `${theme.tokens.spacing.S8} 0`,
+  width: '100%',
+  borderWidth: '0 0 thin',
+  borderStyle: 'solid',
+  borderColor: theme.tokens.component.Divider.Border,
+  marginBottom: spacingBottom,
+  marginTop: spacingTop,
+}));

packages/manager/src/features/IAM/Users/UserRoles/AssignSingleRole.tsx

@@ -1,12 +1,14 @@
 import { Autocomplete, Button, DeleteIcon } from '@linode/ui';
-import { Divider, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
 import { AssignedPermissionsPanel } from 'src/features/IAM/Shared/AssignedPermissionsPanel/AssignedPermissionsPanel';
 import { getRoleByName } from 'src/features/IAM/Shared/utilities';
 
+import { Divider } from '../../Shared/Divider/Divider';
+
 import type { IamAccountRoles } from '@linode/api-v4';
 import type {
   AssignNewRoleFormValues,
@@ -40,10 +42,8 @@ export const AssignSingleRole = ({
       <Box display="flex" flexDirection="column" sx={{ flex: '5 1 auto' }}>
         {index !== 0 && (
           <Divider
-            sx={{
-              marginBottom: theme.tokens.spacing.S24,
-              marginTop: theme.tokens.spacing.S20,
-            }}
+            spacingBottom={theme.tokens.spacing.S24}
+            spacingTop={theme.tokens.spacing.S20}
           />
         )}