From 3aa322018f924b2fc145361477fa8f815c065d20 Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 16 Dec 2025 10:06:49 -0600 Subject: [PATCH 1/3] feat: allow full-page example utils to change position --- .../components/example/example.css | 33 +++++++++++- .../components/example/example.js | 50 ++++++++++++++++++- 2 files changed, 81 insertions(+), 2 deletions(-) diff --git a/packages/documentation-framework/components/example/example.css b/packages/documentation-framework/components/example/example.css index 0e646106f2..38f0684cb6 100644 --- a/packages/documentation-framework/components/example/example.css +++ b/packages/documentation-framework/components/example/example.css @@ -72,12 +72,39 @@ .ws-full-page-utils { position: fixed; - inset-inline-start: 0; inset-block-end: 0; padding: var(--pf-t--global--spacer--lg); z-index: var(--pf-t--global--z-index--2xl); } +.ws-full-page-utils.pf-m-top-right { + top: 0; + right: 0; + bottom: auto; + left: auto; +} + +.ws-full-page-utils.pf-m-bottom-right { + top: auto; + right: 0; + bottom: 0; + left: auto; +} + +.ws-full-page-utils.pf-m-bottom-left { + top: auto; + right: auto; + bottom: 0; + left: 0; +} + +.ws-full-page-utils.pf-m-top-left { + top: 0; + right: auto; + bottom: auto; + left: 0; +} + .ws-full-page-utils::before { position: absolute; inset: 0; @@ -86,3 +113,7 @@ opacity: 0.8; box-shadow: var(--pf-t--global--box-shadow--sm); } + +.ws-full-page-utils .pf-v6-c-button.pf-m-no-padding.pf-m-clicked { + --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--regular); +} diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index faea37a6d4..98e21436df 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -33,6 +33,15 @@ import { convertToReactComponent } from '@patternfly/ast-helpers'; import missingThumbnail from './missing-thumbnail.jpg'; import { RtlContext } from '../../layouts'; import { ThemeSelector } from '../themeSelector/themeSelector'; +// import RhUiArrowCircleDownRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-right-icon'; +// import RhUiArrowCircleDownLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-left-icon'; +// import RhUiArrowCircleTopRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-top-right-icon'; +// import RhUiArrowCircleTopLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-top-left-icon'; + +const RhUiArrowCircleUpRightIcon = RhUiArrowCircleUpRightIcon; +const RhUiArrowCircleDownRightIcon = RhUiArrowCircleDownRightIcon; +const RhUiArrowCircleDownLeftIcon = RhUiArrowCircleDownLeftIcon; +const RhUiArrowCircleUpLeftIcon = RhUiArrowCircleUpLeftIcon; const errorComponent = (err) =>
{err.toString()}
; @@ -137,6 +146,7 @@ export const Example = ({ } const [editorCode, setEditorCode] = React.useState(code); + const [fullPageUtilsPosition, setFullPageUtilsPosition] = React.useState('pf-m-bottom-right'); const loc = useLocation(); const isRTL = useContext(RtlContext); const scope = { @@ -194,8 +204,46 @@ export const Example = ({ + +