@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

package/README.md

@@ -1,5 +1,9 @@
 # PatternFly
 
+## Contributing
+
+We welcome contributions to PatternFly! Please read our [Contributing Guide](https://pf-core-staging.patternfly.org/contribution) to learn how to get started, submit issues, and contribute code to the project.
+
 ## Install
 
 - This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json).
@@ -7,20 +11,23 @@
 
 When you install PatternFly, the package includes:
 
-- a single file for the entire compiled library: `node_modules/@patternfly/patternfly/patternfly.css`
-- individual files with each component compiled separately: `node_modules/@patternfly/patternfly/<ComponentName>/styles.css`
-- a single file for the entire library's source (SASS): `node_modules/@patternfly/patternfly/patternfly.scss`
-- individual files for each component's source (SASS): `node_modules/@patternfly/patternfly/<ComponentName>/styles.scss`
+- @patternfly/patternfly/patternfly-base.css - base styles. Global styles, reset/normalize styles, global variables. These styles are required for patternfly styles to work properly.
+- @patternfly/patternfly/patternfly.css - this is patternfly-base.css, as well as all component and layout styles. Does not include utility styles.
+- @patternfly/patternfly/patternfly-addons.css - all utility class styles. These do not come with patternfly.css, and must be imported manually.
+- @patternfly/patternfly/utilities/[UtilityName]/[utility-name].css - individual utility class styles if you prefer only use one or two, and don't want to import all of them.
+- @patternfly/patternfly/patternfly-charts.css - required if using dark theme with [PatternFly charts](https://www.patternfly.org/charts/about-charts).
 
 Any of the files above are meant for use in consuming the library. The recommended consumption approach will vary from project to project.
 
 ## Development
 
-**PatternFly Development requires Node v18.0.0 or greater**
+**PatternFly Development requires Node v20.18.3 or greater**
 
 To setup the PatternFly development environment:
 
 - clone the project
+- ensure you have Node.js v20.18.3 or greater installed
+- enable corepack: `corepack enable`
 - run `yarn install` from the project root
 - run `yarn start`
 - open your browser to `http://localhost:8001`
@@ -63,19 +70,19 @@ When making visual changes to a full page example, new example preview screensho
 
 ## Guidelines for CSS development
 
-- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://core-staging.patternfly.org, and information detailing the change.
+- For issues created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Pull Request is merged. The issue should include the Core PR #, the Core Release, a link to the component in https://pf-core-staging.patternfly.org, and information detailing the change.
 - If global variables are modified in Core, a React issue should be opened to address this.
 - CSS developers should ensure that animation is well documented and communicated to the respective React developer.
 - Once the component/enhancement is complete it should receive sign off from a visual designer who can then update the master sketch file with any changes.
 
-### Handlebars guidelines 
-[For information on how to contribute, refer to our guidelines.](https://core-staging.patternfly.org/contribution)
+### Contribution guide 
+For information on how to contribute, refer to our [contribution guide](https://pf-core-staging.patternfly.org/contribution).
 
-### CSS/Sass guidelines
-[For more information on using CSS and Sass, refer to our guidelines.](https://core-staging.patternfly.org/guidelines)
+### Development guidelines
+For more information on using CSS, Sass, and handlebars, refer to our [development guidelines](https://pf-core-staging.patternfly.org/guidelines).
 
 ### Custom icon guidelines
-[For more information on custom icons, refer to our guidelines.](https://core-staging.patternfly.org/adding-custom-icons)
+For more information on custom icons, refer to our [custom icon guidelines](https://pf-core-staging.patternfly.org/custom-icons).
 
 ## Beta components
 
@@ -111,13 +118,14 @@ If you have any suggestions about ways that we can improve how we use this tool,
 
 ## FAQ
 
-#### CSS Variables
-[How do I use CSS variables to customize the library?](https://core-staging.patternfly.org/guidelines#variables)
+### CSS Variables
+[How do I use CSS variables to customize the library?](https://pf-core-staging.patternfly.org/guidelines#variables)
 
-#### Browser support
+### Browser support
 PatternFly is supported on the latest two major versions of the following browsers:
 
 - Chrome
 - Firefox
 - Safari
 - Edge
+

package/assets/images/icon-help.hbs

@@ -0,0 +1,3 @@
+<svg class="pf-v6-svg" viewBox="0 0 1024 1024" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
+  <path d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"></path>
+</svg> 

package/assets/images/icon-outlined-star.hbs

@@ -0,0 +1,3 @@
+<svg class="pf-v6-svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
+  <path d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path>
+</svg>

package/assets/images/icon-star.hbs

@@ -0,0 +1,3 @@
+<svg class="pf-v6-svg" viewBox="0 0 576 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em">
+  <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
+</svg>

package/base/normalize.scss

@@ -122,6 +122,10 @@
     cursor: pointer;
   }
 
+  :where(:root) {
+    color-scheme: light;
+  }
+
   :where(.pf-v6-theme-dark) {
     color-scheme: dark;
   }

package/base/patternfly-common.css

@@ -44,15 +44,50 @@
 }
 
 .pf-v6-m-no-motion {
-  --pf-t--global--delay--400: 0ms !important;
-  --pf-t--global--delay--300: 0ms !important;
-  --pf-t--global--delay--200: 0ms !important;
-  --pf-t--global--delay--100: 0ms !important;
-  --pf-t--global--duration--600: 0ms !important;
-  --pf-t--global--duration--500: 0ms !important;
-  --pf-t--global--duration--400: 0ms !important;
-  --pf-t--global--duration--300: 0ms !important;
-  --pf-t--global--duration--200: 0ms !important;
-  --pf-t--global--duration--100: 0ms !important;
-  --pf-t--global--duration--50: 0ms !important;
+  --pf-t--global--delay--400: 1ms !important;
+  --pf-t--global--delay--300: 1ms !important;
+  --pf-t--global--delay--200: 1ms !important;
+  --pf-t--global--delay--100: 1ms !important;
+  --pf-t--global--duration--600: 1ms !important;
+  --pf-t--global--duration--500: 1ms !important;
+  --pf-t--global--duration--400: 1ms !important;
+  --pf-t--global--duration--300: 1ms !important;
+  --pf-t--global--duration--200: 1ms !important;
+  --pf-t--global--duration--100: 1ms !important;
+  --pf-t--global--duration--50: 1ms !important;
+}
+
+:root {
+  --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+}
+
+@property --pf-v6-global--danger-jiggle--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@keyframes pf-v6-global-danger-jiggle-motion {
+  33% {
+    --pf-v6-global--danger-jiggle--TranslateX: -2px;
+  }
+  66% {
+    --pf-v6-global--danger-jiggle--TranslateX: 3px;
+  }
+}
+@keyframes pf-v6-global-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes pf-v6-global-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }

package/base/patternfly-common.scss

@@ -50,20 +50,65 @@
   @include pf-v6-mirror-inline-on-rtl;
 }
 
-// Turn off all motion (for testing purposes) by setting all motion tokens to 0
+// Turn off perceptible motion (for testing purposes) by setting all motion tokens to 1ms
 .#{$pf-prefix}m-no-motion {
   // stylelint-disable declaration-no-important
-  --pf-t--global--delay--400: 0ms !important;
-  --pf-t--global--delay--300: 0ms !important;
-  --pf-t--global--delay--200: 0ms !important;
-  --pf-t--global--delay--100: 0ms !important;
-  --pf-t--global--duration--600: 0ms !important;
-  --pf-t--global--duration--500: 0ms !important;
-  --pf-t--global--duration--400: 0ms !important;
-  --pf-t--global--duration--300: 0ms !important;
-  --pf-t--global--duration--200: 0ms !important;
-  --pf-t--global--duration--100: 0ms !important;
-  --pf-t--global--duration--50: 0ms !important;
+  --pf-t--global--delay--400: 1ms !important;
+  --pf-t--global--delay--300: 1ms !important;
+  --pf-t--global--delay--200: 1ms !important;
+  --pf-t--global--delay--100: 1ms !important;
+  --pf-t--global--duration--600: 1ms !important;
+  --pf-t--global--duration--500: 1ms !important;
+  --pf-t--global--duration--400: 1ms !important;
+  --pf-t--global--duration--300: 1ms !important;
+  --pf-t--global--duration--200: 1ms !important;
+  --pf-t--global--duration--100: 1ms !important;
+  --pf-t--global--duration--50: 1ms !important;
 
   // stylelink-enable declaration-no-important
-}
+}
+
+:root {
+  --#{$pf-global}--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --#{$pf-global}--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
+}
+
+// Register the property type for the custom property to be animatable
+@property  --#{$pf-global}--danger-jiggle--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+// Animate danger jiggle
+@keyframes #{$pf-global}-danger-jiggle-motion {
+  33% {
+    --#{$pf-global}--danger-jiggle--TranslateX: -2px;
+  }
+  
+  66% {
+    --#{$pf-global}--danger-jiggle--TranslateX: 3px;
+  }
+}
+
+// Animate fade-in
+@keyframes #{$pf-global}-fade-in {
+  from {
+    opacity: 0;
+  }
+  
+  to {
+    opacity: 1;
+  }
+}
+
+// Animate fade-out
+@keyframes #{$pf-global}-fade-out {
+  from {
+    opacity: 1;
+  }
+  
+  to {
+    opacity: 0;
+  }
+}