Merge pull request #1701 from NYPL/DSD-1867/overflow-focus-indicator

DSD-1867: overflow focus indicator

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.
+
 ### Adds
 
 - Adds the `"SubNav"`component.

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
 

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: [
+      "Adjusts padding to fix an issue where focus indicators were being cut off in the primary content section.",
+    ],
+  },
   {
     date: "2024-10-02",
     version: "3.4.0",

src/theme/components/template.ts

@@ -41,17 +41,17 @@ 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.
+  // the column for the sidebar is max 271px width (255px for the sidebar
+  // + 16px for padding).
   variants: {
     left: {
-      gridTemplateColumns: { md: "255px 1fr" },
+      gridTemplateColumns: { md: "271px 1fr" },
     },
     right: {
-      gridTemplateColumns: { md: "1fr 255px" },
+      gridTemplateColumns: { md: "1fr 271px" },
     },
   },
 });
@@ -60,6 +60,7 @@ const TemplateContentTopBottom = defineStyleConfig({
   baseStyle: defineStyle({
     gridColumn: { base: "1", md: "1 / span 2" },
     height: "100%",
+    paddingX: "s",
   }),
 });
 
@@ -68,16 +69,21 @@ const TemplateContentTopBottom = defineStyleConfig({
 const TemplateContentPrimary = defineStyleConfig({
   baseStyle: defineStyle({
     gridColumn: { base: "1", md: "1 / span 2" },
+    paddingX: "s",
   }),
   variants: {
     left: {
       gridColumn: { base: "1", md: "2" },
       marginEnd: { md: 0 },
       minWidth: { md: 0 },
+      paddingRight: "s",
+      paddingLeft: { base: "s", md: "l" },
       overflow: { base: "unset", md: "hidden" },
     },
     right: {
-      gridColumn: { base: "1", md: "1" },
+      gridColumn: "1",
+      paddingRight: { base: "s", md: "l" },
+      paddingLeft: "s",
       overflow: { base: "unset", md: "hidden" },
     },
   },
@@ -86,9 +92,13 @@ const TemplateContentSidebar = defineStyleConfig({
   variants: {
     left: {
       gridColumn: "1",
+      paddingLeft: "s",
+      paddingRight: { base: "s", md: 0 },
     },
     right: {
       gridColumn: { base: "1", md: "2" },
+      paddingLeft: { base: "s", md: 0 },
+      paddingRight: "s",
     },
   },
 });