bug (radio group): right to left legend alignment fix (#5025)

* bug (radio group): right to left legend alignment fix

* bug (radio group): add docs example and fix release notes

* bug (radio group): add extra line

* bug (radio group): fix regression on checkbox

* bug (radio group): pr comment addressed

* bug (radio group): pr comment vrt regression fix

Co-authored-by: Sang Kyung Suh <[email protected]>

Author: laurensuh

RELEASENOTES.md

@@ -23,6 +23,13 @@
 #### Changed
 - Removed `@noflip` annotation from nubbins to make RTL behavior consistent
 
+### [Radio Group](https://www.lightningdesignsystem.com/components/radio-group)
+#### Added
+- Added styling changes to support radio group with help text icon.
+- Added examples: Required with help text icon and Right to left required with help text icon to documentation
+#### Fixed
+- Right to left legend to be right aligned and match the alignment of content.
+
 ### [Tiles](https://www.lightningdesignsystem.com/components/tiles)
 #### Added
 - Added annotations for tile board CSS classes.

ui/components/form-element/base/_index.scss

@@ -28,6 +28,11 @@
   padding-top: $spacing-xx-small;
   margin-bottom: $spacing-xxx-small;
 
+  @include rtl() {
+    /*! @noflip */
+    padding-left: $spacing-x-small;
+  }
+
   &:empty {
     margin: 0;
   }
@@ -43,6 +48,11 @@
   clear: left;
   position: relative;
 
+  @include rtl() {
+    /*! @noflip */
+    clear: right;
+  }
+
   // Force radios and checkboxes to be on own line when there are multiples in a group
   .slds-radio,
   .slds-checkbox {
@@ -123,6 +133,14 @@
 .slds-form-element__legend {
   font-weight: $font-weight-bold;
   float: left; // Required to be float: left to accommodate for help-text icon
+
+  @include rtl() {
+    /*! @noflip */
+    float: right;
+
+    /*! @noflip */
+    padding-right: 0;
+  }
 }
 
 /**

ui/components/radio-group/RELEASENOTES.md

@@ -4,6 +4,17 @@
 
 <!-- ## [Unreleased] -->
 
+## 2.18.0
+
+### Added
+
+- Added styling changes to support radio group with help text icon.
+- Added examples: Required with help text icon and Right to left required with help text icon to documentation
+
+### Fixed
+
+- Right to left legend to be right aligned and match the alignment of content.
+
 ## 2.17.5
 
 ### Fixed

ui/components/radio-group/base/_index.scss

@@ -151,4 +151,17 @@
 .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux,
 .slds-radio [type='radio'] + .slds-radio__label .slds-radio--faux {
   margin-right: $spacing-x-small;
+
+  @include rtl() {
+    /*! @noflip */
+    margin-right: 0;
+    margin-left: $spacing-x-small;
+  }
+}
+
+.slds-radio .slds-form-element__label {
+  @include rtl() {
+    /*! @noflip */
+    padding-right: 0;
+  }
 }

ui/components/radio-group/base/example.jsx

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from '../../../shared/helpers';
 import { FormElementControl } from '../../form-element/';
+import ButtonIcon from '../../button-icons/';
+
 
 /// ////////////////////////////////////////
 // Partial(s)
@@ -183,6 +185,30 @@ export let states = [
       </Fieldset>
     )
   },
+  {
+    id: 'required-help-text-icon',
+    label: 'Required with Help Text Icon',
+    element: (
+      <Fieldset>
+        <Legend>
+          <abbr className="slds-required" title="required">
+            *
+          </abbr>{' '}
+          Radio Group Label
+        </Legend>
+        <div className="slds-form-element__icon">
+          <ButtonIcon
+            symbol="info"
+            assistiveText="Help"
+          />
+        </div>
+        <FormElementControl>
+          <Radio checked label="Radio Label One" />
+          <Radio label="Radio Label Two" />
+        </FormElementControl>
+      </Fieldset>
+    )
+  },
   {
     id: 'rtl',
     label: 'Right to Left',
@@ -197,6 +223,32 @@ export let states = [
         </Fieldset>
       </div>
     )
+  },
+  {
+    id: 'rtl-required-help-text-icon',
+    label: 'Right to Left Required with Help Text Icon',
+    element: (
+      <div dir="rtl">
+        <Fieldset>
+          <Legend>
+            <abbr className="slds-required" title="required">
+              *
+            </abbr>{' '}
+            Radio Group Label
+          </Legend>
+          <div className="slds-form-element__icon">
+            <ButtonIcon
+              symbol="info"
+              assistiveText="Help"
+            />
+          </div>
+          <FormElementControl>
+            <Radio checked label="Radio Label One" name="rtl-required" />
+            <Radio label="Radio Label Two" name="rtl-required" />
+          </FormElementControl>
+        </Fieldset>
+      </div>
+    )
   }
 ];
 

ui/components/radio-group/docs.mdx

@@ -59,10 +59,18 @@ When disabling a radio button, either the entire group must be disabled or if on
 
 <CodeView>{getDisplayElementById(Base.states, 'error')}</CodeView>
 
+### Required with Help Text Icon
+
+<CodeView>{getDisplayElementById(Base.states, 'required-help-text-icon')}</CodeView>
+
 ### Right to Left
 
 <CodeView>{getDisplayElementById(Base.states, 'rtl')}</CodeView>
 
+### Right to Left Required with Help Text Icon
+
+<CodeView>{getDisplayElementById(Base.states, 'rtl-required-help-text-icon')}</CodeView>
+
 ## Styling Hooks Overview
 
 <StylingHooksTable name="radio-group" type="component" />