From 0ab6d5a615960a7c0b5c5a448a91aff4cefdd7d3 Mon Sep 17 00:00:00 2001 From: Sophie Stadler Date: Thu, 15 Aug 2024 11:23:54 -0400 Subject: [PATCH] DEVPROD-1065: Remove antd layout (#312) --- .github/pull_request_template.md | 2 +- README.md | 10 +- apps/spruce/src/components/styles/Layout.tsx | 33 ++- ...ePatchCore_ConfigureTasksDefault.storyshot | 235 +++++++++--------- 4 files changed, 140 insertions(+), 140 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 6eba62c19..b43426c43 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,5 +1,5 @@ DEVPROD-NNNNN - + ### Description diff --git a/README.md b/README.md index db5126727..fe9a27f6a 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Check out the [Yarn Workspaces documentation](https://classic.yarnpkg.com/lang/en/docs/workspaces/) for more. -### Upgrades +### Dependencies To upgrade a dependency across workspaces: @@ -18,6 +18,14 @@ To upgrade a dependency across workspaces: yarn upgrade-interactive [--latest] [package-name] ``` +To remove all installed dependencies: + +```bash +yarn clean +``` + +You can then rerun `yarn install`. + ### Scripts To run a script in a workspace from root: diff --git a/apps/spruce/src/components/styles/Layout.tsx b/apps/spruce/src/components/styles/Layout.tsx index 9d241bbfb..35cc12466 100644 --- a/apps/spruce/src/components/styles/Layout.tsx +++ b/apps/spruce/src/components/styles/Layout.tsx @@ -1,17 +1,9 @@ -import { css } from "@emotion/react"; import styled from "@emotion/styled"; import { palette } from "@leafygreen-ui/palette"; import { H2, H2Props, Body, BodyProps } from "@leafygreen-ui/typography"; -import { Layout } from "antd"; import { size, fontSize } from "constants/tokens"; -const { gray, red, white } = palette; -const { Content, Sider } = Layout; - -const whiteBackground = css` - background: ${white}; - background-color: ${white}; -`; +const { gray, red } = palette; export const PageWrapper = styled.div` grid-area: contents; @@ -30,20 +22,25 @@ export const PageGrid = styled.div` height: 100vh; `; -/* Flexbox-based antd components to be used together */ -export const PageLayout = styled(Layout)` - ${whiteBackground} +export const PageLayout = styled.section<{ hasSider?: boolean }>` + display: flex; + flex: auto; + flex-direction: ${({ hasSider }) => (hasSider ? "row" : "column")}; + min-height: 0; `; -export const PageSider = styled(Sider)` - ${whiteBackground} +export const PageSider = styled.aside<{ width?: number }>` + ${({ width = 275 }) => ` + max-width: ${width}px; + min-width: ${width}px; + width: ${width}px; + `} `; -export const PageContent = styled(Content)` +export const PageContent = styled.main` + flex: auto; margin-left: ${size.s}; overflow: hidden; `; -PageSider.defaultProps = { width: 275 }; - export const PageTitle = styled(H2)` margin-bottom: ${size.s}; `; @@ -78,7 +75,7 @@ export const ErrorMessage = styled(Body)` color: ${red.base}; `; -export const HR = styled("hr")` +export const HR = styled.hr` background-color: ${gray.light2}; border: 0; height: 1px; diff --git a/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot b/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot index bc70a5524..3faf69bf1 100644 --- a/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot +++ b/apps/spruce/src/pages/configurePatch/configurePatchCore/__snapshots__/ConfigurePatchCore_ConfigureTasksDefault.storyshot @@ -70,168 +70,163 @@