@patternfly/patternfly 5.0.0-alpha.10 → 5.0.0-alpha.11

package/docs/demos/Tabs/examples/Tabs.md

@@ -4465,11 +4465,14 @@ section: components
                 <thead>
                   <tr role="row">
                     <td class="pf-c-table__check" role="cell">
-                      <input
-                        type="checkbox"
-                        name="check-all"
-                        aria-label="Select all rows"
-                      />
+                      <div class="pf-c-check pf-m-standalone">
+                        <input
+                          class="pf-c-check__input"
+                          type="checkbox"
+                          name="check-all"
+                          aria-label="Select all rows"
+                        />
+                      </div>
                     </td>
                     <th role="columnheader" scope="col">Repositories</th>
                     <th role="columnheader" scope="col">Branches</th>
@@ -4483,11 +4486,14 @@ section: components
                 <tbody role="rowgroup">
                   <tr role="row">
                     <td class="pf-c-table__check" role="cell">
-                      <input
-                        type="checkbox"
-                        name="checkrow1"
-                        aria-labelledby="table-tabs-example-table-node1"
-                      />
+                      <div class="pf-c-check pf-m-standalone">
+                        <input
+                          class="pf-c-check__input"
+                          type="checkbox"
+                          name="checkrow1"
+                          aria-labelledby="table-tabs-example-table-node1"
+                        />
+                      </div>
                     </td>
                     <th role="columnheader" data-label="Repository name">
                       <div>
@@ -4555,11 +4561,14 @@ section: components
 
                   <tr class="pf-m-selected" role="row">
                     <td class="pf-c-table__check" role="cell">
-                      <input
-                        type="checkbox"
-                        name="checkrow2"
-                        aria-labelledby="table-tabs-example-table-node2"
-                      />
+                      <div class="pf-c-check pf-m-standalone">
+                        <input
+                          class="pf-c-check__input"
+                          type="checkbox"
+                          name="checkrow2"
+                          aria-labelledby="table-tabs-example-table-node2"
+                        />
+                      </div>
                     </td>
                     <th role="columnheader" data-label="Repository name">
                       <div>
@@ -4627,11 +4636,14 @@ section: components
 
                   <tr role="row">
                     <td class="pf-c-table__check" role="cell">
-                      <input
-                        type="checkbox"
-                        name="checkrow3"
-                        aria-labelledby="table-tabs-example-table-node3"
-                      />
+                      <div class="pf-c-check pf-m-standalone">
+                        <input
+                          class="pf-c-check__input"
+                          type="checkbox"
+                          name="checkrow3"
+                          aria-labelledby="table-tabs-example-table-node3"
+                        />
+                      </div>
                     </td>
                     <th role="columnheader" data-label="Repository name">
                       <div>
@@ -4699,11 +4711,14 @@ section: components
 
                   <tr role="row">
                     <td class="pf-c-table__check" role="cell">
-                      <input
-                        type="checkbox"
-                        name="checkrow4"
-                        aria-labelledby="table-tabs-example-table-node4"
-                      />
+                      <div class="pf-c-check pf-m-standalone">
+                        <input
+                          class="pf-c-check__input"
+                          type="checkbox"
+                          name="checkrow4"
+                          aria-labelledby="table-tabs-example-table-node4"
+                        />
+                      </div>
                     </td>
                     <th role="columnheader" data-label="Repository name">
                       <div>
@@ -4771,11 +4786,14 @@ section: components
 
                   <tr role="row">
                     <td class="pf-c-table__check" role="cell">
-                      <input
-                        type="checkbox"
-                        name="checkrow5"
-                        aria-labelledby="table-tabs-example-table-node5"
-                      />
+                      <div class="pf-c-check pf-m-standalone">
+                        <input
+                          class="pf-c-check__input"
+                          type="checkbox"
+                          name="checkrow5"
+                          aria-labelledby="table-tabs-example-table-node5"
+                        />
+                      </div>
                     </td>
                     <td role="cell" data-label="Repository name">
                       <div>

package/docs/demos/Toolbar/examples/Toolbar.md

