From 7d26fd490c2f7e095064900a5e4ac979a0b5668e Mon Sep 17 00:00:00 2001 From: Andrei Zhaleznichenka Date: Tue, 12 Nov 2024 11:29:03 +0100 Subject: [PATCH] remove pressed text --- pages/button-group/item-permutations.page.tsx | 1 - pages/button-group/permutations.page.tsx | 2 -- pages/button-group/test.page.tsx | 15 +++++++++------ .../__snapshots__/documenter.test.ts.snap | 1 - .../__tests__/button-group-dev.test.tsx | 5 +---- .../__tests__/button-group-focus.test.tsx | 1 - .../__tests__/button-group-keyboard.test.tsx | 2 -- .../__tests__/button-group-states.test.tsx | 3 +-- .../__tests__/button-group-tooltips.test.tsx | 1 - src/button-group/icon-toggle-button-item.tsx | 8 +++----- src/button-group/interfaces.ts | 2 -- 11 files changed, 14 insertions(+), 27 deletions(-) diff --git a/pages/button-group/item-permutations.page.tsx b/pages/button-group/item-permutations.page.tsx index c5c2c69fdf..56c04957ef 100644 --- a/pages/button-group/item-permutations.page.tsx +++ b/pages/button-group/item-permutations.page.tsx @@ -49,7 +49,6 @@ const itemPermutations = createPermutations([ iconName: ['star'], pressedIconName: ['star-filled'], text: ['Add to favorites'], - pressedText: ['Added to favorites'], pressed: [false, true], }, ]); diff --git a/pages/button-group/permutations.page.tsx b/pages/button-group/permutations.page.tsx index c87e3d77c7..3579def78e 100644 --- a/pages/button-group/permutations.page.tsx +++ b/pages/button-group/permutations.page.tsx @@ -19,7 +19,6 @@ const feedbackGroup: ButtonGroupProps.Group = { iconName: 'thumbs-up', pressedIconName: 'thumbs-up-filled', text: 'Like', - pressedText: 'Like', pressed: true, }, { @@ -28,7 +27,6 @@ const feedbackGroup: ButtonGroupProps.Group = { iconName: 'thumbs-down', pressedIconName: 'thumbs-down-filled', text: 'Dislike', - pressedText: 'Dislike', pressed: false, }, ], diff --git a/pages/button-group/test.page.tsx b/pages/button-group/test.page.tsx index 1f48c26039..4d72766d0e 100644 --- a/pages/button-group/test.page.tsx +++ b/pages/button-group/test.page.tsx @@ -32,6 +32,12 @@ export default function ButtonGroupPage() { const [canSend, setCanSend] = useState(true); const [canRedo, setCanRedo] = useState(true); + const toggleTexts = { + like: ['Like', 'Liked'], + dislike: ['Dislike', 'Disliked'], + favorite: ['Add to favorites', 'Added to favorites'], + }; + const feedbackGroup: ButtonGroupProps.Group = { type: 'group', text: 'Vote', @@ -41,8 +47,7 @@ export default function ButtonGroupPage() { id: 'like', iconName: 'thumbs-up', pressedIconName: 'thumbs-up-filled', - text: 'Like', - pressedText: 'Liked', + text: feedback === 'like' ? toggleTexts.like[1] : toggleTexts.like[0], pressed: feedback === 'like', }, { @@ -50,8 +55,7 @@ export default function ButtonGroupPage() { id: 'dislike', iconName: 'thumbs-down', pressedIconName: 'thumbs-down-filled', - text: 'Dislike', - pressedText: 'Disliked', + text: feedback === 'dislike' ? toggleTexts.dislike[1] : toggleTexts.dislike[0], pressed: feedback === 'dislike', }, ], @@ -66,8 +70,7 @@ export default function ButtonGroupPage() { id: 'favorite', iconName: 'star', pressedIconName: 'star-filled', - text: 'Add to favorites', - pressedText: 'Added to favorites', + text: isFavorite ? toggleTexts.favorite[1] : toggleTexts.favorite[0], loading: loadingId === 'favorite', pressed: isFavorite, }, diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index a319dfca2f..d24c7fd2ab 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -3912,7 +3912,6 @@ use the \`id\` attribute, consider setting it on a parent element instead.", * \`id\` (string) - The unique identifier of the button, used as detail in \`onItemClick\` handler and to focus the button using \`ref.focus(id)\`. * \`pressed\` (boolean) - The toggle button pressed state. * \`text\` (string) - The name shown as a tooltip for this button. -* \`pressedText\` (string) - The name shown as a tooltip for this button in pressed state. * \`disabled\` (optional, boolean) - The disabled state indication for this button. * \`loading\` (optional, boolean) - The loading state indication for this button. * \`loadingText\` (optional, string) - The loading text announced to screen readers. diff --git a/src/button-group/__tests__/button-group-dev.test.tsx b/src/button-group/__tests__/button-group-dev.test.tsx index 25075be486..3a3fed7466 100644 --- a/src/button-group/__tests__/button-group-dev.test.tsx +++ b/src/button-group/__tests__/button-group-dev.test.tsx @@ -37,7 +37,7 @@ test.each([{ pressed: false }, { pressed: true }])( 'warns and renders some icon when no icon specified for icon toggle button, pressed=$pressed', ({ pressed }) => { const { wrapper } = renderButtonGroup({ - items: [{ type: 'icon-toggle-button', id: 'like', pressed, text: 'Like', pressedText: 'Liked' }], + items: [{ type: 'icon-toggle-button', id: 'like', pressed, text: 'Like' }], }); expect(warnOnce).toHaveBeenCalledTimes(2); @@ -62,7 +62,6 @@ test('uses non-pressed popover feedback if pressed is not provided', () => { id: 'like', pressed: true, text: 'Like', - pressedText: 'Liked', popoverFeedback: 'You like it!', }, ], @@ -93,14 +92,12 @@ test('handles toggle item click', () => { id: 'like', pressed: false, text: 'Like', - pressedText: 'Liked', }, { type: 'icon-toggle-button', id: 'dislike', pressed: true, text: 'Dislike', - pressedText: 'Disliked', }, ], onItemClick, diff --git a/src/button-group/__tests__/button-group-focus.test.tsx b/src/button-group/__tests__/button-group-focus.test.tsx index 9d8a3a3980..73af711439 100644 --- a/src/button-group/__tests__/button-group-focus.test.tsx +++ b/src/button-group/__tests__/button-group-focus.test.tsx @@ -19,7 +19,6 @@ const likeButton: ButtonGroupProps.IconToggleButton = { id: 'like', pressed: false, text: 'Like', - pressedText: 'Liked', iconName: 'thumbs-up', pressedIconName: 'thumbs-up-filled', popoverFeedback: 'No longer liking', diff --git a/src/button-group/__tests__/button-group-keyboard.test.tsx b/src/button-group/__tests__/button-group-keyboard.test.tsx index 6e60a77313..6eb0b2c548 100644 --- a/src/button-group/__tests__/button-group-keyboard.test.tsx +++ b/src/button-group/__tests__/button-group-keyboard.test.tsx @@ -18,7 +18,6 @@ const items: ButtonGroupProps.ItemOrGroup[] = [ id: 'like', pressed: false, text: 'Like', - pressedText: 'Liked', iconName: 'thumbs-up', pressedIconName: 'thumbs-up-filled', }, @@ -28,7 +27,6 @@ const items: ButtonGroupProps.ItemOrGroup[] = [ pressed: false, disabled: true, text: 'Dislike', - pressedText: 'Disliked', iconName: 'thumbs-down', pressedIconName: 'thumbs-down-filled', popoverFeedback: 'Disliked!', diff --git a/src/button-group/__tests__/button-group-states.test.tsx b/src/button-group/__tests__/button-group-states.test.tsx index 0b9d0be10c..bfa8f06eb2 100644 --- a/src/button-group/__tests__/button-group-states.test.tsx +++ b/src/button-group/__tests__/button-group-states.test.tsx @@ -19,7 +19,6 @@ const likeButton: ButtonGroupProps.IconToggleButton = { id: 'like', pressed: false, text: 'Like', - pressedText: 'Liked', iconName: 'thumbs-up', pressedIconName: 'thumbs-up-filled', popoverFeedback: 'No longer liking', @@ -57,7 +56,7 @@ test('toggle button has correct pressed label', () => { rerender({ items: [{ ...likeButton, pressed: true }] }); expect(wrapper.findToggleButtonById('like')!.getElement()).toHaveAttribute('aria-pressed', 'true'); - expect(wrapper.findToggleButtonById('like')!.getElement()).toHaveAccessibleName('Liked'); + expect(wrapper.findToggleButtonById('like')!.getElement()).toHaveAccessibleName('Like'); }); test('all item types can be disabled', () => { diff --git a/src/button-group/__tests__/button-group-tooltips.test.tsx b/src/button-group/__tests__/button-group-tooltips.test.tsx index 16679c9936..45b9c3a981 100644 --- a/src/button-group/__tests__/button-group-tooltips.test.tsx +++ b/src/button-group/__tests__/button-group-tooltips.test.tsx @@ -19,7 +19,6 @@ const likeButton: ButtonGroupProps.IconToggleButton = { id: 'like', pressed: false, text: 'Like', - pressedText: 'Liked', iconName: 'thumbs-up', pressedIconName: 'thumbs-up-filled', popoverFeedback: 'No longer liking', diff --git a/src/button-group/icon-toggle-button-item.tsx b/src/button-group/icon-toggle-button-item.tsx index 9379e07374..b8379db6d0 100644 --- a/src/button-group/icon-toggle-button-item.tsx +++ b/src/button-group/icon-toggle-button-item.tsx @@ -40,7 +40,6 @@ const IconToggleButtonItem = forwardRef( warnOnce('ButtonGroup', `Missing pressed icon for item with id: ${item.id}`); } - const tooltipContent = item.pressed ? item.pressedText : item.text; const feedbackContent = item.pressed ? item.pressedPopoverFeedback ?? item.popoverFeedback : item.popoverFeedback; const canShowTooltip = showTooltip && !item.disabled && !item.loading; const canShowFeedback = showTooltip && showFeedback && feedbackContent; @@ -58,7 +57,7 @@ const IconToggleButtonItem = forwardRef( pressedIconName={hasIcon ? item.pressedIconName : 'close'} pressedIconUrl={item.pressedIconUrl} pressedIconSvg={item.pressedIconUrl} - ariaLabel={tooltipContent} + ariaLabel={item.text} onChange={event => fireCancelableEvent(onItemClick, { id: item.id, pressed: event.detail.pressed })} ref={ref} data-testid={item.id} @@ -66,15 +65,14 @@ const IconToggleButtonItem = forwardRef( className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])} __title="" > - {tooltipContent} + {item.text} {(canShowTooltip || canShowFeedback) && ( {feedbackContent}) || - tooltipContent + (showFeedback && {feedbackContent}) || item.text } className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])} /> diff --git a/src/button-group/interfaces.ts b/src/button-group/interfaces.ts index 62db58392e..8a41384cf5 100644 --- a/src/button-group/interfaces.ts +++ b/src/button-group/interfaces.ts @@ -53,7 +53,6 @@ export interface ButtonGroupProps extends BaseComponentProps { * * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`. * * `pressed` (boolean) - The toggle button pressed state. * * `text` (string) - The name shown as a tooltip for this button. - * * `pressedText` (string) - The name shown as a tooltip for this button in pressed state. * * `disabled` (optional, boolean) - The disabled state indication for this button. * * `loading` (optional, boolean) - The loading state indication for this button. * * `loadingText` (optional, string) - The loading text announced to screen readers. @@ -114,7 +113,6 @@ export namespace ButtonGroupProps { id: string; text: string; pressed: boolean; - pressedText: string; disabled?: boolean; loading?: boolean; loadingText?: string;