From 5461d535e053677ebba5cc3d7c9416dc33ba6a00 Mon Sep 17 00:00:00 2001
From: Anastasiia Alekseenko <aaleksee@akamai.com>
Date: Fri, 20 Mar 2026 16:12:03 +0100
Subject: [PATCH] feat: [UIE-10536] - IAM: divider component

---
 .../RolesTable/AssignSingleSelectedRole.tsx   |  9 +++----
 .../IAM/Shared/Divider/Divider.test.tsx       | 19 ++++++++++++++
 .../features/IAM/Shared/Divider/Divider.tsx   | 25 +++++++++++++++++++
 .../IAM/Users/UserRoles/AssignSingleRole.tsx  | 10 ++++----
 4 files changed, 53 insertions(+), 10 deletions(-)
 create mode 100644 packages/manager/src/features/IAM/Shared/Divider/Divider.test.tsx
 create mode 100644 packages/manager/src/features/IAM/Shared/Divider/Divider.tsx

diff --git a/packages/manager/src/features/IAM/Roles/RolesTable/AssignSingleSelectedRole.tsx b/packages/manager/src/features/IAM/Roles/RolesTable/AssignSingleSelectedRole.tsx
index f58c7a6ffc6..049e5800093 100644
--- a/packages/manager/src/features/IAM/Roles/RolesTable/AssignSingleSelectedRole.tsx
+++ b/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}
           />
         )}
 
diff --git a/packages/manager/src/features/IAM/Shared/Divider/Divider.test.tsx b/packages/manager/src/features/IAM/Shared/Divider/Divider.test.tsx
new file mode 100644
index 00000000000..43b4676ad3f
--- /dev/null
+++ b/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' });
+  });
+});
diff --git a/packages/manager/src/features/IAM/Shared/Divider/Divider.tsx b/packages/manager/src/features/IAM/Shared/Divider/Divider.tsx
new file mode 100644
index 00000000000..6dd2cb89532
--- /dev/null
+++ b/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,
+}));
diff --git a/packages/manager/src/features/IAM/Users/UserRoles/AssignSingleRole.tsx b/packages/manager/src/features/IAM/Users/UserRoles/AssignSingleRole.tsx
index 0e53d8bb247..dd842920440 100644
--- a/packages/manager/src/features/IAM/Users/UserRoles/AssignSingleRole.tsx
+++ b/packages/manager/src/features/IAM/Users/UserRoles/AssignSingleRole.tsx
@@ -1,5 +1,5 @@
 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';
@@ -7,6 +7,8 @@ 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}
           />
         )}