@patternfly/react-core 6.0.0-alpha.41 → 6.0.0-alpha.43

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.40","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.42","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.40","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.42","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.40","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.42","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.41",
+  "version": "6.0.0-alpha.43",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.15",
-    "@patternfly/react-styles": "^6.0.0-alpha.15",
-    "@patternfly/react-tokens": "^6.0.0-alpha.15",
+    "@patternfly/react-icons": "^6.0.0-alpha.16",
+    "@patternfly/react-styles": "^6.0.0-alpha.16",
+    "@patternfly/react-tokens": "^6.0.0-alpha.16",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.91",
+    "@patternfly/patternfly": "6.0.0-alpha.99",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -74,5 +74,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "f32fea72a008afd7ca45a96438a41d0cd1f6b3a9"
+  "gitHead": "9b2ae9f766c98ac901ad1344780bf0a560a3f848"
 }

package/src/components/DataList/examples/DataList.md

@@ -23,10 +23,6 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
-import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
-import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
-import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
-import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 ## Examples
 

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -19,11 +19,6 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-/* eslint-disable camelcase */
-import global_Color_100 from '@patternfly/react-tokens/dist/esm/global_Color_100';
-import global_BackgroundColor_200 from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_200';
-import global_BorderColor_100 from '@patternfly/react-tokens/dist/esm/global_BorderColor_100';
-import global_BorderWidth_sm from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';
 
 export const DataListWidthModifiers: React.FunctionComponent = () => {
   const [show, setShow] = React.useState(true);
@@ -46,15 +41,6 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
     setIsOpen2(!isOpen2);
   };
 
-  const previewPlaceholder = {
-    display: 'block',
-    width: '100%',
-    padding: '.25rem .5rem',
-    color: global_Color_100.var,
-    backgroundColor: global_BackgroundColor_200.var,
-    border: `${global_BorderWidth_sm.var} ${global_BorderColor_100.var} solid`
-  };
-
   return (
     <>
       <div key="example-1">
@@ -68,19 +54,15 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
               <DataListItemCells
                 dataListCells={[
                   <DataListCell key="default">
-                    <div style={previewPlaceholder}>
-                      <b id="width-ex1-item1">default</b>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-                    </div>
+                    <b id="width-ex1-item1">default</b>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                   </DataListCell>,
                   <DataListCell key="default2">
-                    <div style={previewPlaceholder}>
-                      <b>default</b>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
-                        labore et dolore magna aliqua.
-                      </p>
-                    </div>
+                    <b>default</b>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                      labore et dolore magna aliqua.
+                    </p>
                   </DataListCell>
                 ]}
               />
@@ -99,16 +81,12 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
               <DataListItemCells
                 dataListCells={[
                   <DataListCell width={2} key="width 2">
-                    <div style={previewPlaceholder}>
-                      <b id="width-ex2-item1">width 2</b>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
-                    </div>
+                    <b id="width-ex2-item1">width 2</b>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
                   </DataListCell>,
                   <DataListCell width={4} key="width 4">
-                    <div style={previewPlaceholder}>
-                      <b>width 4</b>
-                      <p>Lorem ipsum dolor sit amet.</p>
-                    </div>
+                    <b>width 4</b>
+                    <p>Lorem ipsum dolor sit amet.</p>
                   </DataListCell>
                 ]}
               />
@@ -177,20 +155,14 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
               <DataListItemCells
                 dataListCells={[
                   <DataListCell width={5} key="width 5">
-                    <div style={previewPlaceholder}>
-                      <b id="width-ex3-item1">width 5</b>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-                    </div>
+                    <b id="width-ex3-item1">width 5</b>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                   </DataListCell>,
                   <DataListCell width={2} key="width 2">
-                    <div style={previewPlaceholder}>
-                      <b>width 2</b>
-                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
-                    </div>
+                    <b>width 2</b>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                   </DataListCell>,
-                  <DataListCell key="default">
-                    <div style={previewPlaceholder}>default</div>
-                  </DataListCell>
+                  <DataListCell key="default">default</DataListCell>
                 ]}
               />
               <DataListAction

package/src/components/LoginPage/LoginMainFooterLinksItem.tsx

@@ -5,35 +5,17 @@ import { css } from '@patternfly/react-styles';
 export interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside the footer link item */
   children?: React.ReactNode;
-  /** HREF for footer link item */
-  href?: string;
-  /** Target for footer link item */
-  target?: string;
   /** Additional classes added to the footer link item  */
   className?: string;
-  /** Component used to render the footer link item */
-  linkComponent?: React.ReactNode;
-  /** Props for the LinkComponent */
-  linkComponentProps?: any;
 }
 
 export const LoginMainFooterLinksItem: React.FunctionComponent<LoginMainFooterLinksItemProps> = ({
   children = null,
-  href = '',
-  target,
   className = '',
-  linkComponent = 'a',
-  linkComponentProps,
   ...props
-}: LoginMainFooterLinksItemProps) => {
-  const LinkComponent = linkComponent as any;
-
-  return (
-    <li className={css(styles.loginMainFooterLinksItem, className)} {...props}>
-      <LinkComponent href={href} target={target} {...linkComponentProps}>
-        {children}
-      </LinkComponent>
-    </li>
-  );
-};
+}: LoginMainFooterLinksItemProps) => (
+  <li className={css(styles.loginMainFooterLinksItem, className)} {...props}>
+    {children}
+  </li>
+);
 LoginMainFooterLinksItem.displayName = 'LoginMainFooterLinksItem';

