Skip to content
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

feat(Toggle group): Add support for icon position #10291

Merged
merged 5 commits into from
Apr 24, 2024
Merged

feat(Toggle group): Add support for icon position #10291

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
b82cb0f
feat(Toggle group): Add support for icon position
tlabaj Apr 19, 2024
6d9d9aa
fix ids
tlabaj Apr 19, 2024
1c7d0ca
fix ids
tlabaj Apr 19, 2024
68f8342
refactor duplicate code
tlabaj Apr 22, 2024
db2276e
update some comment
tlabaj Apr 22, 2024
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
8 changes: 7 additions & 1 deletion packages/react-core/src/components/ToggleGroup/ToggleGroupItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLProps<HTMLDivElemen
text?: React.ReactNode;
/** Icon rendered inside the toggle group item */
icon?: React.ReactNode;
/** Sets position of the icon when text is also passed in */
iconPosition?: 'start' | 'end';
/** Additional classes added to the toggle group item */
className?: string;
/** Flag indicating if the toggle group item is disabled */
Expand All @@ -25,6 +27,7 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLProps<HTMLDivElemen
export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
text,
icon,
iconPosition = 'start',
className,
isDisabled = false,
isSelected = false,
Expand All @@ -42,6 +45,8 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
console.warn('An accessible aria-label is required when using the toggle group item icon variant.');
}

const toggleGroupIcon = <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>;

return (
<div className={css(styles.toggleGroupItem, className)} {...props}>
<button
Expand All @@ -53,8 +58,9 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
disabled={isDisabled}
id={buttonId}
>
{icon && <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>}
{icon && iconPosition === 'start' && toggleGroupIcon}
{text && <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement>}
{icon && iconPosition === 'end' && toggleGroupIcon}
</button>
</div>
);
Expand Down
75 changes: 52 additions & 23 deletions packages/react-core/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,28 +15,57 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
};
return (
<ToggleGroup aria-label="Text and icon toggle group">
<ToggleGroupItem
icon={<CopyIcon />}
text="Copy"
buttonId="toggle-group-text-icons-1"
isSelected={isSelected['toggle-group-text-icons-1']}
onChange={handleItemClick}
/>
<ToggleGroupItem
icon={<UndoIcon />}
text="Undo"
buttonId="toggle-group-text-icons-2"
isSelected={isSelected['toggle-group-text-icons-2']}
onChange={handleItemClick}
/>
<ToggleGroupItem
icon={<ShareSquareIcon />}
text="Share"
buttonId="toggle-group-text-icons-3"
isSelected={isSelected['toggle-group-text-icons-3']}
onChange={handleItemClick}
/>
</ToggleGroup>
<>
<ToggleGroup aria-label="Text and icon toggle group with icons at start">
<ToggleGroupItem
icon={<CopyIcon />}
text="Copy"
buttonId="toggle-group-text-icons-1"
isSelected={isSelected['toggle-group-text-icons-1']}
onChange={handleItemClick}
/>
<ToggleGroupItem
icon={<UndoIcon />}
text="Undo"
buttonId="toggle-group-text-icons-2"
isSelected={isSelected['toggle-group-text-icons-2']}
onChange={handleItemClick}
/>
<ToggleGroupItem
icon={<ShareSquareIcon />}
text="Share"
buttonId="toggle-group-text-icons-3"
isSelected={isSelected['toggle-group-text-icons-3']}
onChange={handleItemClick}
/>
</ToggleGroup>
<br />
<ToggleGroup aria-label="Text and icon toggle group with icons at end">
<ToggleGroupItem
icon={<CopyIcon />}
iconPosition="end"
text="Copy"
buttonId="toggle-group-text-icons-4"
isSelected={isSelected['toggle-group-text-icons-4']}
onChange={handleItemClick}
/>
<ToggleGroupItem
icon={<UndoIcon />}
iconPosition="end"
text="Undo"
buttonId="toggle-group-text-icons-5"
isSelected={isSelected['toggle-group-text-icons-5']}
onChange={handleItemClick}
/>
<ToggleGroupItem
icon={<ShareSquareIcon />}
iconPosition="end"
text="Share"
buttonId="toggle-group-text-icons-6"
isSelected={isSelected['toggle-group-text-icons-6']}
onChange={handleItemClick}
/>
</ToggleGroup>
</>
);
};
Loading