feat: allow full-page example utils to change position

Author: mcoker

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);
+}

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 = <svg class="pf-v6-svg" viewBox="0 0 32 32" fill="currentColor" aria-labelledby="icon-title-1847" role="img" width="1em" height="1em"><title id="icon-title-1847">RhUiArrowCircleUpRightIcon</title><path d="M22 11.5V20a1 1 0 1 1-2 0v-6.586l-8.243 8.243a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L18.586 12H12a1 1 0 1 1 0-2h8.5c.827 0 1.5.673 1.5 1.5Zm9 4.5c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Z"></path></svg>;
+const RhUiArrowCircleDownRightIcon = <svg class="pf-v6-svg" viewBox="0 0 32 32" fill="currentColor" aria-labelledby="icon-title-1837" role="img" width="1em" height="1em"><title id="icon-title-1837">RhUiArrowCircleDownRightIcon</title><path d="M22 12v8.5c0 .827-.673 1.5-1.5 1.5H12a1 1 0 1 1 0-2h6.586l-8.243-8.243a.999.999 0 1 1 1.414-1.414L20 18.586V12a1 1 0 1 1 2 0Zm9 4c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Z"></path></svg>;
+const RhUiArrowCircleDownLeftIcon = <svg class="pf-v6-svg" viewBox="0 0 32 32" fill="currentColor" aria-labelledby="icon-title-1835" role="img" width="1em" height="1em"><title id="icon-title-1835">RhUiArrowCircleDownLeftIcon</title><path d="M21.657 10.343a.999.999 0 0 1 0 1.414L13.414 20H20a1 1 0 1 1 0 2h-8.5c-.827 0-1.5-.673-1.5-1.5V12a1 1 0 1 1 2 0v6.586l8.243-8.243a.999.999 0 0 1 1.414 0ZM31 16c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Z"></path></svg>;
+const RhUiArrowCircleUpLeftIcon = <svg class="pf-v6-svg" viewBox="0 0 32 32" fill="currentColor" aria-labelledby="icon-title-1845" role="img" width="1em" height="1em"><title id="icon-title-1845">RhUiArrowCircleUpLeftIcon</title><path d="M21.657 20.243a.999.999 0 1 1-1.414 1.414L12 13.414V20a1 1 0 1 1-2 0v-8.5c0-.827.673-1.5 1.5-1.5H20a1 1 0 1 1 0 2h-6.586l8.243 8.243ZM31 16c0 8.271-6.729 15-15 15S1 24.271 1 16 7.729 1 16 1s15 6.729 15 15Zm-2 0c0-7.168-5.832-13-13-13S3 8.832 3 16s5.832 13 13 13 13-5.832 13-13Z"></path></svg>;
 
 const errorComponent = (err) => <pre>{err.toString()}</pre>;
 
@@ -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 = ({
           <Flex
             direction={{ default: 'column' }}
             gap={{ default: 'gapMd' }}
-            className="ws-full-page-utils pf-v6-m-dir-ltr"
+            className={css('ws-full-page-utils', 'pf-v6-m-dir-ltr', fullPageUtilsPosition)}
           >
+            <Flex justifyContent={{ default: 'justifyContentCenter' }} gap={{ default: 'gapXs' }}>
+            <Button
+                variant="plain"
+                size="sm"
+                hasNoPadding
+                isClicked={fullPageUtilsPosition === 'pf-m-top-left'}
+                onClick={() => setFullPageUtilsPosition('pf-m-top-left')}
+                aria-label="Position utilities top left"
+                icon={RhUiArrowCircleUpLeftIcon}
+              />
+              <Button
+                variant="plain"
+                size="sm"
+                hasNoPadding
+                isClicked={fullPageUtilsPosition === 'pf-m-bottom-left'}
+                onClick={() => setFullPageUtilsPosition('pf-m-bottom-left')}
+                aria-label="Position utilities bottom left"
+                icon={RhUiArrowCircleDownLeftIcon}
+              />
+              <Button
+                variant="plain"
+                size="sm"
+                hasNoPadding
+                isClicked={fullPageUtilsPosition === 'pf-m-bottom-right'}
+                onClick={() => setFullPageUtilsPosition('pf-m-bottom-right')}
+                aria-label="Position utilities bottom right"
+                icon={RhUiArrowCircleDownRightIcon}
+              />
+              <Button
+                variant="plain"
+                size="sm"
+                hasNoPadding
+                isClicked={fullPageUtilsPosition === 'pf-m-top-right'}
+                onClick={() => setFullPageUtilsPosition('pf-m-top-right')}
+                aria-label="Position utilities top right"
+                icon={RhUiArrowCircleUpRightIcon}
+              />
+            </Flex>
             {hasThemeSwitcher && <ThemeSelector id="ws-example-theme-select" />}
             {hasRTLSwitcher && (
               <Switch