@@ -1387,11 +1387,14 @@ section: components
           <tbody role="rowgroup">
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow1"
-                  aria-labelledby="-table-table-node1"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow1"
+                    aria-labelledby="-table-table-node1"
+                  />
+                </div>
               </td>
               <th role="columnheader" data-label="Repository name">
                 <div>
@@ -1472,11 +1475,14 @@ section: components
 
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow2"
-                  aria-labelledby="-table-table-node2"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow2"
+                    aria-labelledby="-table-table-node2"
+                  />
+                </div>
               </td>
               <th role="columnheader" data-label="Repository name">
                 <div>
@@ -1557,11 +1563,14 @@ section: components
 
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow3"
-                  aria-labelledby="-table-table-node3"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow3"
+                    aria-labelledby="-table-table-node3"
+                  />
+                </div>
               </td>
               <th role="columnheader" data-label="Repository name">
                 <div>
@@ -1642,11 +1651,14 @@ section: components
 
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow4"
-                  aria-labelledby="-table-table-node4"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow4"
+                    aria-labelledby="-table-table-node4"
+                  />
+                </div>
               </td>
               <th role="columnheader" data-label="Repository name">
                 <div>
@@ -1727,11 +1739,14 @@ section: components
 
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow5"
-                  aria-labelledby="-table-table-node5"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow5"
+                    aria-labelledby="-table-table-node5"
+                  />
+                </div>
               </td>
               <td role="cell" data-label="Repository name">
                 <div>
@@ -4480,11 +4495,14 @@ section: components
           <tbody role="rowgroup">
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow1"
-                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow1"
+                    aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node1"
+                  />
+                </div>
               </td>
               <th role="columnheader" data-label="Repository name">
                 <div>
@@ -4567,11 +4585,14 @@ section: components
 
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow2"
-                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow2"
+                    aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node2"
+                  />
+                </div>
               </td>
               <th role="columnheader" data-label="Repository name">
                 <div>
@@ -4654,11 +4675,14 @@ section: components
 
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow3"
-                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow3"
+                    aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node3"
+                  />
+                </div>
               </td>
               <th role="columnheader" data-label="Repository name">
                 <div>
@@ -4741,11 +4765,14 @@ section: components
 
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow4"
-                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow4"
+                    aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node4"
+                  />
+                </div>
               </td>
               <th role="columnheader" data-label="Repository name">
                 <div>
@@ -4828,11 +4855,14 @@ section: components
 
             <tr role="row">
               <td class="pf-c-table__check" role="cell">
-                <input
-                  type="checkbox"
-                  name="checkrow5"
-                  aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
-                />
+                <div class="pf-c-check pf-m-standalone">
+                  <input
+                    class="pf-c-check__input"
+                    type="checkbox"
+                    name="checkrow5"
+                    aria-labelledby="toolbar-and-table-static-search-overflow-menu-collapsed-table-node5"
+                  />
+                </div>
               </td>
               <td role="cell" data-label="Repository name">
                 <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.10",
+  "version": "5.0.0-alpha.11",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-reset.css

@@ -8618,7 +8618,7 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-chip-group--PaddingBottom: 0;
   --pf-c-chip-group--PaddingLeft: 0;
   --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
-  --pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group--ColumnGap: 0;
   --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
   --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
@@ -8633,7 +8633,6 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-chip-group__label--MaxWidth: 18ch;
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
   max-width: 100%;
   padding-top: var(--pf-c-chip-group--PaddingTop);
   padding-right: var(--pf-c-chip-group--PaddingRight);
@@ -8692,7 +8691,6 @@ label.pf-c-check, .pf-c-check__label,
   align-self: flex-start;
   margin-top: var(--pf-c-chip-group__close--MarginTop);
   margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
