fix(blade): radio helptext being negative (#2175)

* fix(blade): radio helptext being negative

* chore: update snaos

* Create poor-days-dress.md

* chore: update checkbox logic

* Create loud-shrimps-smoke.md

* chore: update

Author: anuraghazra

.changeset/loud-shrimps-smoke.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(blade): radio helptext being negative

packages/blade/src/components/Checkbox/Checkbox.tsx

@@ -193,9 +193,7 @@ const _Checkbox: React.ForwardRefRenderFunction<BladeElementRef, CheckboxProps>
     large: 'large',
   } as const;
 
-  // only show error when the self validation is set to error
-  // Since we don't want to show errorText inside the group
-  const showSupportingText = validationState !== 'error' && helpText;
+  const showSupportingText = helpText;
 
   const handleChange: OnChange = ({ isChecked, event, value }) => {
     if (isChecked) {

packages/blade/src/components/Radio/Radio.tsx

@@ -74,7 +74,7 @@ const _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (
   const _isDisabled = isDisabled ?? groupProps?.isDisabled;
   const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';
   const name = groupProps?.name;
-  const showHelpText = !hasError && helpText;
+  const showHelpText = helpText;
   const isReactNative = getPlatformType() === 'react-native';
   const _size = groupProps.size ?? size;
 
@@ -131,7 +131,7 @@ const _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (
           </BaseBox>
           {showHelpText && (
             <BaseBox marginLeft={helpTextLeftSpacing}>
-              <SelectorSupportText size={_size} isNegative={true} id={ids?.helpTextId}>
+              <SelectorSupportText size={_size} id={ids?.helpTextId}>
                 {helpText}
               </SelectorSupportText>
             </BaseBox>

packages/blade/src/components/Radio/__tests__/__snapshots__/Radio.ssr.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Radio /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:0px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO kCEKIT" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">,Select One</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fdoqPr"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 jObyqS" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kbZLYq"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx ewfYUx"><div id="radio-undefined-helptext-undefined" data-blade-component="box" class="BaseBox-bmPWx kTMxBD"><span class="StyledBaseText-dVBfTO gvbiie" data-blade-component="text">Apple Help</span></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 jObyqS" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kbZLYq"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Mango</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Select One</span></span></div></div></div></div></div>"`;
+exports[`<Radio /> should render with help text 1`] = `"<div id="root"><div data-blade-component="base-box" class="BaseBox-bmPWx"><div role="radiogroup" aria-labelledby="radio-group-undefined-label" data-blade-component="radio-group" class="BaseBox-bmPWx fnwmJW"><span style="width:auto;flex-shrink:0;margin-right:0px" id="radio-group-undefined-label" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO kCEKIT" data-blade-component="text">Select fruit</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">,Select One</p></div></div></div></span><div data-blade-component="base-box" class="BaseBox-bmPWx"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fdoqPr"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 jObyqS" value="apple"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kbZLYq"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Apple</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx ewfYUx"><div id="radio-undefined-helptext-undefined" data-blade-component="box" class="BaseBox-bmPWx kTMxBD"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Apple Help</span></div></div></div></label></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx hlbQIL"><div data-blade-component="base-box" class="BaseBox-bmPWx"><label data-blade-component="radio-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx fnwmJW"><div data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><input type="radio" name="radio-group-undefined" role="radio" aria-required="false" aria-invalid="false" aria-disabled="false" aria-checked="false" aria-describedby="radio-undefined-helptext-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 jObyqS" value="mango"/><div data-blade-component="radio-icon-wrapper" class="RadioIconWrapperweb__RadioIconWrapper-sc-1memw5n-0 kbZLYq"></div><div data-blade-component="base-box" class="BaseBox-bmPWx CzMgf"></div><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Mango</p></div></div></label></div></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Select One</span></span></div></div></div></div></div>"`;
 
 exports[`<Radio /> should render with help text 2`] = `
 .c10.c10.c10.c10.c10 {
@@ -169,23 +169,6 @@ exports[`<Radio /> should render with help text 2`] = `
 }
 
 .c15.c15.c15.c15.c15 {
-  color: hsla(4,74%,49%,1);
-  font-family: "Inter","Inter Fallback Arial",Arial;
-  font-size: 0.6875rem;
-  font-weight: 400;
-  font-style: italic;
-  -webkit-text-decoration-line: none;
-  text-decoration-line: none;
-  line-height: 1rem;
-  -webkit-letter-spacing: 0px;
-  -moz-letter-spacing: 0px;
-  -ms-letter-spacing: 0px;
-  letter-spacing: 0px;
-  margin: 0;
-  padding: 0;
-}
-
-.c18.c18.c18.c18.c18 {
   color: hsla(211,22%,56%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.6875rem;
@@ -440,7 +423,7 @@ exports[`<Radio /> should render with help text 2`] = `
             style="word-break:break-all"
           >
             <span
-              class="c18"
+              class="c15"
               data-blade-component="text"
             >
               Select One