@workday/canvas-kit-docs 14.3.9 → 14.3.11

package/dist/es6/lib/ExampleCodeBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAsEA,eAAO,MAAM,gBAAgB,aAAY,GAAG,4CAkH3C,CAAC"}
+{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AA6EA,eAAO,MAAM,gBAAgB,aAAY,GAAG,4CAoH3C,CAAC"}

package/dist/es6/lib/ExampleCodeBlock.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { Card } from '@workday/canvas-kit-react/card';
-import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, cssVar } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { checkCircleIcon, copyIcon } from '@workday/canvas-system-icons-web';
@@ -21,14 +21,20 @@ import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
 import { CanvasProvider, defaultBranding } from '@workday/canvas-kit-react/common';
 const cardStencil = createStencil({
     base: {
+        // Lets the block shrink inside flex/grid doc layouts so content width does not force overflow.
+        minWidth: 0,
+        maxWidth: '100%',
         '[data-part="example-block"]': {
             boxShadow: system.depth[1],
             borderRadius: system.shape.x1,
             position: 'relative',
+            minWidth: 0,
             overflow: 'auto', // This allows for the entire ExampleCodeBlock to scroll on smaller viewports
         },
         '[data-part="example-block-container"]': {
+            minWidth: 0,
             overflow: 'auto',
+            padding: system.space.x1,
         },
         '[data-part="code-block"]': {
             display: 'none',
@@ -37,8 +43,9 @@ const cardStencil = createStencil({
         },
         '[data-part="code-toggle-stackblitz-btn-container"]': {
             position: 'absolute',
-            right: calc.negate(px2rem(1)),
-            bottom: calc.negate(px2rem(1)),
+            // Keep inside the padding box; negative inset was expanding scroll overflow by ~1px.
+            right: system.space.zero,
+            bottom: system.space.zero,
             display: 'flex',
             gap: system.space.x2,
         },
@@ -119,5 +126,7 @@ export const ExampleCodeBlock = ({ code }) => {
                                         lineHeight: cssVar(system.lineHeight.subtext.large),
                                         margin: '0',
                                         padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
+                                        boxSizing: 'border-box',
+                                        maxWidth: '100%',
                                     }, children: code.__RAW__ }) })), _jsx(Tooltip, { title: copied ? 'Copied!' : 'Copy Source Code', children: _jsx(TertiaryButton, { "aria-label": "Copy Code", size: "large", "data-part": "copy-btn", variant: "inverse", iconPosition: "end", icon: copied ? checkCircleIcon : copyIcon, onClick: onCopy }) })] }) }) })] }));
 };