From f10c9151cb63850484c42f5c5753c17a6a3490f8 Mon Sep 17 00:00:00 2001 From: BabuTechBsf Date: Tue, 15 Oct 2024 19:01:00 +0530 Subject: [PATCH 1/4] added border changes --- .../cards/widget-blocks.stories.jsx | 2 +- src/components/radio-button/radio-button.jsx | 4 +-- .../dashboard-astra.stories.js | 2 +- .../dashboard-spectra.stories.js | 2 +- .../onboarding-backup.stories.js | 28 +++++++++---------- .../onboarding-import.stories.js | 3 ++ .../onboarding-setup-tools.stories.js | 12 ++++---- 7 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/components/cards/widget-blocks.stories.jsx b/src/components/cards/widget-blocks.stories.jsx index d9c9817f..de12b19b 100644 --- a/src/components/cards/widget-blocks.stories.jsx +++ b/src/components/cards/widget-blocks.stories.jsx @@ -280,7 +280,7 @@ const Template1 = () => { useSwitch={ option.useSwitch } className="px-2" badgeItem={ option.bagde } - buttonWrapperClasses="bg-background-primary" + buttonWrapperClasses="bg-background-primary border-0" /> ) ) } diff --git a/src/components/radio-button/radio-button.jsx b/src/components/radio-button/radio-button.jsx index 6b426df9..5cb80bcf 100644 --- a/src/components/radio-button/radio-button.jsx +++ b/src/components/radio-button/radio-button.jsx @@ -280,13 +280,13 @@ const RadioButtonComponent = ( 'inline-flex items-center relative cursor-pointer transition-all duration-300', !! label && 'items-start justify-between', minWidth && 'min-w-[180px]', - buttonWrapperClasses, borderOn && 'border border-border-subtle border-solid rounded-md shadow-sm hover:ring-2 hover:ring-border-interactive', borderOn && checkedValue && 'ring-2 ring-border-interactive', size === 'sm' ? 'px-3 py-3' : 'px-4 py-4', 'pr-12', - isDisabled && 'cursor-not-allowed opacity-40' + isDisabled && 'cursor-not-allowed opacity-40', + buttonWrapperClasses ) } htmlFor={ radioButtonId } onClick={ handleLabelClick } // Toggle switch when label is clicked diff --git a/src/templates/dashboard-astra/dashboard-astra.stories.js b/src/templates/dashboard-astra/dashboard-astra.stories.js index d23101d3..7add03b2 100644 --- a/src/templates/dashboard-astra/dashboard-astra.stories.js +++ b/src/templates/dashboard-astra/dashboard-astra.stories.js @@ -489,7 +489,7 @@ export const AstraDashboard = () => { className="px-2" badgeItem={ option.badge } disabled={ option.disabled } - buttonWrapperClasses="bg-background-primary" + buttonWrapperClasses="bg-background-primary border-0" /> ) ) } diff --git a/src/templates/dashboard-spectra/dashboard-spectra.stories.js b/src/templates/dashboard-spectra/dashboard-spectra.stories.js index 9a8d392e..2768bf9c 100644 --- a/src/templates/dashboard-spectra/dashboard-spectra.stories.js +++ b/src/templates/dashboard-spectra/dashboard-spectra.stories.js @@ -550,7 +550,7 @@ export const SpectraDashboard = () => { useSwitch={ option.useSwitch } className="px-2" badgeItem={ option.bagde } - buttonWrapperClasses="bg-background-primary" + buttonWrapperClasses="bg-background-primary border-0" /> ) ) } diff --git a/src/templates/onboarding-backup/onboarding-backup.stories.js b/src/templates/onboarding-backup/onboarding-backup.stories.js index efad9ec3..a2282fce 100644 --- a/src/templates/onboarding-backup/onboarding-backup.stories.js +++ b/src/templates/onboarding-backup/onboarding-backup.stories.js @@ -96,7 +96,7 @@ const Template = ( args ) => { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> diff --git a/src/templates/onboarding-import/onboarding-import.stories.js b/src/templates/onboarding-import/onboarding-import.stories.js index 820d5df8..4e288309 100644 --- a/src/templates/onboarding-import/onboarding-import.stories.js +++ b/src/templates/onboarding-import/onboarding-import.stories.js @@ -66,6 +66,7 @@ const Template = ( args ) => { heading: `SEOPress`, } } borderOn={ true } + buttonWrapperClasses={ 'border-0' } /> { heading: `AIO SEO`, } } borderOn={ true } + buttonWrapperClasses={ 'border-0' } /> { heading: `Yoast SEO`, } } borderOn={ true } + buttonWrapperClasses={ 'border-0' } /> diff --git a/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.js b/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.js index 7336b72c..a6d53958 100644 --- a/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.js +++ b/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.js @@ -97,7 +97,7 @@ const Template = ( args ) => { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> { borderOn icon={ } onChange={ () => {} } - buttonWrapperClasses="bg-white" + buttonWrapperClasses="bg-white border-0" /> From eb0e841244065f1834853e32c263179379a7fb8c Mon Sep 17 00:00:00 2001 From: BabuTechBsf Date: Tue, 15 Oct 2024 19:01:31 +0530 Subject: [PATCH 2/4] added lints --- src/components/editor-input/editor-input.stories.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/editor-input/editor-input.stories.jsx b/src/components/editor-input/editor-input.stories.jsx index fd3e47aa..2c7af3ec 100644 --- a/src/components/editor-input/editor-input.stories.jsx +++ b/src/components/editor-input/editor-input.stories.jsx @@ -130,7 +130,8 @@ export default { }, wrapperClassName: { name: 'wrapperClassName', - description: 'Custom class name to be added to the editor input wrapper.', + description: + 'Custom class name to be added to the editor input wrapper.', control: 'text', table: { type: { summary: 'string' }, From 820750f5cefe5ef82fc366a1d2ac8a75f5209dcd Mon Sep 17 00:00:00 2001 From: BabuTechBsf Date: Tue, 15 Oct 2024 22:40:47 +0530 Subject: [PATCH 3/4] added tooltip --- src/components/radio-button/radio-button.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/radio-button/radio-button.jsx b/src/components/radio-button/radio-button.jsx index 5cb80bcf..c4321a99 100644 --- a/src/components/radio-button/radio-button.jsx +++ b/src/components/radio-button/radio-button.jsx @@ -306,10 +306,12 @@ const RadioButtonComponent = (
Date: Tue, 15 Oct 2024 22:57:12 +0530 Subject: [PATCH 4/4] added flex changes --- src/components/radio-button/radio-button.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/radio-button/radio-button.jsx b/src/components/radio-button/radio-button.jsx index c4321a99..9317b1af 100644 --- a/src/components/radio-button/radio-button.jsx +++ b/src/components/radio-button/radio-button.jsx @@ -222,10 +222,11 @@ const RadioButtonComponent = ( className={ cn( ! inlineIcon && 'space-y-1.5 mt-[2px]', reversePosition && ( useSwitch ? 'ml-10' : 'ml-4' ), - inlineIcon && 'flex gap-2' + inlineIcon && 'flex gap-2', + inlineIcon && ! label.description && 'items-center' ) } > - { icon && { icon } } + { icon && <>{ icon } }