From fb98a9672eeae38f4218e0570d779160dd70df31 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak <marcus@mkaz.com> Date: Fri, 23 Oct 2020 06:51:55 -0700 Subject: [PATCH 1/2] Add text prop for button and dropdownmenu Adds a new text property for button and dropdownmenu, if specified it will show the text in the button field. You could specify icon={ null } to have a text-only button. Used to support social links size menu in #25921 --- packages/components/src/button/index.js | 2 ++ packages/components/src/dropdown-menu/index.js | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index a5b3f8eb8bd2e..e04ae077890a7 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -40,6 +40,7 @@ export function Button( props, ref ) { shortcut, label, children, + text, __experimentalIsFocusable: isFocusable, ...additionalProps } = props; @@ -111,6 +112,7 @@ export function Button( props, ref ) { ref={ ref } > { icon && <Icon icon={ icon } size={ iconSize } /> } + { ! icon && text && <span>{ text }</span> } { children } </Tag> ); diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js index 2525939403799..c6e4c69436e18 100644 --- a/packages/components/src/dropdown-menu/index.js +++ b/packages/components/src/dropdown-menu/index.js @@ -43,6 +43,7 @@ function DropdownMenu( { toggleProps, menuProps, disableOpenOnArrowDown = false, + text, // The following props exist for backward compatibility. menuLabel, position, @@ -129,6 +130,7 @@ function DropdownMenu( { aria-haspopup="true" aria-expanded={ isOpen } label={ label } + text={ text } showTooltip={ toggleProps?.showTooltip ?? true } > { mergedToggleProps.children } From 9cb4ebf97100663240dfa86f96c9adbcb0bbc02f Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak <marcus@mkaz.com> Date: Fri, 23 Oct 2020 09:37:12 -0700 Subject: [PATCH 2/2] Update text rendering for both icon & text - Show text if specified regardless of icon, allows for icon & text - Switch text rendering, don't need a span tag, just use a fragment --- packages/components/src/button/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/button/index.js b/packages/components/src/button/index.js index e04ae077890a7..32d1b9853a6c2 100644 --- a/packages/components/src/button/index.js +++ b/packages/components/src/button/index.js @@ -112,7 +112,7 @@ export function Button( props, ref ) { ref={ ref } > { icon && <Icon icon={ icon } size={ iconSize } /> } - { ! icon && text && <span>{ text }</span> } + { text && <>{ text }</> } { children } </Tag> );