-  margin-left: var(--pf-c-chip-group__close--MarginLeft);
 }
 
 .pf-c-clipboard-copy {
@@ -23249,7 +23247,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 
 :where(.pf-theme-dark) .pf-c-popover {
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
+  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
@@ -31237,8 +31235,10 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-tooltip__arrow--Width: 0.5rem;
-  --pf-c-tooltip__arrow--Height: 0.5rem;
+  --pf-c-tooltip__arrow--Width: 0.9375rem;
+  --pf-c-tooltip__arrow--Height: 0.9375rem;
+  --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
+  --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -31308,7 +31308,8 @@ svg.pf-c-spinner.pf-m-xl {
   width: var(--pf-c-tooltip__arrow--Width);
   height: var(--pf-c-tooltip__arrow--Height);
   pointer-events: none;
-  background-color: var(--pf-c-tooltip__content--BackgroundColor);
+  background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
+  box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
 }
 
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-login__header,
@@ -31349,12 +31350,7 @@ svg.pf-c-spinner.pf-m-xl {
 
 :where(.pf-theme-dark) .pf-c-tooltip {
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
-}
-:where(.pf-theme-dark) .pf-c-tooltip__arrow {
-  --pf-c-tooltip__arrow--Width: 0.9375rem;
-  --pf-c-tooltip__arrow--Height: 0.9375rem;
-  box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
+  --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }
 
 .pf-c-truncate {

package/patternfly.css

@@ -8741,7 +8741,7 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-chip-group--PaddingBottom: 0;
   --pf-c-chip-group--PaddingLeft: 0;
   --pf-c-chip-group--RowGap: var(--pf-global--spacer--sm);
-  --pf-c-chip-group--ColumnGap: var(--pf-global--spacer--sm);
+  --pf-c-chip-group--ColumnGap: 0;
   --pf-c-chip-group__main--RowGap: var(--pf-global--spacer--xs);
   --pf-c-chip-group__main--ColumnGap: var(--pf-global--spacer--sm);
   --pf-c-chip-group__list--RowGap: var(--pf-global--spacer--xs);
@@ -8756,7 +8756,6 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-chip-group__label--MaxWidth: 18ch;
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-chip-group__close--MarginLeft: calc(var(--pf-global--spacer--sm) * -1);
   max-width: 100%;
   padding-top: var(--pf-c-chip-group--PaddingTop);
   padding-right: var(--pf-c-chip-group--PaddingRight);
@@ -8815,7 +8814,6 @@ label.pf-c-check, .pf-c-check__label,
   align-self: flex-start;
   margin-top: var(--pf-c-chip-group__close--MarginTop);
   margin-bottom: var(--pf-c-chip-group__close--MarginBottom);
-  margin-left: var(--pf-c-chip-group__close--MarginLeft);
 }
 
 .pf-c-clipboard-copy {
@@ -23372,7 +23370,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 
 :where(.pf-theme-dark) .pf-c-popover {
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
+  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
@@ -31360,8 +31358,10 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tooltip__content--Color: var(--pf-global--Color--light-100);
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-tooltip__arrow--Width: 0.5rem;
-  --pf-c-tooltip__arrow--Height: 0.5rem;
+  --pf-c-tooltip__arrow--Width: 0.9375rem;
+  --pf-c-tooltip__arrow--Height: 0.9375rem;
+  --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
+  --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -31431,7 +31431,8 @@ svg.pf-c-spinner.pf-m-xl {
   width: var(--pf-c-tooltip__arrow--Width);
   height: var(--pf-c-tooltip__arrow--Height);
   pointer-events: none;
-  background-color: var(--pf-c-tooltip__content--BackgroundColor);
+  background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
+  box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
 }
 
 :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-about-modal-box, :where(.pf-theme-dark) .pf-c-banner, :where(.pf-theme-dark) .pf-c-log-viewer.pf-m-dark .pf-c-log-viewer__main, :where(.pf-theme-dark) .pf-c-login__header,
@@ -31472,12 +31473,7 @@ svg.pf-c-spinner.pf-m-xl {
 
 :where(.pf-theme-dark) .pf-c-tooltip {
   --pf-c-tooltip__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
-}
-:where(.pf-theme-dark) .pf-c-tooltip__arrow {
-  --pf-c-tooltip__arrow--Width: 0.9375rem;
-  --pf-c-tooltip__arrow--Height: 0.9375rem;
-  box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
+  --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }
 
 .pf-c-truncate {