@patternfly/patternfly 5.0.0-alpha.40 → 5.0.0-alpha.41

package/docs/demos/Dashboard/examples/Dashboard.md

@@ -2128,15 +2128,20 @@ cssPrefix: pf-d-dashboard
                       <dt class="pf-c-description-list__term">
                         <div class="pf-l-flex pf-m-nowrap">
                           <div class="pf-l-flex__item pf-m-spacer-sm">
-                            <span
+                            <svg
                               class="pf-c-spinner pf-m-md"
                               role="progressbar"
+                              viewBox="0 0 100 100"
                               aria-label="Loading"
                             >
-                              <span class="pf-c-spinner__clipper"></span>
-                              <span class="pf-c-spinner__lead-ball"></span>
-                              <span class="pf-c-spinner__tail-ball"></span>
-                            </span>
+                              <circle
+                                class="pf-c-spinner__path"
+                                cx="50"
+                                cy="50"
+                                r="45"
+                                fill="none"
+                              />
+                            </svg>
                           </div>
                           <div class="pf-l-flex__item">Pulling image</div>
                         </div>

package/docs/demos/Table/examples/Table.md

@@ -13350,15 +13350,20 @@ wrapperTag: div
                 <div class="pf-c-empty-state pf-m-sm">
                   <div class="pf-c-empty-state__content">
                     <div class="pf-c-empty-state__icon">
-                      <span
+                      <svg
                         class="pf-c-spinner"
                         role="progressbar"
+                        viewBox="0 0 100 100"
                         aria-label="Loading..."
                       >
-                        <span class="pf-c-spinner__clipper"></span>
-                        <span class="pf-c-spinner__lead-ball"></span>
-                        <span class="pf-c-spinner__tail-ball"></span>
-                      </span>
+                        <circle
+                          class="pf-c-spinner__path"
+                          cx="50"
+                          cy="50"
+                          r="45"
+                          fill="none"
+                        />
+                      </svg>
                     </div>
                     <h2 class="pf-c-title pf-m-lg">Loading</h2>
                   </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.40",
+  "version": "5.0.0-alpha.41",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -42,11 +42,11 @@
     "@commitlint/config-conventional": "^17.4.2",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^19.0.7",
-    "@patternfly/documentation-framework": "1.10.4",
+    "@patternfly/documentation-framework": "2.0.0-alpha.24",
     "@patternfly/patternfly-a11y": "4.3.1",
-    "@patternfly/react-code-editor": "4.82.115",
-    "@patternfly/react-core": "4.276.8",
-    "@patternfly/react-table": "4.113.0",
+    "@patternfly/react-code-editor": "5.0.0-alpha.54",
+    "@patternfly/react-core": "5.0.0-alpha.53",
+    "@patternfly/react-table": "5.0.0-alpha.54",
     "@starptech/prettyhtml": "^0.10.0",
     "cheerio": "^1.0.0-rc.12",
     "commander": "^10.0.0",
@@ -94,7 +94,7 @@
   },
   "resolutions": {
     "@babel/preset-env": "7.18.2",
-    "monaco-editor": "0.21.3"
+    "monaco-editor": "0.34.1"
   },
   "repository": {
     "type": "git",

package/patternfly-no-globals.css

@@ -24874,135 +24874,6 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
 }
 
