Skip to content

feat(Select): Deprecated old select and promoted select next #8825

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 2 commits into from
Apr 11, 2023
Merged

feat(Select): Deprecated old select and promoted select next #8825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b56e22a
feat(Select): Deprecated old select and promoted select next
jenny-s51 Mar 24, 2023
9e62e40
update ouiaId after rebase
nicolethoen Apr 11, 2023
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
40 changes: 25 additions & 15 deletions packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, { useEffect } from 'react';
import { TextInput } from '../TextInput/TextInput';
import { Button } from '../Button/Button';
import { Select, SelectOption } from '../Select';
import { TextInput } from '../TextInput';
import { Button } from '../Button';
import { Select, SelectList, SelectOption } from '../Select';
import { MenuToggle, MenuToggleElement } from '../MenuToggle';
import { InputGroup } from '../InputGroup';
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
Expand Down Expand Up @@ -263,13 +264,21 @@ export const CalendarMonth = ({
Month
</span>
<Select
// Max width with "September"
width="140px"
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
onClick={()=>setIsSelectOpen(!isSelectOpen)}
isExpanded={isSelectOpen}
style={{width: "140px"} as React.CSSProperties }
>
{monthFormatted}
</MenuToggle>
)}
aria-labelledby={hiddenMonthId}
isOpen={isSelectOpen}
onToggle={() => {
setIsSelectOpen(!isSelectOpen);
onSelectToggle(!isSelectOpen);
onOpenChange={(isOpen) => {
setIsSelectOpen(isOpen);
onSelectToggle(isOpen);
}}
onSelect={(ev, monthNum) => {
// When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
Expand All @@ -285,14 +294,15 @@ export const CalendarMonth = ({
onMonthChange(ev, newDate);
}, 0);
}}
variant="single"
selections={monthFormatted}
selected={monthFormatted}
>
{longMonths.map((longMonth, index) => (
<SelectOption key={index} value={index} isSelected={longMonth === monthFormatted}>
{longMonth}
</SelectOption>
))}
<SelectList>
{longMonths.map((longMonth, index) => (
<SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
{longMonth}
</SelectOption>
))}
</SelectList>
</Select>
</div>
<div className={styles.calendarMonthHeaderYear}>
Expand Down
53 changes: 22 additions & 31 deletions ...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,45 +103,36 @@ exports[`With popover opened 1`] = `
>
Month
</span>
<div
class="pf-c-select"
data-ouia-component-id="OUIA-Generated-Select-single-1"
data-ouia-component-type="PF4/Select"
data-ouia-safe="true"
style="width: 140px;"
>
<div>
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Options menu"
aria-labelledby="unique_id_mock pf-select-toggle-id-0"
class="pf-c-select__toggle"
id="pf-select-toggle-id-0"
class="pf-c-menu-toggle"
style="width: 140px;"
type="button"
>
<div
class="pf-c-select__toggle-wrapper"
<span
class="pf-c-menu-toggle__text"
>
<span
class="pf-c-select__toggle-text"
>
December
</span>
</div>
December
</span>
<span
class="pf-c-select__toggle-arrow"
class="pf-c-menu-toggle__controls"
>
<svg
aria-hidden="true"
class="pf-svg"
fill="currentColor"
role="img"
viewBox="0 0 320 512"
<span
class="pf-c-menu-toggle__toggle-icon"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
aria-hidden="true"
class="pf-svg"
fill="currentColor"
role="img"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
</span>
</span>
</button>
</div>
Expand Down
47 changes: 28 additions & 19 deletions packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ import {
LoginPage,
ListItem,
ListVariant,
MenuToggle,
MenuToggleElement,
Select,
SelectOption,
SelectOptionObject
SelectList,
SelectOption
} from '@patternfly/react-core';
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';

Expand All @@ -22,7 +24,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
const [isValidPassword, setIsValidPassword] = React.useState(true);
const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false);
const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState<string | SelectOptionObject>('English');
const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState('English');

/** i18n object is used to simulate i18n integration of native language translation */
const i18n = {
Expand All @@ -35,23 +37,21 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
Bengali: 'বাংলা'
};

const headerUtilsOptions = [
<SelectOption key={0} value={i18n.English} />,
<SelectOption key={1} value={i18n.Mandarin} />,
<SelectOption key={2} value={i18n.Hindi} />,
<SelectOption key={3} value={i18n.Spanish} />,
<SelectOption key={4} value={i18n.Portuguese} />,
<SelectOption key={5} value={i18n.Arabic} />,
<SelectOption key={6} value={i18n.Bengali} />
];

const onHeaderUtilsToggle = (_event: any, isExpanded: boolean) => {
setIsHeaderUtilsOpen(isExpanded);
};
const headerUtilsOptions = (
<SelectList>
<SelectOption key={0} itemId={i18n.English}>{i18n.English}</SelectOption>
<SelectOption key={1} itemId={i18n.Mandarin}>{i18n.Mandarin}</SelectOption>
<SelectOption key={2} itemId={i18n.Hindi}>{i18n.Hindi}</SelectOption>
<SelectOption key={3} itemId={i18n.Spanish}>{i18n.Spanish}</SelectOption>
<SelectOption key={4} itemId={i18n.Portuguese}>{i18n.Portuguese}</SelectOption>
<SelectOption key={5} itemId={i18n.Arabic}>{i18n.Arabic}</SelectOption>
<SelectOption key={6} itemId={i18n.Bengali}>{i18n.Bengali}</SelectOption>
</SelectList>
);

const onHeaderUtilsSelect = (
_event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
value: string | SelectOptionObject
value: string
) => {
setSelectedHeaderUtils(value);
setIsHeaderUtilsOpen(false);
Expand All @@ -60,9 +60,18 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
const headerUtils = (
<Select
aria-label="Select Language"
onToggle={onHeaderUtilsToggle}
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle
ref={toggleRef}
onClick={() => setIsHeaderUtilsOpen(!isHeaderUtilsOpen)}
isExpanded={isHeaderUtilsOpen}
>
{selectedHeaderUtils}
</MenuToggle>
)}
onSelect={onHeaderUtilsSelect}
selections={selectedHeaderUtils}
onOpenChange={isOpen => setIsHeaderUtilsOpen(isOpen)}
selected={selectedHeaderUtils}
isOpen={isHeaderUtilsOpen}
>
{headerUtilsOptions}
Expand Down
3 changes: 2 additions & 1 deletion packages/react-core/src/components/MenuToggle/MenuToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
import { css } from '@patternfly/react-styles';
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
import { BadgeProps } from '../Badge';
import { Icon } from '../Icon';

export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;

Expand Down Expand Up @@ -85,7 +86,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {

const content = (
<>
{icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
{icon && <span className={css(styles.menuToggleIcon)}><Icon>{icon}</Icon></span>}
{isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
{React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
{isTypeahead ? (
Expand Down
28 changes: 18 additions & 10 deletions ...ges/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,17 +124,25 @@ exports[`menu toggle shows icon 1`] = `
<span
class="pf-c-menu-toggle__icon"
>
<svg
aria-hidden="true"
class="pf-svg"
fill="currentColor"
role="img"
viewBox="0 0 512 512"
<span
class="pf-c-icon"
>
<path
d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
/>
</svg>
<span
class="pf-c-icon__content"
>
<svg
aria-hidden="true"
class="pf-svg"
fill="currentColor"
role="img"
viewBox="0 0 512 512"
>
<path
d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
/>
</svg>
</span>
</span>
</span>
<span
class="pf-c-menu-toggle__text"
Expand Down
Loading