feat (radio-group): add in tooltip example (#5029)

* feat (radio-group): add in tooltip example

* fix(radio-group): Add in example with tooltip

* fix(radio-group): Add padding-top for tooltip

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

Author: laurensuh

RELEASENOTES.md

@@ -48,6 +48,7 @@
 #### 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
+- Added required with help text icon and tooltip example
 #### Fixed
 - Right to left legend to be right aligned and match the alignment of content.
 

ui/components/radio-group/RELEASENOTES.md

@@ -10,6 +10,7 @@
 
 - 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
+- Added required with help text icon and tooltip example
 
 ### Fixed
 

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

@@ -5,10 +5,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import _ from '../../../shared/helpers';
-import { FormElementControl } from '../../form-element/';
+import { FormElementControl, FormElementTooltip } from '../../form-element/';
 import ButtonIcon from '../../button-icons/';
 
-
 /// ////////////////////////////////////////
 // Partial(s)
 /// ////////////////////////////////////////
@@ -215,6 +214,27 @@ export let states = [
       </Fieldset>
     )
   },
+  {
+    id: 'required-help-text-icon-tooltip',
+    label: 'Required with Help Text Icon with Tooltip',
+    demoStyles: 'padding-top: 4rem',
+    storybookStyles: true,
+    element: (
+      <Fieldset>
+        <Legend>
+          <abbr className="slds-required" title="required">
+            *
+          </abbr>{' '}
+          Radio Group Label
+        </Legend>
+        <FormElementTooltip showTooltip="true" />
+        <FormElementControl>
+          <Radio checked label="Radio Label One" />
+          <Radio label="Radio Label Two" />
+        </FormElementControl>
+      </Fieldset>
+    )
+  },
   {
     id: 'rtl',
     label: 'Right to Left',

ui/components/radio-group/docs.mdx

@@ -2,7 +2,7 @@ import CodeView from '../../../shared/components/CodeView';
 import DisplayColumn from '../../../shared/components/DisplayColumn';
 import DisplayGrid from '../../../shared/components/DisplayGrid';
 import Blockquote from '../../../shared/components/Blockquote';
-import { getDisplayElementById } from '../../shared/helpers';
+import { getDisplayElementById, getDemoStylesById } from '../../shared/helpers';
 import { MobileNotice, MobileBlurb } from '../../shared/doc-text';
 import * as Base from './base/example';
 import StylingHooksTable from '../../../shared/components/StylingHooksTable';
@@ -63,6 +63,12 @@ When disabling a radio button, either the entire group must be disabled or if on
 
 <CodeView>{getDisplayElementById(Base.states, 'required-help-text-icon')}</CodeView>
 
+### Required with Help Text Icon and Tooltip
+
+<CodeView demoStyles={getDemoStylesById(Base.states, 'required-help-text-icon-tooltip')}>
+  {getDisplayElementById(Base.states, 'required-help-text-icon-tooltip')}
+</CodeView>
+
 ### Right to Left
 
 <CodeView>{getDisplayElementById(Base.states, 'rtl')}</CodeView>