@patternfly/react-core 4.206.2 → 4.206.5

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.206.5 (2022-04-26)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+## 4.206.4 (2022-04-25)
+
+
+### Bug Fixes
+
+* **DateTimePicker:** update date placeholder ([#7266](https://github.com/patternfly/patternfly-react/issues/7266)) ([4e9a73e](https://github.com/patternfly/patternfly-react/commit/4e9a73e8f7645b7a885d15754f99b9e078449806))
+
+
+
+
+
+## 4.206.3 (2022-04-23)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.206.2 (2022-04-21)
 
 

package/dist/umd/react-core.min.css

@@ -260,6 +260,37 @@
   --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
 }
 
+.pf-c-action-list {
+  --pf-c-action-list--m-icon--spacer: 0;
+  --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
+  --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
+}
+
+.pf-c-action-list,
+.pf-c-action-list__group {
+  --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
+  --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
+  display: flex;
+  align-items: center;
+}
+
+.pf-c-action-list > * + *,
+.pf-c-action-list__group > * + * {
+  margin-left: var(--pf-c-action-list--child--spacer);
+}
+
+.pf-c-action-list > * + .pf-c-action-list__group,
+.pf-c-action-list .pf-c-action-list__group + *,
+.pf-c-action-list__group > * + .pf-c-action-list__group,
+.pf-c-action-list__group .pf-c-action-list__group + * {
+  margin-left: var(--pf-c-action-list--group--spacer);
+}
+
+.pf-c-action-list.pf-m-icons,
+.pf-c-action-list__group.pf-m-icons {
+  --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
+}
+
 .pf-c-alert {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -478,37 +509,6 @@
   --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal);
 }
 
-.pf-c-action-list {
-  --pf-c-action-list--m-icon--spacer: 0;
-  --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
-  --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
-}
-
-.pf-c-action-list,
-.pf-c-action-list__group {
-  --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
-  --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
-  display: flex;
-  align-items: center;
-}
-
-.pf-c-action-list > * + *,
-.pf-c-action-list__group > * + * {
-  margin-left: var(--pf-c-action-list--child--spacer);
-}
-
-.pf-c-action-list > * + .pf-c-action-list__group,
-.pf-c-action-list .pf-c-action-list__group + *,
-.pf-c-action-list__group > * + .pf-c-action-list__group,
-.pf-c-action-list__group .pf-c-action-list__group + * {
-  margin-left: var(--pf-c-action-list--group--spacer);
-}
-
-.pf-c-action-list.pf-m-icons,
-.pf-c-action-list__group.pf-m-icons {
-  --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
-}
-
 .pf-c-app-launcher {
   --pf-c-app-launcher__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
   --pf-c-app-launcher__menu--BoxShadow: var(--pf-global--BoxShadow--md);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.206.2",
+  "version": "4.206.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.57.2",
-    "@patternfly/react-styles": "^4.56.2",
-    "@patternfly/react-tokens": "^4.58.2",
+    "@patternfly/react-icons": "^4.57.5",
+    "@patternfly/react-styles": "^4.56.5",
+    "@patternfly/react-tokens": "^4.58.5",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "34b80701a861cc4135122e08d7e890bab924e3f4"
+  "gitHead": "c0f634afc3fb81b215b00b14cf337f09fd8f37cd"
 }

package/src/demos/DateTimePicker.md