-span.pf-c-spinner {
-  --pf-c-spinner--AnimationDuration: 1.5s;
-  --pf-c-spinner--AnimationTimingFunction: cubic-bezier(.77, .005, .315, 1);
-  --pf-c-spinner--stroke-width-multiplier: .1;
-  --pf-c-spinner--stroke-width: calc(var(--pf-c-spinner--diameter) * var(--pf-c-spinner--stroke-width-multiplier));
-  --pf-c-spinner__clipper--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--BoxShadowColor: var(--pf-c-spinner--Color);
-  --pf-c-spinner__clipper--after--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--BoxShadowSpreadRadius: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__lead-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-  --pf-c-spinner__ball--after--Width: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__ball--after--Height: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__tail-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-  position: relative;
-  display: inline-block;
-  text-align: left;
-  animation: pf-animation-spinner-parent calc(var(--pf-c-spinner--AnimationDuration) * 2) var(--pf-c-spinner--AnimationTimingFunction) infinite;
-}
-
-@keyframes pf-animation-spinner-parent {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(540deg);
-  }
-  100% {
-    transform: rotate(1080deg);
-  }
-}
-.pf-c-spinner__clipper {
-  position: absolute;
-  width: var(--pf-c-spinner__clipper--Width);
-  height: var(--pf-c-spinner__clipper--Height);
-  clip-path: inset(0 0 50% 50%);
-  animation: pf-animation-spinner__clipper var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-
-@keyframes pf-animation-spinner__clipper {
-  0% {
-    transform: rotate(90deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.pf-c-spinner__clipper::after {
-  position: absolute;
-  width: var(--pf-c-spinner__clipper--after--Width);
-  height: var(--pf-c-spinner__clipper--after--Height);
-  clip-path: inset(0 0 0 50%);
-  content: "";
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 var(--pf-c-spinner__clipper--after--BoxShadowSpreadRadius) var(--pf-c-spinner__clipper--after--BoxShadowColor);
-  animation: pf-animation-spinner__clipper-after var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-
-@keyframes pf-animation-spinner__clipper-after {
-  0% {
-    transform: rotate(-180deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-.pf-c-spinner__lead-ball {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  animation: pf-animation-spinner__lead-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-.pf-c-spinner__lead-ball::after {
-  position: absolute;
-  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
-  right: 0;
-  width: var(--pf-c-spinner__ball--after--Width);
-  height: var(--pf-c-spinner__ball--after--Height);
-  content: "";
-  background-color: var(--pf-c-spinner__lead-ball--after--BackgroundColor);
-  border-radius: 50%;
-  transform-origin: top right;
-}
-
-@keyframes pf-animation-spinner__lead-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-  33% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.pf-c-spinner__tail-ball {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  animation: pf-animation-spinner__tail-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-.pf-c-spinner__tail-ball::after {
-  position: absolute;
-  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
-  right: 0;
-  width: var(--pf-c-spinner__ball--after--Width);
-  height: var(--pf-c-spinner__ball--after--Height);
-  content: "";
-  background-color: var(--pf-c-spinner__tail-ball--after--BackgroundColor);
-  border-radius: 50%;
-  transform-origin: top right;
-}
-
-@keyframes pf-animation-spinner__tail-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-  66% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 svg.pf-c-spinner {
   --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
   --pf-c-spinner--AnimationDuration: 1.4s;

package/patternfly.css

@@ -24991,135 +24991,6 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
 }
 
-span.pf-c-spinner {
-  --pf-c-spinner--AnimationDuration: 1.5s;
-  --pf-c-spinner--AnimationTimingFunction: cubic-bezier(.77, .005, .315, 1);
-  --pf-c-spinner--stroke-width-multiplier: .1;
-  --pf-c-spinner--stroke-width: calc(var(--pf-c-spinner--diameter) * var(--pf-c-spinner--stroke-width-multiplier));
-  --pf-c-spinner__clipper--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--BoxShadowColor: var(--pf-c-spinner--Color);
-  --pf-c-spinner__clipper--after--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--BoxShadowSpreadRadius: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__lead-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-  --pf-c-spinner__ball--after--Width: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__ball--after--Height: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__tail-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-  position: relative;
-  display: inline-block;
-  text-align: left;
-  animation: pf-animation-spinner-parent calc(var(--pf-c-spinner--AnimationDuration) * 2) var(--pf-c-spinner--AnimationTimingFunction) infinite;
-}
-
-@keyframes pf-animation-spinner-parent {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(540deg);
-  }
-  100% {
-    transform: rotate(1080deg);
-  }
-}
-.pf-c-spinner__clipper {
-  position: absolute;
-  width: var(--pf-c-spinner__clipper--Width);
-  height: var(--pf-c-spinner__clipper--Height);
-  clip-path: inset(0 0 50% 50%);
-  animation: pf-animation-spinner__clipper var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-
-@keyframes pf-animation-spinner__clipper {
-  0% {
-    transform: rotate(90deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.pf-c-spinner__clipper::after {
-  position: absolute;
-  width: var(--pf-c-spinner__clipper--after--Width);
-  height: var(--pf-c-spinner__clipper--after--Height);
-  clip-path: inset(0 0 0 50%);
-  content: "";
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 var(--pf-c-spinner__clipper--after--BoxShadowSpreadRadius) var(--pf-c-spinner__clipper--after--BoxShadowColor);
-  animation: pf-animation-spinner__clipper-after var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-
-@keyframes pf-animation-spinner__clipper-after {
-  0% {
-    transform: rotate(-180deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-.pf-c-spinner__lead-ball {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  animation: pf-animation-spinner__lead-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-.pf-c-spinner__lead-ball::after {
-  position: absolute;
-  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
-  right: 0;
-  width: var(--pf-c-spinner__ball--after--Width);
-  height: var(--pf-c-spinner__ball--after--Height);
-  content: "";
-  background-color: var(--pf-c-spinner__lead-ball--after--BackgroundColor);
-  border-radius: 50%;
-  transform-origin: top right;
-}
-
-@keyframes pf-animation-spinner__lead-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-  33% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.pf-c-spinner__tail-ball {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  animation: pf-animation-spinner__tail-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-.pf-c-spinner__tail-ball::after {
-  position: absolute;
-  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
-  right: 0;
-  width: var(--pf-c-spinner__ball--after--Width);
-  height: var(--pf-c-spinner__ball--after--Height);
-  content: "";
-  background-color: var(--pf-c-spinner__tail-ball--after--BackgroundColor);
-  border-radius: 50%;
-  transform-origin: top right;
-}
-
-@keyframes pf-animation-spinner__tail-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-  66% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 svg.pf-c-spinner {
   --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
   --pf-c-spinner--AnimationDuration: 1.4s;