From a99442eb661063e7ba34c5284cfa43fff85c44e8 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Mon, 6 Jul 2026 13:18:38 +0600 Subject: [PATCH] feat: add reverse position support for the bordered radio button variant - Anchor the selection control at left-3 (mirroring the default right-3 inset) instead of left-0 + right-3, which stretched the control wrapper across the card and pinned it flush against the border. - Mirror the horizontal padding when reversed (pl-12 radio / pl-16 switch) instead of the hardcoded pr-12, and drop the ml-4/ml-10 label margin hacks. - Wrap label heading/description with overflow-wrap:anywhere so long unbroken words no longer overflow the bordered card in narrow containers. - Add missing 1.5px borderWidth to the theme scale so the radio and checkbox !border-1.5 class resolves (previously fell back to the 3px browser default). - Add bordered reverse-position stories for radio and switch variants. Closes brainstormforce/surerank#1905 (SUR-488) --- changelog.txt | 3 + .../radio-button/radio-button.stories.tsx | 75 +++++++++++++++++++ src/components/radio-button/radio-button.tsx | 22 ++++-- src/theme/default-config.js | 1 + 4 files changed, 93 insertions(+), 8 deletions(-) diff --git a/changelog.txt b/changelog.txt index 9570429d..207fc75a 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,3 +1,6 @@ +Version x.x.x - xth July, 2026 +- Improvement: Atom - Radio Button: Added reverse position support. + Version 1.7.13 - 11th June, 2026 - Fix: Resolved `patch-package: command not found` install failure when the library is consumed as a git dependency. `patch-package` is now a runtime dependency so the bundled Lexical Shadow DOM patches are applied in consumer projects, which is required for the Editor Input mention menu Shadow DOM fix to work. diff --git a/src/components/radio-button/radio-button.stories.tsx b/src/components/radio-button/radio-button.stories.tsx index ddd9bb2c..bb7c97df 100644 --- a/src/components/radio-button/radio-button.stories.tsx +++ b/src/components/radio-button/radio-button.stories.tsx @@ -157,6 +157,81 @@ RadioWithBorderSmallSize.args = { size: 'sm', }; +const RadioWithBorderReversePositionTemplate: StoryFn = ( + args +) => { + const [ value, setValue ] = useState( args.value || args.defaultValue ); + + return ( + { + setValue( val as string ); + } } + { ...args } + > + { [ 1, 2, 3, 4, 5, 6 ].map( ( num ) => ( + + ) ) } + + ); +}; + +export const RadioWithBorderReversePosition = + RadioWithBorderReversePositionTemplate.bind( {} ); +RadioWithBorderReversePosition.args = { + size: 'md', +}; + +const SwitchWithBorderReversePositionTemplate: StoryFn< + RadioButtonGroupProps +> = ( args ) => { + const [ value, setValue ] = useState( [] ); + + return ( + { + setValue( val as string[] ); + } } + { ...args } + > + { [ 1, 2, 3, 4 ].map( ( num ) => ( + + ) ) } + + ); +}; + +export const SwitchWithBorderReversePosition = + SwitchWithBorderReversePositionTemplate.bind( {} ); +SwitchWithBorderReversePosition.args = { + size: 'md', +}; + const defaultRadioButtonGroupData = [ { id: '1', diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx index e5c531cf..19453abe 100644 --- a/src/components/radio-button/radio-button.tsx +++ b/src/components/radio-button/radio-button.tsx @@ -101,7 +101,7 @@ export interface RadioButtonProps extends RadioButtonCommonProps { inlineIcon?: boolean; /** Hides the selection indicator */ hideSelection?: boolean; - /** Reverses the position of icon and label */ + /** Places the selection control (radio/switch) on the left and the label on the right. Works with the bordered variant (`borderOn`) */ reversePosition?: boolean; /** Adds a border around the button */ borderOn?: boolean; @@ -340,7 +340,6 @@ export const RadioButtonComponent = ( 'space-y-3': size === 'sm', 'space-y-4': size === 'md', }, - reversePosition && ( useSwitch ? 'ml-10' : 'ml-4' ), inlineIcon && 'flex gap-2', inlineIcon && ! label.description && 'items-center' ) } @@ -358,7 +357,7 @@ export const RadioButtonComponent = ( >

{ label.description && ( -

+

{ label.description }

) } @@ -405,6 +404,13 @@ export const RadioButtonComponent = ( } }; + // Reserve space on the control side. Default: control on the right (pr-12). + // Reversed: control on the left; the switch needs more room than the radio. + let controlSpacingClass = 'pr-12'; + if ( reversePosition ) { + controlSpacingClass = useSwitch ? 'pl-16' : 'pl-12'; + } + const paddingClasses = { 'pl-3.5 pr-2.5 py-2.5': size === 'sm' && ! ( icon && useSwitch ), 'p-3': size === 'sm' && ( ( icon && useSwitch ) || ( icon && badgeItem ) ), @@ -425,7 +431,7 @@ export const RadioButtonComponent = ( checkedValue && 'outline-border-interactive', paddingClasses, - 'pr-12', + controlSpacingClass, isDisabled && 'cursor-not-allowed opacity-40', buttonWrapperClasses ) } @@ -457,10 +463,10 @@ export const RadioButtonComponent = ( ) }