@@ -15,18 +15,28 @@ In this demo, learn how to use a [CalendarMonth](/components/calendar-month) com
 
 ```js
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, CalendarMonth, InputGroup, TextInput, Button, Popover } from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  CalendarMonth,
+  InputGroup,
+  TextInput,
+  Button,
+  Popover
+} from '@patternfly/react-core';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
 DateTimePicker = () => {
   const [isCalendarOpen, setIsCalendarOpen] = React.useState(false);
   const [isTimeOpen, setIsTimeOpen] = React.useState(false);
-  const [valueDate, setValueDate] = React.useState("YYYY-MM-DD");
-  const [valueTime, setValueTime] = React.useState("HH:MM");
+  const [valueDate, setValueDate] = React.useState('MM-DD-YYYY');
+  const [valueTime, setValueTime] = React.useState('HH:MM');
   const times = Array.from(new Array(10), (_, i) => i + 8);
-  const defaultTime = "0:00";
-  const dateFormat = date => date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g,'-');
+  const defaultTime = '0:00';
+  const dateFormat = date =>
+    date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-');
 
   const onToggleCalendar = () => {
     setIsCalendarOpen(!isCalendarOpen);
@@ -34,69 +44,75 @@ DateTimePicker = () => {
   };
 
   const onToggleTime = ev => {
-      setIsTimeOpen(!isTimeOpen);
-      setIsCalendarOpen(false);
+    setIsTimeOpen(!isTimeOpen);
+    setIsCalendarOpen(false);
   };
 
   const onSelectCalendar = newValueDate => {
-      const newValue = dateFormat(newValueDate);
-      setValueDate(newValue);
-      setIsCalendarOpen(!isCalendarOpen);
-      // setting default time when it is not picked
-      if (valueTime === "HH:MM") {
-          setValueTime(defaultTime);
-      }
+    const newValue = dateFormat(newValueDate);
+    setValueDate(newValue);
+    setIsCalendarOpen(!isCalendarOpen);
+    // setting default time when it is not picked
+    if (valueTime === 'HH:MM') {
+      setValueTime(defaultTime);
+    }
   };
 
   const onSelectTime = ev => {
-      setValueTime(ev.target.value);
-      setIsTimeOpen(!isTimeOpen);
+    setValueTime(ev.target.value);
+    setIsTimeOpen(!isTimeOpen);
   };
 
   const timeOptions = times.map(time => (
-      <DropdownItem key={time} component="button" value={`${time}:00`}>
-        {`${time}:00`}
-      </DropdownItem>
+    <DropdownItem key={time} component="button" value={`${time}:00`}>
+      {`${time}:00`}
+    </DropdownItem>
   ));
-  const calendar = (
-      <CalendarMonth
-        date={valueDate}
-        onChange={onSelectCalendar}
-      />
-  );
+  const calendar = <CalendarMonth date={valueDate} onChange={onSelectCalendar} />;
   const time = (
-      <Dropdown
-        onSelect={onSelectTime}
-        toggle={
-          <DropdownToggle aria-label="Toggle the time picker menu" toggleIndicator={null} onToggle={onToggleTime} style={{ padding: '6px 16px' }}>
-            <OutlinedClockIcon />
-          </DropdownToggle>
-        }
-        isOpen={isTimeOpen}
-        dropdownItems={timeOptions}
+    <Dropdown
+      onSelect={onSelectTime}
+      toggle={
+        <DropdownToggle
+          aria-label="Toggle the time picker menu"
+          toggleIndicator={null}
+          onToggle={onToggleTime}
+          style={{ padding: '6px 16px' }}
+        >
+          <OutlinedClockIcon />
+        </DropdownToggle>
+      }
+      isOpen={isTimeOpen}
+      dropdownItems={timeOptions}
     />
   );
   const calendarButton = (
-      <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
-          <OutlinedCalendarAltIcon />
-      </Button>
+    <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
+      <OutlinedCalendarAltIcon />
+    </Button>
   );
   return (
     <div style={{ width: '300px' }}>
-        <Popover
-            position="bottom"
-            bodyContent={calendar}
-            showClose={false}
-            isVisible={isCalendarOpen}
-            hasNoPadding
-            hasAutoWidth
-        >
-            <InputGroup>
-                <TextInput type="'datetime-local" id="date-time" aria-label="date and time picker demo" value={valueDate + ' ' + valueTime} isReadOnly/>
-                {calendarButton}
-                {time}
-            </InputGroup>
-        </Popover>
+      <Popover
+        position="bottom"
+        bodyContent={calendar}
+        showClose={false}
+        isVisible={isCalendarOpen}
+        hasNoPadding
+        hasAutoWidth
+      >
+        <InputGroup>
+          <TextInput
+            type="'datetime-local"
+            id="date-time"
+            aria-label="date and time picker demo"
+            value={valueDate + ' ' + valueTime}
+            isReadOnly
+          />
+          {calendarButton}
+          {time}
+        </InputGroup>
+      </Popover>
     </div>
   );
 };