@patternfly/quickstarts 6.0.0-alpha.2 → 6.0.0-alpha.3

package/dist/patternfly-docs/quick-starts/examples/HelpTopic.jsx

@@ -13,10 +13,10 @@ const TinyMockConsole = () => {
   return (
     <Stack hasGutter>
       {helpTopics.map((topic) => (
-          <StackItem key={topic.name}>
-            <a onClick={() => handleSetTopic(topic.name)}>Open Help {topic.title}</a>
-          </StackItem>
-        ))}
+        <StackItem key={topic.name}>
+          <a onClick={() => handleSetTopic(topic.name)}>Open Help {topic.title}</a>
+        </StackItem>
+      ))}
     </Stack>
   );
 };

package/dist/patternfly-docs/quick-starts/examples/example-data/example-help-topics.js

@@ -8,8 +8,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts (external)',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
         isExternal: true,
       },
       {
@@ -35,8 +34,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
       },
       {
         text: 'Redhat Console',
@@ -53,8 +51,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
       },
       {
         text: 'Redhat Console',
@@ -71,8 +68,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
       },
       {
         text: 'Redhat Console',
@@ -89,8 +85,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
       },
       {
         text: 'Redhat Console',
@@ -107,8 +102,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
       },
       {
         text: 'Redhat Console',
@@ -125,8 +119,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
       },
       {
         text: 'Redhat Console',
@@ -143,8 +136,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
       },
       {
         text: 'Redhat Console',
@@ -161,8 +153,7 @@ export const exampleHelpTopics = [
     links: [
       {
         text: 'Creating quick starts',
-        href:
-          'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
+        href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html',
       },
       {
         text: 'Redhat Console',

package/dist/patternfly-global.css

@@ -1,4 +1,4 @@
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   :where(:root, .pf-v6-c-drawer).pf-m-panel-bottom {
     --pf-v6-c-drawer__panel--MinWidth: auto;
     --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
@@ -6,19 +6,19 @@
 }
 
 .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
+  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow-x: hidden;
 }
 :where(.pf-v6-m-dir-rtl, [dir="rtl"]) .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--right);
+  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
 }
 
 :where(.pf-v6-m-dir-rtl, [dir="rtl"]) .pf-v6-c-drawer {
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--left);
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
 }
 
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
@@ -138,7 +138,7 @@
 .pf-v6-c-drawer__panel.pf-m-no-background {
   --pf-v6-c-drawer__panel--BackgroundColor: transparent;
 }
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-c-drawer__panel {
     --pf-v6-c-drawer__panel--FlexBasis:
       max(
@@ -147,7 +147,7 @@
       );
   }
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-c-drawer__panel {
     --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer__panel--xl--FlexBasis);
   }
@@ -288,7 +288,7 @@
   border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-c-drawer {
     min-width: var(--pf-v6-c-drawer__panel--MinWidth);
   }
@@ -383,7 +383,7 @@
     display: block;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25 {
     --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
   }
@@ -408,7 +408,7 @@
     --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
     --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
   }
@@ -433,7 +433,7 @@
     --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
     --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
   }
@@ -458,7 +458,7 @@
     --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
     --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
   }
@@ -483,7 +483,7 @@
     --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
 .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
     flex-shrink: 1;
@@ -554,7 +554,7 @@
     display: none;
   }
 }
-@media (min-width: 992px) {
+@media (min-width: 62rem) {
   .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
 .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
     flex-shrink: 1;
@@ -625,7 +625,7 @@
     display: none;
   }
 }
-@media (min-width: 1200px) {
+@media (min-width: 75rem) {
   .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
 .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
     flex-shrink: 1;
@@ -696,7 +696,7 @@
     display: none;
   }
 }
-@media (min-width: 1450px) {
+@media (min-width: 90.625rem) {
   .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
 .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
     flex-shrink: 1;
@@ -767,55 +767,8 @@
     display: none;
   }
 }
+
 .pf-v6-c-popover {
-  --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
-  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
-  --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
-  --pf-v6-c-popover--m-warning__title-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
-  --pf-v6-c-popover--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
-  --pf-v6-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
-  --pf-v6-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
-  --pf-v6-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-popover__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-popover__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-popover__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-popover__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__arrow--Width: 0.9375rem;
-  --pf-v6-c-popover__arrow--Height: 0.9375rem;
-  --pf-v6-c-popover__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-popover__arrow--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-popover__arrow--m-top--TranslateX: -50%;
-  --pf-v6-c-popover__arrow--m-top--TranslateY: 50%;
-  --pf-v6-c-popover__arrow--m-top--Rotate: 45deg;
-  --pf-v6-c-popover__arrow--m-right--TranslateX: -50%;
-  --pf-v6-c-popover__arrow--m-right--TranslateY: -50%;
-  --pf-v6-c-popover__arrow--m-right--Rotate: 45deg;
-  --pf-v6-c-popover__arrow--m-bottom--TranslateX: -50%;
-  --pf-v6-c-popover__arrow--m-bottom--TranslateY: -50%;
-  --pf-v6-c-popover__arrow--m-bottom--Rotate: 45deg;
-  --pf-v6-c-popover__arrow--m-left--TranslateX: 50%;
-  --pf-v6-c-popover__arrow--m-left--TranslateY: -50%;
-  --pf-v6-c-popover__arrow--m-left--Rotate: 45deg;
-  --pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - (var(--pf-t--global--spacer--control--vertical--compact) * 1.5));
-  --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
-  --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
-  --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
-  --pf-v6-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-popover__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
   position: relative;
   min-width: var(--pf-v6-c-popover--MinWidth);
   max-width: var(--pf-v6-c-popover--MaxWidth);
@@ -954,7 +907,6 @@
 }
 
 .pf-v6-c-popover__title-text {
-  font-family: var(--pf-v6-c-popover__title-text--FontFamily);
   font-size: var(--pf-v6-c-popover__title-text--FontSize);
   font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
   color: var(--pf-v6-c-popover__title-text--Color);
@@ -1031,6 +983,7 @@
   flex-shrink: 0;
   gap: var(--pf-v6-c-modal-box__header--Gap);
   padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
 }
@@ -1061,6 +1014,7 @@
   flex: 0 0 auto;
   font-family: var(--pf-v6-c-modal-box__title--FontFamily);
   font-size: var(--pf-v6-c-modal-box__title--FontSize);
+  font-weight: var(--pf-v6-c-modal-box__title--FontWeight);
   line-height: var(--pf-v6-c-modal-box__title--LineHeight);
 }
 .pf-v6-c-modal-box__title.pf-m-icon {
@@ -1106,7 +1060,7 @@
 .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
   margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
 }
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
     --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
   }