harness · 3em · May 13, 2025
diff --git a/apps/design-system/src/subjects/views/connectors/connectors-ref.tsx b/apps/design-system/src/subjects/views/connectors/connectors-ref.tsx
@@ -4,7 +4,7 @@ import { getHarnessConnectorDefinition, harnessConnectors } from '@utils/connect
 import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { InputFactory } from '@harnessio/forms'
-import { Button, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
+import { Button, ButtonGroup, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
 import {
   ArrayInput,
   BooleanInput,
@@ -118,8 +118,8 @@ export const ConnectorsRefPage = ({
               onSelectConnector={() => setIsConnectorSelected(true)}
               setConnectorEntity={setConnectorEntity}
             />
-            <Drawer.Root open={isConnectorSelected} onOpenChange={setIsConnectorSelected} direction="right" nested>
-              <Drawer.Content nested>
+            <Drawer.Root open={isConnectorSelected} onOpenChange={setIsConnectorSelected} nested>
+              <Drawer.Content>
                 {!!connectorEntity && (
                   <ConnectorEntityForm
                     intent={EntityIntent.CREATE}
@@ -169,13 +169,12 @@ export const ConnectorsRefPage = ({
   }
 
   return (
-    <Drawer.Root direction="right" open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
+    <Drawer.Root open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
       <Drawer.Content>
         <Drawer.Header>
           <Drawer.Title>Connectors</Drawer.Title>
-          <Drawer.Close onClick={() => setIsDrawerOpen(false)} srOnly />
         </Drawer.Header>
-        <Drawer.Inner>
+        <Drawer.Body>
           <Text as="div" className="text-cn-foreground-2 mb-4">
             Choose type
           </Text>
@@ -186,12 +185,14 @@ export const ConnectorsRefPage = ({
           <Spacer size={5} />
 
           {renderConnectorContent()}
-        </Drawer.Inner>
+        </Drawer.Body>
         <Drawer.Footer>
-          <Button type="button" variant="outline" onClick={handleCancel}>
-            Cancel
-          </Button>
-          <Button>Save</Button>
+          <ButtonGroup>
+            <Button type="button" variant="outline" onClick={handleCancel}>
+              Cancel
+            </Button>
+            <Button>Save</Button>
+          </ButtonGroup>
         </Drawer.Footer>
       </Drawer.Content>
     </Drawer.Root>

diff --git a/apps/design-system/src/subjects/views/connectors/connectors.tsx b/apps/design-system/src/subjects/views/connectors/connectors.tsx
@@ -106,33 +106,34 @@ const ConnectorsListPageContent = (): JSX.Element => {
         errorData={{ errors: [{ reason: 'Unexpected Error', message: 'Bad credentials' }] }}
       />
 
-      <Drawer.Root open={isConnectorDrawerOpen} onOpenChange={setIsConnectorDrawerOpen} direction="right">
+      <Drawer.Root open={isConnectorDrawerOpen} onOpenChange={setIsConnectorDrawerOpen}>
         <ConnectorsPalette
           useTranslationStore={useTranslationStore}
           connectors={harnessConnectors}
           onSelectConnector={() => setIsConnectorSelected(true)}
           setConnectorEntity={setConnectorEntity}
           requestClose={onCloseConnectorDrawer}
           isDrawer
-        />
-        <Drawer.Root open={isConnectorSelected} onOpenChange={setIsConnectorSelected} direction="right" nested>
-          <Drawer.Content nested>
-            {!!connectorEntity && (
-              <ConnectorEntityForm
-                useTranslationStore={useTranslationStore}
-                connector={connectorEntity}
-                onBack={() => setIsConnectorSelected(false)}
-                // onFormSubmit={handleFormSubmit}
-                getConnectorDefinition={getHarnessConnectorDefinition}
-                inputComponentFactory={inputComponentFactory}
-                intent={intent}
-                isDrawer
-              />
-            )}
-          </Drawer.Content>
-        </Drawer.Root>
+        >
+          <Drawer.Root open={isConnectorSelected} onOpenChange={setIsConnectorSelected} nested>
+            <Drawer.Content>
+              {!!connectorEntity && (
+                <ConnectorEntityForm
+                  useTranslationStore={useTranslationStore}
+                  connector={connectorEntity}
+                  onBack={() => setIsConnectorSelected(false)}
+                  // onFormSubmit={handleFormSubmit}
+                  getConnectorDefinition={getHarnessConnectorDefinition}
+                  inputComponentFactory={inputComponentFactory}
+                  intent={intent}
+                  isDrawer
+                />
+              )}
+            </Drawer.Content>
+          </Drawer.Root>
+        </ConnectorsPalette>
       </Drawer.Root>
-      <Drawer.Root open={isEditConnectorDrawerOpen} onOpenChange={setIsEditConnectorDrawerOpen} direction="right">
+      <Drawer.Root open={isEditConnectorDrawerOpen} onOpenChange={setIsEditConnectorDrawerOpen}>
         <Drawer.Content>
           {!!connectorEntity && (
             <ConnectorEntityForm

diff --git a/apps/design-system/src/subjects/views/delegates/delegate-selector.tsx b/apps/design-system/src/subjects/views/delegates/delegate-selector.tsx
@@ -52,11 +52,10 @@ interface DrawerProps {
 }
 
 const DelegateSelectorDrawer = ({ open, setOpen, preSelectedTags, onSubmit, disableAnyDelegate }: DrawerProps) => (
-  <Drawer.Root open={open} onOpenChange={setOpen} direction="right">
-    <Drawer.Content className="w-1/2">
+  <Drawer.Root open={open} onOpenChange={setOpen}>
+    <Drawer.Content>
       <Drawer.Header>
         <Drawer.Title>Delegate selector</Drawer.Title>
-        <Drawer.Close onClick={() => setOpen(false)} srOnly />
       </Drawer.Header>
 
       <DelegateSelectorForm

diff --git a/apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx b/apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx
@@ -10,7 +10,7 @@ import {
   SerialNodeContent,
   SerialNodeInternalType
 } from '@harnessio/pipeline-graph'
-import { Button, Drawer, Icon, PipelineNodes } from '@harnessio/ui/components'
+import { Button, ButtonGroup, Drawer, Icon, PipelineNodes } from '@harnessio/ui/components'
 
 // *****************************************************
 // 1. Import CSS
@@ -76,9 +76,9 @@ export function StepNodeComponent({
   }
 
   return (
-    <Drawer.Root direction="right">
+    <Drawer.Root>
       <Drawer.Trigger asChild>{stepNode}</Drawer.Trigger>
-      <Drawer.Content className="bg-cn-background-1 border-cn-borders-2 size-full max-w-2xl rounded-none border-l p-0 ">
+      <Drawer.Content size="md">
         <Drawer.Header className="p-0">
           <ExecutionHeader
             commitName="8fbru3ix"
@@ -91,15 +91,15 @@ export function StepNodeComponent({
             pipelineName="npm_build"
           />
         </Drawer.Header>
-        <Drawer.Inner viewportClassName="p-0">
+        <Drawer.Body className="p-0">
           <ExecutionInfo
             isDrawer
             useLogsStore={() => ({ logs })}
             onCopy={() => {}}
             onDownload={() => {}}
             onEdit={() => {}}
           />
-        </Drawer.Inner>
+        </Drawer.Body>
       </Drawer.Content>
     </Drawer.Root>
   )
@@ -131,23 +131,25 @@ export function ApprovalStepNodeComponent({
   }
 
   return (
-    <Drawer.Root direction="right">
+    <Drawer.Root>
       <Drawer.Trigger asChild>{approvalNode}</Drawer.Trigger>
-      <Drawer.Content className="flex h-full w-1/2 flex-col justify-between">
-        <div className="flex flex-col gap-4">
-          <Drawer.Header>
-            <Drawer.Title>Approval</Drawer.Title>
-            <Drawer.Description>Approve/Reject step execution</Drawer.Description>
-          </Drawer.Header>
-          <div className="flex justify-center gap-2">
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>Approval</Drawer.Title>
+          <Drawer.Description>Approve/Reject step execution</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body>
+          <ButtonGroup>
             <Button type="submit">Approve</Button>
             <Button variant="secondary">Cancel</Button>
-          </div>
-        </div>
+          </ButtonGroup>
+        </Drawer.Body>
         <Drawer.Footer>
-          <Drawer.Close>
-            <Button variant="outline">Close</Button>
-          </Drawer.Close>
+          <ButtonGroup>
+            <Drawer.Close asChild>
+              <Button variant="outline">Close</Button>
+            </Drawer.Close>
+          </ButtonGroup>
         </Drawer.Footer>
       </Drawer.Content>
     </Drawer.Root>

diff --git a/apps/design-system/src/subjects/views/secrets/secrets.tsx b/apps/design-system/src/subjects/views/secrets/secrets.tsx
@@ -4,7 +4,7 @@ import { secretsFormDefinition } from '@utils/secrets/secrets-form-schema'
 import { noop, useTranslationStore } from '@utils/viewUtils'
 
 import { InputFactory } from '@harnessio/forms'
-import { Button, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
+import { Button, ButtonGroup, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
 import {
   ArrayInput,
   BooleanInput,
@@ -165,13 +165,12 @@ export const SecretsPage = ({
 
   return (
     <>
-      <Drawer.Root open={isDrawerOpen} onOpenChange={setIsDrawerOpen} direction="right">
+      <Drawer.Root open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
         <Drawer.Content>
           <Drawer.Header>
             <Drawer.Title>Secret</Drawer.Title>
-            <Drawer.Close onClick={() => setIsDrawerOpen(false)} srOnly />
           </Drawer.Header>
-          <Drawer.Inner>
+          <Drawer.Body>
             <Text as="div" className="text-cn-foreground-2 mb-4">
               Choose type
             </Text>
@@ -180,12 +179,14 @@ export const SecretsPage = ({
             <FormSeparator className="w-full" />
             <Spacer size={6} />
             {renderSecretContent()}
-          </Drawer.Inner>
+          </Drawer.Body>
           <Drawer.Footer>
-            <Button variant="outline" onClick={handleCancel}>
-              Back
-            </Button>
-            <Button onClick={selectedType === SecretType.NEW ? handleSubmitEntityForm : noop}>Save</Button>
+            <ButtonGroup>
+              <Button variant="outline" onClick={handleCancel}>
+                Back
+              </Button>
+              <Button onClick={selectedType === SecretType.NEW ? handleSubmitEntityForm : noop}>Save</Button>
+            </ButtonGroup>
           </Drawer.Footer>
         </Drawer.Content>
       </Drawer.Root>

diff --git a/apps/design-system/src/subjects/views/unified-pipeline-studio/unified-pipeline-studio.tsx b/apps/design-system/src/subjects/views/unified-pipeline-studio/unified-pipeline-studio.tsx
@@ -45,18 +45,16 @@ const PipelineStudioViewWrapper = () => {
         view={view}
         onRun={() => setRunPipelineOpen(true)}
       />
-      <Drawer.Lazy
-        unmountOnClose={true}
+      <Drawer.Root
         open={runPipelineOpen}
         onOpenChange={isOpen => {
           if (!isOpen) {
             setRunPipelineOpen(false)
           }
         }}
-        direction="right"
       >
         <RunPipelineDrawerContent onClose={() => setRunPipelineOpen(false)} />
-      </Drawer.Lazy>
+      </Drawer.Root>
     </>
   )
 }