@codecademy/styleguide 79.2.0-alpha.262211.0 → 79.2.0-alpha.2b9208.0

package/.storybook/theming/GamutThemeProvider.tsx

@@ -12,6 +12,8 @@ import {
 } from '@codecademy/gamut-styles/src';
 import { Theme } from '@emotion/react';
 
+const STORYBOOK_CSP_NONCE = 'storybook-csp-nonce';
+
 /**
  * Story functions must be called as a regular function to avoid full-remounts
  * See: https://github.com/storybookjs/storybook/issues/12255

package/CHANGELOG.md

@@ -3,13 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [79.2.0-alpha.262211.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.2.0-alpha.262211.0) (2026-03-05)
+## [79.2.0-alpha.2b9208.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.3...@codecademy/styleguide@79.2.0-alpha.2b9208.0) (2026-03-05)
 
 ### Features
 
+- Layout related logical CSS props ([#3267](https://github.com/Codecademy/gamut/issues/3267)) ([b43cbf1](https://github.com/Codecademy/gamut/commit/b43cbf1256fbf292a141c77a3251fd95f0085a04))
+- logical properties for inset and overflow ([#3269](https://github.com/Codecademy/gamut/issues/3269)) ([18a4d7f](https://github.com/Codecademy/gamut/commit/18a4d7fa7e203b847a9f2b7defdd91345bb30194))
 - Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution ([#3234](https://github.com/Codecademy/gamut/issues/3234)) ([7efbb9a](https://github.com/Codecademy/gamut/commit/7efbb9aabcd07dc6429432d007eaa5603ac1d70c))
 - Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution ([#3234](https://github.com/Codecademy/gamut/issues/3234)) ([567a6ae](https://github.com/Codecademy/gamut/commit/567a6aeffb3e8628db4b5c9a37dab965b716d969))
 
+### [79.1.3](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.2...@codecademy/styleguide@79.1.3) (2026-03-02)
+
+### Bug Fixes
+
+- **GamutProvider:** CSP improvements ([1026353](https://github.com/Codecademy/gamut/commit/10263537c190aff0e5686872da2be2a30b1d9201)), closes [/github.com/adobe/react-spectrum/issues/8273#issuecomment-3897820426](https://github.com/Codecademy//github.com/adobe/react-spectrum/issues/8273/issues/issuecomment-3897820426)
+
 ### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
 
 **Note:** Version bump only for package @codecademy/styleguide

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.0-alpha.262211.0",
+  "version": "79.2.0-alpha.2b9208.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "67397d088d9116fea6037b8746436af400084378"
+  "gitHead": "586e5a0c80b43ae67c14441e76eca1d4b04e3999"
 }

package/src/lib/Foundations/System/Props/Layout.mdx

@@ -18,6 +18,16 @@ export const parameters = {
 
 Layout props control the visual structure and dimensions of elements. These properties determine how components take up space, their display behavior, and how they align within their containers. Use these props to set widths, heights, overflow behavior, and container types for responsive layouts.
 
+## Examples
+
+### Overflow X
+
+<Canvas of={LayoutStories.OverflowXExample} />
+
+### Overflow Y
+
+<Canvas of={LayoutStories.OverflowYExample} />
+
 ```tsx
 import styled from '@emotion/styled';
 import { system } from '@codecademy/gamut-styles';

package/src/lib/Foundations/System/Props/Layout.stories.tsx

@@ -9,6 +9,45 @@ const meta: Meta<typeof Box> = {
 export default meta;
 type Story = StoryObj<typeof Box>;
 
+export const OverflowXExample: Story = {
+  render: () => (
+    <Box
+      bg="background-selected"
+      overflowX="scroll"
+      p={16}
+      whiteSpace="nowrap"
+      width="200px"
+    >
+      <Box
+        bg="primary"
+        color="background-contrast"
+        display="inline-block"
+        p={8}
+      >
+        This content is wider than its container and has{' '}
+        <Markdown text="`overflowX='scroll'`." /> Inspect the example to see
+        what CSS properties are rendered.
+      </Box>
+    </Box>
+  ),
+};
+
+export const OverflowYExample: Story = {
+  render: () => (
+    <Box bg="background-selected" height="100px" overflowY="scroll" p={16}>
+      <Box bg="primary" color="background-contrast" p={8}>
+        This content is taller than its container and has{' '}
+        <Markdown text="`overflowY='scroll'`." /> Inspect the example to see
+        what CSS properties are rendered.
+        <Box mt={16}>Line 2</Box>
+        <Box mt={16}>Line 3</Box>
+        <Box mt={16}>Line 4</Box>
+        <Box mt={16}>Line 5</Box>
+      </Box>
+    </Box>
+  ),
+};
+
 export const WidthExample: Story = {
   render: () => (
     <Box bg="background-selected" p={16}>

package/src/lib/Foundations/System/Props/Positioning.mdx

@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { AboutHeader, TokenTable } from '~styleguide/blocks';
 
 import { defaultColumns, getPropRows } from '../../shared/elements';
+import * as PositioningStories from './Positioning.stories';
 
 export const parameters = {
   title: 'Positioning',
@@ -11,7 +12,7 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta title="Foundations/System/Props/Positioning" />
+<Meta title="Foundations/System/Props/Positioning" of={PositioningStories} />
 
 <AboutHeader {...parameters} />
 
@@ -26,4 +27,8 @@ const PositioningExample = styled.div(system.positioning);
 <PositioningExample position="absolute" zIndex={2} top="0" left="0" />;
 ```
 
+These positioning props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `<GamutProvider>` at the root of your application.
+
+<Canvas of={PositioningStories.PositionExample} />
+
 <TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Positioning.stories.tsx

@@ -0,0 +1,32 @@
+import { Box, Markdown } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Box> = {
+  title: 'Foundations/System/Props/Positioning',
+  component: Box,
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+export const PositionExample: Story = {
+  render: () => (
+    <Box bg="background-selected" height="250px" position="relative">
+      <Box
+        bg="primary"
+        color="background-contrast"
+        left={16}
+        p={16}
+        position="absolute"
+        top={16}
+      >
+        This box has{' '}
+        <Markdown text="`position='absolute'`, `top={16}`, and `left={16}`." />{' '}
+        Inspect the example to see what CSS properties are rendered. You can
+        also change the value of{' '}
+        <Markdown text="`useLogicalProperties` and `direction`" /> in the
+        toolbar to see how the box renders differently.
+      </Box>
+    </Box>
+  ),
+};

package/src/lib/Meta/Installation.mdx

@@ -68,7 +68,7 @@ GamutProvider handles a few critical tasks that need to happen in order for comp
 - **Next** `_app.tsx`
 - **Gatsby** `gatsby-ssr.js` `gatsby-browser.js` and use `wrapRootElement` in each.
 
-4. Add required types for your theme, which will determine what props Gamut components allow.
+5. Add required types for your theme, which will determine what props Gamut components allow.
 
 ```tsx
 // theme.d.ts
@@ -84,7 +84,7 @@ declare module '@emotion/react' {
 
 For more information this declaration please checkout the [official emotion documentation](https://emotion.sh/docs/typescript#define-a-theme)!
 
-5. Start Building!
+6. Start Building!
 
 ```tsx
 import { Background } from '@codecademy/gamut-styles';
@@ -96,3 +96,15 @@ export const App = () => (
   </Background>
 );
 ```
+
+### Content Security Policy (CSP)
+
+If your app uses a strict Content-Security-Policy (e.g. `style-src` without `'unsafe-inline'`), pass a nonce to `GamutProvider` so Emotion and other Gamut-managed style tags are allowed:
+
+```tsx
+<GamutProvider nonce={yourCspNonce}>
+  <App />
+</GamutProvider>
+```
+
+Your nonce should be the same value you use in your CSP header (e.g. `style-src 'self' 'nonce-{value}'`).