package/src/components/LoginPage/__tests__/LoginMainFooterLinksItem.test.tsx

@@ -4,7 +4,7 @@ import { LoginMainFooterLinksItem } from '../LoginMainFooterLinksItem';
 
 describe('LoginMainFooterLinksItem', () => {
   test('renders with PatternFly Core styles', () => {
-    const { asFragment } = render(<LoginMainFooterLinksItem href="#" target="" />);
+    const { asFragment } = render(<LoginMainFooterLinksItem />);
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/LoginPage/__tests__/__snapshots__/LoginMainFooterLinksItem.test.tsx.snap

@@ -4,11 +4,7 @@ exports[`LoginMainFooterLinksItem className is added to the root element 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-login__main-footer-links-item extra-class"
-  >
-    <a
-      href=""
-    />
-  </li>
+  />
 </DocumentFragment>
 `;
 
@@ -16,12 +12,7 @@ exports[`LoginMainFooterLinksItem renders with PatternFly Core styles 1`] = `
 <DocumentFragment>
   <li
     class="pf-v6-c-login__main-footer-links-item"
-  >
-    <a
-      href="#"
-      target=""
-    />
-  </li>
+  />
 </DocumentFragment>
 `;
 
@@ -30,13 +21,9 @@ exports[`LoginMainFooterLinksItem with custom node 1`] = `
   <li
     class="pf-v6-c-login__main-footer-links-item"
   >
-    <a
-      href=""
-    >
-      <div>
-        My custom node
-      </div>
-    </a>
+    <div>
+      My custom node
+    </div>
   </li>
 </DocumentFragment>
 `;

package/src/components/LoginPage/examples/LoginPage.md

@@ -14,19 +14,30 @@ propComponents:
     'LoginMainFooter',
     'LoginFooterItem',
     'LoginMainFooterBandItem',
-    'LoginMainFooterLinksItem',
+    'LoginMainFooterLinksItem'
   ]
 ---
+
 import brandImg2 from '../../assets/brandImgColor2.svg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
+import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 ## Examples
+
 ### Basic
+
 ```ts file='./LoginPageBasic.tsx' isFullscreen
+
 ```
 
 ### Show/hide password
+
 ```ts file='./LoginPageShowHidePassword.tsx' isFullscreen
+
 ```
 
 ### Customizing the header utilities
@@ -34,5 +45,7 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
 `headerUtilities` is a prop that can be customized to allow components to be placed into the header of the login page, likely for the user to take an action. The following example demonstrates the use of a Select component to display a list a languages.
 
 ### With header utilities
+
 ```ts file='./LoginPageLanguageSelect.tsx' isFullscreen
-```
+
+```

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -7,9 +7,15 @@ import {
   LoginMainFooterLinksItem,
   LoginPage,
   ListItem,
-  ListVariant
+  ListVariant,
+  Button
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
+import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const SimpleLoginPage: React.FunctionComponent = () => {
   const [showHelperText, setShowHelperText] = React.useState(false);
@@ -40,45 +46,30 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
 
   const socialMediaLoginContent = (
     <React.Fragment>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Google' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
-          <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Google">
+          <GoogleIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Github' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-          <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Github">
+          <GithubIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
-          <path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Dropbox">
+          <DropboxIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Facebook' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-          <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Facebook">
+          <FacebookSquareIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Gitlab">
+          <GitlabIcon />
+        </Button>
       </LoginMainFooterLinksItem>
     </React.Fragment>
   );

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -12,9 +12,15 @@ import {
   MenuToggleElement,
   Select,
   SelectList,
-  SelectOption
+  SelectOption,
+  Button
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
+import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   const [showHelperText, setShowHelperText] = React.useState(false);
@@ -113,45 +119,30 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
 
   const socialMediaLoginContent = (
     <React.Fragment>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Google' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
-          <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Google">
+          <GoogleIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Github' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-          <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Github">
+          <GithubIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
-          <path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Dropbox">
+          <DropboxIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Facebook' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-          <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Facebook">
+          <FacebookSquareIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Gitlab">
+          <GitlabIcon />
+        </Button>
       </LoginMainFooterLinksItem>
     </React.Fragment>
   );

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -7,9 +7,15 @@ import {
   LoginMainFooterLinksItem,
   LoginPage,
   ListItem,
-  ListVariant
+  ListVariant,
+  Button
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon';
+import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import DropboxIcon from '@patternfly/react-icons/dist/esm/icons/dropbox-icon';
+import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook-square-icon';
+import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 export const LoginPageHideShowPassword: React.FunctionComponent = () => {
   const [showHelperText, setShowHelperText] = React.useState(false);
@@ -40,45 +46,30 @@ export const LoginPageHideShowPassword: React.FunctionComponent = () => {
 
   const socialMediaLoginContent = (
     <React.Fragment>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Google' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
-          <path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Google">
+          <GoogleIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Github' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-          <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Github">
+          <GithubIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Dropbox' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 528 512">
-          <path d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Dropbox">
+          <DropboxIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Facebook' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-          <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Facebook">
+          <FacebookSquareIcon />
+        </Button>
       </LoginMainFooterLinksItem>
-      <LoginMainFooterLinksItem
-        href="https://www.patternfly.org/"
-        linkComponentProps={{ 'aria-label': 'Login with Gitlab' }}
-      >
-        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path d="M29.782 199.732L256 493.714 8.074 309.699c-6.856-5.142-9.712-13.996-7.141-21.993l28.849-87.974zm75.405-174.806c-3.142-8.854-15.709-8.854-18.851 0L29.782 199.732h131.961L105.187 24.926zm56.556 174.806L256 493.714l94.257-293.982H161.743zm349.324 87.974l-28.849-87.974L256 493.714l247.926-184.015c6.855-5.142 9.711-13.996 7.141-21.993zm-85.404-262.78c-3.142-8.854-15.709-8.854-18.851 0l-56.555 174.806h131.961L425.663 24.926z" />
-        </svg>
+      <LoginMainFooterLinksItem>
+        <Button variant="plain" aria-label="Login with Gitlab">
+          <GitlabIcon />
+        </Button>
       </LoginMainFooterLinksItem>
     </React.Fragment>
   );

package/src/components/Nav/NavList.tsx

@@ -143,18 +143,16 @@ class NavList extends React.Component<NavListProps> {
           <PageSidebarContext.Consumer>
             {({ isSidebarOpen }) => (
               <React.Fragment>
-                {isHorizontal && (
+                {isHorizontal && (!scrollViewAtStart || !scrollViewAtEnd) && (
                   <div className={css(styles.navScrollButton)}>
                     <Button
                       variant="plain"
                       aria-label={backScrollAriaLabel || ariaLeftScroll}
                       onClick={this.scrollBack}
-                      disabled={scrollViewAtStart}
+                      isDisabled={scrollViewAtStart}
                       tabIndex={isSidebarOpen ? null : -1}
                     >
-                      <span className={css(styles.buttonIcon)}>
-                        <AngleLeftIcon />
-                      </span>
+                      <AngleLeftIcon />
                     </Button>
                   </div>
                 )}
@@ -167,18 +165,16 @@ class NavList extends React.Component<NavListProps> {
                 >
                   {children}
                 </ul>
-                {isHorizontal && (
+                {isHorizontal && (!scrollViewAtStart || !scrollViewAtEnd) && (
                   <div className={css(styles.navScrollButton)}>
                     <Button
                       variant="plain"
                       aria-label={forwardScrollAriaLabel || ariaRightScroll}
                       onClick={this.scrollForward}
-                      disabled={scrollViewAtEnd}
+                      isDisabled={scrollViewAtEnd}
                       tabIndex={isSidebarOpen ? null : -1}
                     >
-                      <span className={css(styles.buttonIcon)}>
-                        <AngleRightIcon />
-                      </span>
+                      <AngleRightIcon />
                     </Button>
                   </div>
                 )}