linode · bnussman-akamai · Oct 25, 2023 · Oct 23, 2023 · Oct 23, 2023 · Oct 23, 2023
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Create Stack component ([#9830](https://github.com/linode/manager/pull/9830))
@@ -1,12 +1,12 @@
 import BuildIcon from '@mui/icons-material/Build';
-import Stack from '@mui/material/Stack';
 import { Theme, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import Logo from 'src/assets/logo/akamai-logo.svg';
 import { Box } from 'src/components/Box';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Link } from 'src/components/Link';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 export const MaintenanceScreen = () => {

@@ -1,5 +1,5 @@
 import { Firewall } from '@linode/api-v4';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 
 import { Paper } from 'src/components/Paper';

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { Divider } from './Divider';
+import { Paper } from './Paper';
+import { Stack } from './Stack';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const children = [
+  <Paper key={0} variant="outlined">
+    1
+  </Paper>,
+  <Paper key={1} variant="outlined">
+    2
+  </Paper>,
+  <Paper key={2} variant="outlined">
+    3
+  </Paper>,
+];
+
+export const Default: StoryObj<typeof Stack> = {
+  args: {
+    children,
+    spacing: 2,
+  },
+  render: (args) => <Stack {...args} />,
+};
+
+export const Vertical: StoryObj<typeof Stack> = {
+  args: {
+    children,
+    spacing: 2,
+  },
+  render: (args) => <Stack {...args} />,
+};
+
+export const Horizontal: StoryObj<typeof Stack> = {
+  args: {
+    children,
+    direction: 'row',
+    spacing: 2,
+  },
+  render: (args) => <Stack {...args} />,
+};
+
+export const WithDivider: StoryObj<typeof Stack> = {
+  args: {
+    children,
+    direction: 'row',
+    divider: <Divider flexItem orientation="vertical" />,
+    spacing: 2,
+  },
+  render: (args) => <Stack {...args} />,
+};
+
+const meta: Meta<typeof Stack> = {
+  component: Stack,
+  title: 'Components/Stack',
+};
+
+export default meta;
@@ -0,0 +1,14 @@
+import { default as _Stack, StackProps } from '@mui/material/Stack';
+import React from 'react';
+
+/**
+ * A Stack is a layout component that uses flexbox to
+ * vertically or horizontally align elements with optional spacing.
+ *
+ * > Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical and horizontal arrangement.
+ */
+export const Stack = (props: StackProps) => {
+  return <_Stack {...props} />;
+};
+
+export type { StackProps };
@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { isNumber } from 'lodash';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';

@@ -1,6 +1,6 @@
 import { AccountBeta } from '@linode/api-v4/lib/account';
 import { Beta } from '@linode/api-v4/lib/betas';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 

@@ -1,7 +1,7 @@
 import { APIError } from '@linode/api-v4';
 import { AccountBeta } from '@linode/api-v4/lib/account';
 import { Beta } from '@linode/api-v4/lib/betas';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 
 import { CircleProgress } from 'src/components/CircleProgress';

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 
 import { LandingHeader } from 'src/components/LandingHeader/LandingHeader';

@@ -1,7 +1,7 @@
 import { PaymentMethod } from '@linode/api-v4';
 import { makePayment } from '@linode/api-v4/lib/account';
 import { APIWarning } from '@linode/api-v4/lib/types';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 
 import { DismissibleBanner } from 'src/components/DismissibleBanner';

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';

@@ -2,7 +2,7 @@ import {
   InterfacePayload,
   InterfacePurpose,
 } from '@linode/api-v4/lib/linodes/types';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React, { useState } from 'react';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React from 'react';
 import { Route, useLocation, useRouteMatch } from 'react-router-dom';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React, { useState } from 'react';
 
@@ -141,10 +141,17 @@ export const ConfigurationAccordion = (props: Props) => {
             />
           </Stack>
           <Stack maxWidth="600px">
-            <Stack alignItems="center" direction="row">
-              <InputLabel sx={{ marginBottom: 0 }}>TLS Certificates</InputLabel>
-              <TooltipIcon status="help" text="OMG!" />
-              <Box flexGrow={1} />
+            <Stack
+              alignItems="center"
+              direction="row"
+              justifyContent="space-between"
+            >
+              <Stack alignItems="center" direction="row">
+                <InputLabel sx={{ marginBottom: 0 }}>
+                  TLS Certificates
+                </InputLabel>
+                <TooltipIcon status="help" text="OMG!" />
+              </Stack>
               <Button>Upload Certificate</Button>
             </Stack>
             <CertificateTable

@@ -1,17 +1,16 @@
 import { ServiceTarget } from '@linode/api-v4';
 import CloseIcon from '@mui/icons-material/Close';
 import { Hidden, IconButton } from '@mui/material';
-import Stack from '@mui/material/Stack';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { ActionMenu } from 'src/components/ActionMenu';
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { InputAdornment } from 'src/components/InputAdornment';
 import { Link } from 'src/components/Link';
 import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
+import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
@@ -86,10 +85,10 @@ export const LoadBalancerServiceTargets = () => {
   return (
     <>
       <Stack
-        alignItems="flex-end"
         direction="row"
         flexWrap="wrap"
         gap={2}
+        justifyContent="space-between"
         mb={2}
         mt={1.5}
       >
@@ -118,7 +117,6 @@ export const LoadBalancerServiceTargets = () => {
           style={{ minWidth: '320px' }}
           value={query}
         />
-        <Box flexGrow={1} />
         <Button
           buttonType="primary"
           onClick={() => setIsCreateDrawerOpen(true)}

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React from 'react';
 import { useParams } from 'react-router-dom';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import React from 'react';
 import { useParams } from 'react-router-dom';

@@ -1,11 +1,10 @@
 import CloseIcon from '@mui/icons-material/Close';
 import { Hidden, IconButton } from '@mui/material';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { ActionMenu } from 'src/components/ActionMenu';
-import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import {
@@ -210,6 +209,7 @@ export const RoutesTable = ({ configuredRoutes }: Props) => {
         direction="row"
         flexWrap="wrap"
         gap={2}
+        justifyContent="space-between"
         mb={2}
         mt={1.5}
       >
@@ -238,7 +238,6 @@ export const RoutesTable = ({ configuredRoutes }: Props) => {
           style={{ minWidth: '320px' }}
           value={query}
         />
-        <Box flexGrow={1} />
         {/**
          * TODO: AGLB: The Create Route behavior should be implemented in future AGLB tickets.
          */}

@@ -1,7 +1,7 @@
 import { HTTPRuleSchema, TCPRuleSchema } from '@linode/validation';
 import CloseIcon from '@mui/icons-material/Close';
 import { IconButton } from '@mui/material';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { getIn, useFormik } from 'formik';
 import React, { useState } from 'react';
 

@@ -1,5 +1,5 @@
 import { Endpoint, ServiceTargetPayload } from '@linode/api-v4';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React from 'react';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React from 'react';
 
 import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React from 'react';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { useFormik } from 'formik';
 import React from 'react';
 

@@ -1,5 +1,5 @@
 import { Loadbalancer } from '@linode/api-v4';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import * as React from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import { DateTime } from 'luxon';
 import * as React from 'react';
 

@@ -1,5 +1,5 @@
 import { SupportReply } from '@linode/api-v4/lib/support';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
 import { isEmpty } from 'ramda';

@@ -2,7 +2,7 @@ import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
 import { Theme, styled, useMediaQuery } from '@mui/material';
 import Popover from '@mui/material/Popover';
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 

@@ -1,4 +1,4 @@
-import Stack from '@mui/material/Stack';
+import { Stack } from 'src/components/Stack';
 import React from 'react';
 
 import { Box } from 'src/components/Box';

@@ -1,9 +1,9 @@
 import { Volume } from '@linode/api-v4';
-import Stack from '@mui/material/Stack/Stack';
 import React from 'react';
 
 import { CopyableTextField } from 'src/components/CopyableTextField/CopyableTextField';
 import { Drawer } from 'src/components/Drawer';
+import { Stack } from 'src/components/Stack';
 import { Typography } from 'src/components/Typography';
 
 interface Props {