remove pressed text

pages/button-group/item-permutations.page.tsx

@@ -49,7 +49,6 @@ const itemPermutations = createPermutations<ButtonGroupProps.Item>([
     iconName: ['star'],
     pressedIconName: ['star-filled'],
     text: ['Add to favorites'],
-    pressedText: ['Added to favorites'],
     pressed: [false, true],
   },
 ]);

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,
     },
   ],

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,17 +47,15 @@ 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',
       },
       {
         type: 'icon-toggle-button',
         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,
       },

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.

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,

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',

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!',

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', () => {

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',

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,23 +57,22 @@ 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}
           data-itemid={item.id}
           className={clsx(testUtilStyles.item, testUtilStyles['button-group-item'])}
           __title=""
         >
-          {tooltipContent}
+          {item.text}
         </InternalToggleButton>
         {(canShowTooltip || canShowFeedback) && (
           <Tooltip
             trackRef={containerRef}
             trackKey={item.id}
             value={
-              (showFeedback && <InternalLiveRegion tagName="span">{feedbackContent}</InternalLiveRegion>) ||
-              tooltipContent
+              (showFeedback && <InternalLiveRegion tagName="span">{feedbackContent}</InternalLiveRegion>) || item.text
             }
             className={clsx(testUtilStyles.tooltip, testUtilStyles['button-group-tooltip'])}
           />

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;