Skip to content

feat(LoginPage): added headerUtilities prop for language selector example #7793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 5 commits into from
Aug 23, 2022
Merged

feat(LoginPage): added headerUtilities prop for language selector example #7793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c034c7c
feat(LoginPage): added headerUtilities prop for language selector exa…
andyyvo Aug 4, 2022
27911c5
feat(LoginPage): edits to props, descriptions, and hook types
andyyvo Aug 10, 2022
a6e582d
feat(LoginPage): removed backgroundImgAlt off examples
andyyvo Aug 16, 2022
2c7c620
feat(LoginPage): changing markdown description
andyyvo Aug 18, 2022
f2cc5f9
feat(LoginPage): making prop beta
andyyvo Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/react-core/src/components/LoginPage/LoginFooterItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import * as React from 'react';

export interface LoginFooterItemProps extends React.HTMLProps<HTMLAnchorElement> {
/** Content rendered inside the footer Link Item */
/** Content rendered inside the footer link item */
children?: React.ReactNode;
/** Additional classes added to the Footer Link Item */
/** Additional classes added to the footer link item */
className?: string;
/** The URL of the Footer Link Item */
/** The URL of the footer link item */
href?: string;
/** Specifies where to open the linked document */
target?: string;
Expand Down
36 changes: 18 additions & 18 deletions packages/react-core/src/components/LoginPage/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,47 +11,47 @@ import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
export interface LoginFormProps extends React.HTMLProps<HTMLFormElement> {
/** Flag to indicate if the first dropdown item should not gain initial focus */
noAutoFocus?: boolean;
/** Additional classes added to the Login Main Body's Form */
/** Additional classes added to the login main body's form */
className?: string;
/** Flag indicating the Helper Text is visible * */
/** Flag indicating the helper text is visible * */
showHelperText?: boolean;
/** Content displayed in the Helper Text component * */
/** Content displayed in the helper text component * */
helperText?: React.ReactNode;
/** Icon displayed to the left in the Helper Text */
/** Icon displayed to the left in the helper text */
helperTextIcon?: React.ReactNode;
/** Label for the Username Input Field */
/** Label for the username input field */
usernameLabel?: string;
/** Value for the Username */
/** Value for the username */
usernameValue?: string;
/** Function that handles the onChange event for the Username */
/** Function that handles the onChange event for the username */
onChangeUsername?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
/** Flag indicating if the Username is valid */
/** Flag indicating if the username is valid */
isValidUsername?: boolean;
/** Label for the Password Input Field */
/** Label for the password input field */
passwordLabel?: string;
/** Value for the Password */
/** Value for the password */
passwordValue?: string;
/** Function that handles the onChange event for the Password */
/** Function that handles the onChange event for the password */
onChangePassword?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
/** Flag indicating if the Password is valid */
/** Flag indicating if the password is valid */
isValidPassword?: boolean;
/** Flag indicating if the user can toggle hiding the password */
isShowPasswordEnabled?: boolean;
/** Accessible label for the show password button */
showPasswordAriaLabel?: string;
/** Accessible label for the hide password button */
hidePasswordAriaLabel?: string;
/** Label for the Log in Button Input */
/** Label for the log in button input */
loginButtonLabel?: string;
/** Flag indicating if the Login Button is disabled */
/** Flag indicating if the login button is disabled */
isLoginButtonDisabled?: boolean;
/** Function that is called when the Login button is clicked */
/** Function that is called when the login button is clicked */
onLoginButtonClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
/** Label for the Remember Me Checkbox that indicates the user should be kept logged in. If the label is not provided, the checkbox will not show. */
/** Label for the remember me checkbox that indicates the user should be kept logged in. If the label is not provided, the checkbox will not show. */
rememberMeLabel?: string;
/** Flag indicating if the remember me Checkbox is checked. */
/** Flag indicating if the remember me checkbox is checked. */
isRememberMeChecked?: boolean;
/** Function that handles the onChange event for the Remember Me Checkbox */
/** Function that handles the onChange event for the remember me checkbox */
onChangeRememberMe?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/LoginPage/LoginHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export interface LoginHeaderProps extends React.HTMLProps<HTMLDivElement> {
children?: React.ReactNode;
/** Additional classes added to the login header */
className?: string;
/** Header Brand component (e.g. <LoginHeader />) */
/** Header brand component (e.g. <LoginHeader />) */
headerBrand?: React.ReactNode;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/LoginPage/LoginMainBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Login/login';

export interface LoginMainBodyProps extends React.HTMLProps<HTMLDivElement> {
/** Content rendered inside the Login Main Body */
/** Content rendered inside the login main body */
children?: React.ReactNode;
/** Additional classes added to the Login Main Body */
/** Additional classes added to the login main body */
className?: string;
}

Expand Down
10 changes: 5 additions & 5 deletions packages/react-core/src/components/LoginPage/LoginMainFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Login/login';

export interface LoginMainFooterProps extends React.HTMLProps<HTMLDivElement> {
/** Additional classes added to the Login Main Footer */
/** Additional classes added to the login main footer */
className?: string;
/** Content rendered inside the Login Main Footer */
/** Content rendered inside the login main footer */
children?: React.ReactNode;
/** Content rendered inside the Login Main Footer as Social Media Links* */
/** Content rendered inside the login main footer as social media links* */
socialMediaLoginContent?: React.ReactNode;
/** Content rendered inside of Login Main Footer Band to display a sign up for account message */
/** Content rendered inside of login main footer band to display a sign up for account message */
signUpForAccountMessage?: React.ReactNode;
/** Content rendered inside of Login Main Footer Band do display a forgot credentials link* */
/** Content rendered inside of login main footer band do display a forgot credentials link* */
forgotCredentials?: React.ReactNode;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/LoginPage/LoginMainFooterBandItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import styles from '@patternfly/react-styles/css/components/Login/login';
import { css } from '@patternfly/react-styles';

export interface LoginMainFooterBandItemProps extends React.HTMLProps<HTMLParagraphElement> {
/** Content rendered inside the footer Link Item */
/** Content rendered inside the footer link item */
children?: React.ReactNode;
/** Additional classes added to the Footer Link Item */
/** Additional classes added to the footer link item */
className?: string;
}

Expand Down
10 changes: 5 additions & 5 deletions packages/react-core/src/components/LoginPage/LoginMainFooterLinksItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import styles from '@patternfly/react-styles/css/components/Login/login';
import { css } from '@patternfly/react-styles';

export interface LoginMainFooterLinksItemProps extends React.HTMLProps<HTMLLIElement> {
/** Content rendered inside the footer Link Item */
/** Content rendered inside the footer link item */
children?: React.ReactNode;
/** HREF for Footer Link Item */
/** HREF for footer link item */
href?: string;
/** Target for Footer Link Item */
/** Target for footer link item */
target?: string;
/** Additional classes added to the Footer Link Item */
/** Additional classes added to the footer link item */
className?: string;
/** Component used to render the Footer Link Item */
/** Component used to render the footer link item */
linkComponent?: React.ReactNode;
/** Props for the LinkComponent */
linkComponentProps?: any;
Expand Down
12 changes: 8 additions & 4 deletions packages/react-core/src/components/LoginPage/LoginMainHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@ import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Login/login';

export interface LoginMainHeaderProps extends React.HTMLProps<HTMLDivElement> {
/** Content rendered inside the Login Main Header */
/** Content rendered inside the login main header */
children?: React.ReactNode;
/** Additional classes added to the Login Main Header */
/** Additional classes added to the login main header */
className?: string;
/** Title for the Login Main Header */
/** Title for the login main header */
title?: string;
/** Subtitle that contains the Text, URL, and URL Text for the Login Main Header */
/** Subtitle that contains the text, URL, and URL text for the login main header */
subtitle?: string;
/** Actions that render for the login main header */
headerUtilities?: React.ReactNode;
}

export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
children = null,
className = '',
title = '',
subtitle = '',
headerUtilities = null,
...props
}: LoginMainHeaderProps) => (
<header className={css(styles.loginMainHeader, className)} {...props}>
Expand All @@ -28,6 +31,7 @@ export const LoginMainHeader: React.FunctionComponent<LoginMainHeaderProps> = ({
</Title>
)}
{subtitle && <p className={css(styles.loginMainHeaderDesc)}>{subtitle}</p>}
{headerUtilities && <div className={css(styles.loginMainHeaderUtilities)}>{headerUtilities}</div>}
{children}
</header>
);
Expand Down
33 changes: 18 additions & 15 deletions packages/react-core/src/components/LoginPage/LoginPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,33 +13,35 @@ import { LoginMainBody } from './LoginMainBody';
import { LoginMainFooter } from './LoginMainFooter';

export interface LoginPageProps extends React.HTMLProps<HTMLDivElement> {
/** Anything that can be rendered inside of the LoginPage (e.g. <LoginPageForm>) */
/** Anything that can be rendered inside of the login page (e.g. <LoginPageForm>) */
children?: React.ReactNode;
/** Additional classes added to the LoginPage. */
/** Additional classes added to the login page */
className?: string;
/** Attribute that specifies the URL of the brand image for the LoginPage */
/** Attribute that specifies the URL of the brand image for the login page */
brandImgSrc?: string;
/** Attribute that specifies the alt text of the brand image for the LoginPage. */
/** Attribute that specifies the alt text of the brand image for the login page */
brandImgAlt?: string;
/** Attribute that specifies the URL of the background image for the LoginPage */
/** Attribute that specifies the URL of the background image for the login page */
backgroundImgSrc?: string | BackgroundImageSrcMap;
/** Attribute that specifies the alt text of the background image for the LoginPage. */
/** Attribute that specifies the alt text of the background image for the login page */
backgroundImgAlt?: string;
/** Content rendered inside of the Text Component of the LoginPage */
/** Content rendered inside of the text component of the login page */
textContent?: string;
/** Items rendered inside of the Footer List Component of the LoginPage */
/** Items rendered inside of the footer list component of the login page */
footerListItems?: React.ReactNode;
/** Adds list variant styles for the Footer List component of the LoginPage. The only current value is'inline' */
/** Adds list variant styles for the footer list component of the login page. The only current value is'inline' */
footerListVariants?: ListVariant.inline;
/** Title for the Login Main Body Header of the LoginPage */
/** Title for the login main body header of the login page */
loginTitle: string;
/** Subtitle for the Login Main Body Header of the LoginPage */
/** Subtitle for the login main body header of the login page */
loginSubtitle?: string;
/** Content rendered inside of Login Main Footer Band to display a sign up for account message */
/** @beta Header utilities for the login main body header of the login page */
headerUtilities?: React.ReactNode;
Copy link
Copy Markdown
Contributor

@tlabaj tlabaj Aug 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could we label this one beta? Then we can merge.

Copy link
Copy Markdown
Contributor Author

@andyyvo andyyvo Aug 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tlabaj how do I label something as beta?

Copy link
Copy Markdown
Contributor

@tlabaj tlabaj Aug 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @andyyvo You just need to but the @beta at the beginning of the prop description. This give us the flexibility to improve on API (including breaking change) if need be. Once we decide feature is stable, we promote it out of beta and remove the tag.
/** @beta Header utilities for the login main body header of the login page */

Copy link
Copy Markdown
Contributor Author

@andyyvo andyyvo Aug 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tlabaj would you also like to see this on the LoginMainHeader.tsx prop as well?

/** Content rendered inside of login main footer band to display a sign up for account message */
signUpForAccountMessage?: React.ReactNode;
/** Content rendered inside of Login Main Footer Band to display a forgot credentials link* */
/** Content rendered inside of login main footer band to display a forgot credentials link. */
forgotCredentials?: React.ReactNode;
/** Content rendered inside of Social Media Login footer section . */
/** Content rendered inside of social media login footer section */
socialMediaLoginContent?: React.ReactNode;
}

Expand All @@ -55,6 +57,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
footerListVariants,
loginTitle,
loginSubtitle,
headerUtilities,
signUpForAccountMessage = null,
forgotCredentials = null,
socialMediaLoginContent = null,
Expand All @@ -77,7 +80,7 @@ export const LoginPage: React.FunctionComponent<LoginPageProps> = ({
<React.Fragment>
{backgroundImgSrc && <BackgroundImage src={backgroundImgSrc} alt={backgroundImgAlt} />}
<Login header={Header} footer={Footer} className={css(className)} {...props}>
<LoginMainHeader title={loginTitle} subtitle={loginSubtitle} />
<LoginMainHeader title={loginTitle} subtitle={loginSubtitle} headerUtilities={headerUtilities} />
<LoginMainBody>{children}</LoginMainBody>
{(socialMediaLoginContent || forgotCredentials || signUpForAccountMessage) && (
<LoginMainFooter
Expand Down
8 changes: 8 additions & 0 deletions packages/react-core/src/components/LoginPage/examples/LoginPage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,11 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclam
### Show/hide password
```ts file='./LoginPageShowHidePassword.tsx' isFullscreen
```

### Customizing the header utilities

`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
```
1 change: 0 additions & 1 deletion packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
brandImgSrc={brandImg2}
brandImgAlt="PatternFly logo"
backgroundImgSrc={images}
backgroundImgAlt="Images"
footerListItems={listItem}
textContent="This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users."
loginTitle="Log in to your account"
Expand Down
Loading