@patternfly/patternfly 5.0.0-alpha.61 → 5.0.0-alpha.63

package/components/FormControl/form-control.css

@@ -21,7 +21,7 @@
   --pf-v5-c-form-control--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-form-control--BorderRadius: 0;
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-form-control--Width: auto;
+  --pf-v5-c-form-control--Width: 100%;
   --pf-v5-c-form-control--Height: calc(var(--pf-v5-c-form-control--FontSize) * var(--pf-v5-c-form-control--LineHeight) + var(--pf-v5-c-form-control--BorderWidth) * 2 + var(--pf-v5-c-form-control--PaddingTop) + var(--pf-v5-c-form-control--PaddingBottom));
   --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-form-control--PaddingTop: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));

package/components/FormControl/form-control.scss

@@ -12,7 +12,7 @@
   --#{$form-control}--BorderLeftColor: var(--#{$pf-global}--BorderColor--300);
   --#{$form-control}--BorderRadius: 0;
   --#{$form-control}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
-  --#{$form-control}--Width: auto;
+  --#{$form-control}--Width: 100%;
   --#{$form-control}--Height: calc(var(--#{$form-control}--FontSize) * var(--#{$form-control}--LineHeight) + var(--#{$form-control}--BorderWidth) * 2 + var(--#{$form-control}--PaddingTop) + var(--#{$form-control}--PaddingBottom)); // Needed for various browsers that compute height of form elements differently
 
   // padding

package/docs/components/Banner/examples/Banner.md

@@ -77,7 +77,7 @@ Banners can be styled with one of 5 different colors. A basic banner should only
 
 ### Status
 
-When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-screen-reader` or an equivalent.
+When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
 
 ```html
 <div class="pf-v5-c-banner">

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -1664,7 +1664,7 @@ cssPrefix: pf-v5-c-calendar-month
 | -- | -- | -- |
 | `aria-hidden="true"` | `.pf-v5-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
 | `aria-hidden="true"` | `.pf-v5-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
-| `.pf-screen-reader` | `.pf-v5-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
+| `.pf-v5-screen-reader` | `.pf-v5-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
 | `aria-label="[Prev/Next] month"` | `.pf-v5-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
 | `disabled` | `.pf-v5-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-v5-c-calendar-month__dates-cell.pf-m-disabled`** |
 | `aria-label="[date] [month] [year]"` | `.pf-v5-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |

package/docs/components/Card/examples/Card.md

@@ -608,7 +608,7 @@ cssPrefix: pf-v5-c-card
         <div class="pf-v5-c-card__selectable-actions">
           <div class="pf-v5-c-radio pf-m-standalone">
             <input
-              class="pf-v5-c-radio__input {{pfv &#x27;unset-prefix&#x27;}}screen-reader"
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
               type="radio"
               id="card-clickable-example-sr-only-radio"
               name="card-clickable-example-sr-only-radio"
@@ -643,7 +643,7 @@ cssPrefix: pf-v5-c-card
         <div class="pf-v5-c-card__selectable-actions">
           <div class="pf-v5-c-radio pf-m-standalone">
             <input
-              class="pf-v5-c-radio__input {{pfv &#x27;unset-prefix&#x27;}}screen-reader"
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
               type="radio"
               id="card-clickable-example-disabled-sr-only-radio"
               name="card-clickable-example-disabled-sr-only-radio"
@@ -682,7 +682,7 @@ cssPrefix: pf-v5-c-card
         <div class="pf-v5-c-card__selectable-actions">
           <div class="pf-v5-c-radio pf-m-standalone">
             <input
-              class="pf-v5-c-radio__input {{pfv &#x27;unset-prefix&#x27;}}screen-reader"
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
               type="radio"
               id="card-clickable-example-selected-disabled-sr-only-radio"
               name="card-clickable-example-selected-disabled-sr-only-radio"

package/docs/components/InputGroup/examples/InputGroup.md

@@ -282,7 +282,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 
 ### Accessibility
 
