From 82a0031e8a0750995f05ee6e7d41c95fdb3c1cb8 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Tue, 12 Nov 2024 10:09:40 -0500 Subject: [PATCH 1/7] Updates styles to accomodate focus indicator --- src/theme/components/template.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index b8eb34b42..d41bfbab0 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -41,8 +41,7 @@ const TemplateContent = defineStyleConfig({ flexDirection: { base: "column", md: null }, gridTemplateColumns: "1fr", paddingY: 0, - paddingX: "s", - gap: "grid.l", + rowGap: "grid.l", }), // With left or right sidebars, we need to set two grid columns and // the column for the sidebar is max 255px width. @@ -60,6 +59,7 @@ const TemplateContentTopBottom = defineStyleConfig({ baseStyle: defineStyle({ gridColumn: { base: "1", md: "1 / span 2" }, height: "100%", + paddingX: "s", }), }); @@ -68,17 +68,22 @@ const TemplateContentTopBottom = defineStyleConfig({ const TemplateContentPrimary = defineStyleConfig({ baseStyle: defineStyle({ gridColumn: { base: "1", md: "1 / span 2" }, + overflow: { base: "unset", md: "hidden" }, + paddingX: "s", }), variants: { left: { gridColumn: { base: "1", md: "2" }, marginEnd: { md: 0 }, minWidth: { md: 0 }, - overflow: { base: "unset", md: "hidden" }, + paddingRight: "s", + paddingLeft: "l", }, right: { gridColumn: { base: "1", md: "1" }, - overflow: { base: "unset", md: "hidden" }, + // paddingX: undefined, + paddingRight: "l", + paddingLeft: "s", }, }, }); From 41ad98e130cbcc8bea8516dcf2d41fd492175cb8 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Tue, 12 Nov 2024 11:58:28 -0500 Subject: [PATCH 2/7] Updates styles and docs for Template --- CHANGELOG.md | 4 ++++ src/components/Template/Template.mdx | 8 ++++---- src/components/Template/templateChangelogData.ts | 9 +++++++++ src/theme/components/template.ts | 3 ++- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 14da433b7..f2d36526d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ Currently, this repo is in Prerelease. When it is released, this project will ad ## Prerelease +### Fixes + +- Fixes issue where focus indicator was being cut off in places in the `Template` component. + ## 3.4.2 (November 7, 2024) ### Adds diff --git a/src/components/Template/Template.mdx b/src/components/Template/Template.mdx index 9f4a33c8d..27c5921c6 100644 --- a/src/components/Template/Template.mdx +++ b/src/components/Template/Template.mdx @@ -22,10 +22,10 @@ import Link from "../Link/Link"; # Template -| Component Version | DS Version | -| ----------------- | ---------- | -| Added | `0.3.6` | -| Latest | `3.4.0` | +| Component Version | DS Version | +| ----------------- | ------------ | +| Added | `0.3.6` | +| Latest | `Prerelease` | ## Table of Contents diff --git a/src/components/Template/templateChangelogData.ts b/src/components/Template/templateChangelogData.ts index 3baaeff26..2ca021b29 100644 --- a/src/components/Template/templateChangelogData.ts +++ b/src/components/Template/templateChangelogData.ts @@ -9,6 +9,15 @@ import { ChangelogData } from "../../utils/ComponentChangelogTable"; export const changelogData: ChangelogData[] = [ + { + date: "Prerelease", + version: "Prerelease", + type: "Bug Fix", + affects: ["Styles"], + notes: [ + "Fixes an issue where focus indicator was being cut off in places.", + ], + }, { date: "2024-10-02", version: "3.4.0", diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index d41bfbab0..449bca271 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -81,7 +81,6 @@ const TemplateContentPrimary = defineStyleConfig({ }, right: { gridColumn: { base: "1", md: "1" }, - // paddingX: undefined, paddingRight: "l", paddingLeft: "s", }, @@ -91,9 +90,11 @@ const TemplateContentSidebar = defineStyleConfig({ variants: { left: { gridColumn: "1", + paddingLeft: "s", }, right: { gridColumn: { base: "1", md: "2" }, + paddingRight: "s", }, }, }); From dfaa59c183fc3ba831bc1dfbd42ffce4e7c70669 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Thu, 14 Nov 2024 16:33:30 -0500 Subject: [PATCH 3/7] Updates per PR feedback --- src/theme/components/template.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index 449bca271..c6bdf0db8 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -47,10 +47,10 @@ const TemplateContent = defineStyleConfig({ // the column for the sidebar is max 255px width. variants: { left: { - gridTemplateColumns: { md: "255px 1fr" }, + gridTemplateColumns: { md: "271px 1fr" }, }, right: { - gridTemplateColumns: { md: "1fr 255px" }, + gridTemplateColumns: { md: "1fr 271px" }, }, }, }); @@ -77,11 +77,11 @@ const TemplateContentPrimary = defineStyleConfig({ marginEnd: { md: 0 }, minWidth: { md: 0 }, paddingRight: "s", - paddingLeft: "l", + paddingLeft: { base: "s", md: "l" }, }, right: { - gridColumn: { base: "1", md: "1" }, - paddingRight: "l", + gridColumn: "1", + paddingRight: { base: "s", md: "l" }, paddingLeft: "s", }, }, @@ -91,9 +91,11 @@ const TemplateContentSidebar = defineStyleConfig({ left: { gridColumn: "1", paddingLeft: "s", + paddingRight: { base: "s", md: undefined }, }, right: { gridColumn: { base: "1", md: "2" }, + paddingLeft: { base: "s", md: undefined }, paddingRight: "s", }, }, From 9f74a344c4df860d7d0197304db4e3eb591d232e Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Thu, 14 Nov 2024 16:35:57 -0500 Subject: [PATCH 4/7] Updates comment --- src/theme/components/template.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index c6bdf0db8..5f5fc23c2 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -44,7 +44,8 @@ const TemplateContent = defineStyleConfig({ rowGap: "grid.l", }), // With left or right sidebars, we need to set two grid columns and - // the column for the sidebar is max 255px width. + // the column for the sidebar is max 271px width (255px for the sidebar, + // + 16px for padding). variants: { left: { gridTemplateColumns: { md: "271px 1fr" }, From 199159b0e4ce4ee2cbec4f7d0a9a7427e6ef5f06 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Mon, 18 Nov 2024 12:20:10 -0500 Subject: [PATCH 5/7] Updates per PR feedback --- src/components/Template/templateChangelogData.ts | 2 +- src/theme/components/template.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Template/templateChangelogData.ts b/src/components/Template/templateChangelogData.ts index 2ca021b29..41143f371 100644 --- a/src/components/Template/templateChangelogData.ts +++ b/src/components/Template/templateChangelogData.ts @@ -15,7 +15,7 @@ export const changelogData: ChangelogData[] = [ type: "Bug Fix", affects: ["Styles"], notes: [ - "Fixes an issue where focus indicator was being cut off in places.", + "Adjusts padding to fix an issue where focus indicators were being cut off in the primary content section.", ], }, { diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index 5f5fc23c2..7cba6dd5a 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -92,11 +92,11 @@ const TemplateContentSidebar = defineStyleConfig({ left: { gridColumn: "1", paddingLeft: "s", - paddingRight: { base: "s", md: undefined }, + paddingRight: { base: "s", md: 0 }, }, right: { gridColumn: { base: "1", md: "2" }, - paddingLeft: { base: "s", md: undefined }, + paddingLeft: { base: "s", md: 0 }, paddingRight: "s", }, }, From 41104086e233d4f2ab4fab6f67a4f7ea6f4a85f0 Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Mon, 18 Nov 2024 12:23:30 -0500 Subject: [PATCH 6/7] Cleans up note --- src/theme/components/template.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index 7cba6dd5a..75f9c6f99 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -44,7 +44,7 @@ const TemplateContent = defineStyleConfig({ rowGap: "grid.l", }), // With left or right sidebars, we need to set two grid columns and - // the column for the sidebar is max 271px width (255px for the sidebar, + // the column for the sidebar is max 271px width (255px for the sidebar // + 16px for padding). variants: { left: { From fd09aa59c038610404f8502bfb43ba8aa7f4cc1b Mon Sep 17 00:00:00 2001 From: Olivia Wong Date: Mon, 25 Nov 2024 15:14:31 -0500 Subject: [PATCH 7/7] Updates bug that prevented FeaturedContent from being fullbleed --- src/theme/components/template.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/components/template.ts b/src/theme/components/template.ts index 75f9c6f99..433ca8417 100644 --- a/src/theme/components/template.ts +++ b/src/theme/components/template.ts @@ -69,7 +69,6 @@ const TemplateContentTopBottom = defineStyleConfig({ const TemplateContentPrimary = defineStyleConfig({ baseStyle: defineStyle({ gridColumn: { base: "1", md: "1 / span 2" }, - overflow: { base: "unset", md: "hidden" }, paddingX: "s", }), variants: { @@ -79,11 +78,13 @@ const TemplateContentPrimary = defineStyleConfig({ minWidth: { md: 0 }, paddingRight: "s", paddingLeft: { base: "s", md: "l" }, + overflow: { base: "unset", md: "hidden" }, }, right: { gridColumn: "1", paddingRight: { base: "s", md: "l" }, paddingLeft: "s", + overflow: { base: "unset", md: "hidden" }, }, }, });