-When using the `.pf-v5-c-input-group` always ensure labels are used outside the input group with the `.pf-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
+When using the `.pf-v5-c-input-group` always ensure labels are used outside the input group with the `.pf-v5-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |

package/docs/components/Popover/examples/Popover.md

@@ -653,7 +653,7 @@ A popover is used to provide contextual information for another component on cli
 | `aria-modal="true"` | `.pf-v5-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required**|
 | `aria-label="Close"` | `.pf-v5-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
 | `aria-hidden="true"` | Parent element containing the page contents when the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-v5-c-popover` must not be a descendent of the element with `aria-hidden="true"`. For more info, see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
-| `.pf-screen-reader` | `.pf-v5-c-popover__title-text <span>` | Adds text to be read saying the alert status before the title. If `.pf-v5-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
+| `.pf-v5-screen-reader` | `.pf-v5-c-popover__title-text <span>` | Adds text to be read saying the alert status before the title. If `.pf-v5-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
 
 ### Usage
 

package/docs/components/Slider/examples/Slider.md

@@ -414,7 +414,7 @@ cssPrefix: pf-v5-c-slider
     <div class="pf-v5-c-slider__value pf-m-floating">
       <div class="pf-v5-c-input-group">
         <div class="pf-v5-c-input-group__item pf-m-fill">
-          <div class="pf-v5-c-form-control">
+          <div class="pf-v5-c-form-control pf-m-disabled">
             <input
               disabled
               type="number"
@@ -615,7 +615,7 @@ cssPrefix: pf-v5-c-slider
   <div class="pf-v5-c-slider__value">
     <div class="pf-v5-c-input-group">
       <div class="pf-v5-c-input-group__item pf-m-fill">
-        <div class="pf-v5-c-form-control">
+        <div class="pf-v5-c-form-control pf-m-disabled">
           <input
             disabled
             type="number"

package/docs/utilities/Accessibility/examples/Accessibility.md

@@ -18,7 +18,7 @@ Content available only to screen reader, open inspector to investigate
 ```html
 <span
   class="pf-v5-u-visible"
->This unsets .pf-v5-u-screen-reader and .pf-screen-reader. It will be visible.</span>
+>This unsets .pf-v5-u-screen-reader and .pf-v5-screen-reader. It will be visible.</span>
 
 ```
 
@@ -41,4 +41,4 @@ The text underneath is hidden.
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v5-u-screen-reader{-on-[breakpoint]}` | `*` |  Visually hides element, but leaves accessible to assistive technologies |
-| `.pf-v5-u-visible{-on-[breakpoint]}` | `*` |  Unsets `.pf-v5-u-screen-reader` and `.pf-screen-reader` |
+| `.pf-v5-u-visible{-on-[breakpoint]}` | `*` |  Unsets `.pf-v5-u-screen-reader` and `.pf-v5-screen-reader` |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.61",
+  "version": "5.0.0-alpha.63",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -14750,7 +14750,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-form-control--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-form-control--BorderRadius: 0;
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-form-control--Width: auto;
+  --pf-v5-c-form-control--Width: 100%;
   --pf-v5-c-form-control--Height: calc(var(--pf-v5-c-form-control--FontSize) * var(--pf-v5-c-form-control--LineHeight) + var(--pf-v5-c-form-control--BorderWidth) * 2 + var(--pf-v5-c-form-control--PaddingTop) + var(--pf-v5-c-form-control--PaddingBottom));
   --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-form-control--PaddingTop: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));

package/patternfly.css

@@ -14867,7 +14867,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
   --pf-v5-c-form-control--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
   --pf-v5-c-form-control--BorderRadius: 0;
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-form-control--Width: auto;
+  --pf-v5-c-form-control--Width: 100%;
   --pf-v5-c-form-control--Height: calc(var(--pf-v5-c-form-control--FontSize) * var(--pf-v5-c-form-control--LineHeight) + var(--pf-v5-c-form-control--BorderWidth) * 2 + var(--pf-v5-c-form-control--PaddingTop) + var(--pf-v5-c-form-control--PaddingBottom));
   --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-form-control--PaddingTop: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));