Update label spacing on various components (#416)

* update label spacing on select component

* update label spacing on taggroup component

* update label spacing on textfield component

* simplify isRequired handling and remove unused class

* update label spacing on textarea component

* simplify isRequired handling and remove unused class

Author: mkernohanbc

packages/react-components/src/components/Select/Select.css

@@ -1,7 +1,6 @@
 .bcds-react-aria-Select {
   display: flex;
   flex-direction: column;
-  gap: var(--layout-margin-small);
   align-items: flex-start;
   /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */
   max-width: -moz-available;
@@ -12,6 +11,7 @@
 .bcds-react-aria-Select--Label {
   color: var(--typography-color-secondary);
   font: var(--typography-regular-small-body);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
 }
 .bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {
   color: var(--typography-color-disabled);

packages/react-components/src/components/TagGroup/TagGroup.css

@@ -7,7 +7,7 @@
 .bcds-react-aria-TagGroup--Text-description,
 .bcds-react-aria-TagGroup--Text-error {
   display: block;
-  margin: var(--layout-margin-small) var(--layout-margin-none);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
 }
 
 .bcds-react-aria-TagGroup--Text-error {

packages/react-components/src/components/TextArea/TextArea.css

@@ -11,17 +11,14 @@
 .bcds-react-aria-TextArea--Label {
   font: var(--typography-regular-small-body);
   color: var(--typography-color-primary);
-}
-
-.bcds-react-aria-TextArea--Label > .required {
-  color: var(--typography-color-secondary);
-  padding: var(--layout-padding-none) var(--layout-padding-xsmall);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
 }
 
 /* Styles for the description and character count slot below the input field */
 .bcds-react-aria-TextArea--Description {
   display: grid;
   gap: var(--layout-margin-medium);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
   font: var(--typography-regular-small-body);
   color: var(--typography-color-secondary);
 }
@@ -51,7 +48,6 @@
     var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
   padding: var(--layout-padding-small) 12px;
-  margin: var(--layout-margin-small) var(--layout-margin-none);
 }
 
 /* Text input field */

packages/react-components/src/components/TextArea/TextArea.tsx

@@ -44,8 +44,7 @@ export default function TextArea({
         <>
           {label && (
             <Label className="bcds-react-aria-TextArea--Label">
-              {label}
-              {isRequired && <span className="required">(required)</span>}
+              {isRequired ? `${label} (required)` : label}
             </Label>
           )}
           <div className="bcds-react-aria-TextArea--Container">

packages/react-components/src/components/TextField/TextField.css

@@ -11,6 +11,7 @@
 .bcds-react-aria-TextField--Label {
   font: var(--typography-regular-small-body);
   color: var(--typography-color-primary);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
 }
 
 .bcds-react-aria-TextField--Label .required {
@@ -22,6 +23,7 @@
 .bcds-react-aria-TextField--Description {
   font: var(--typography-regular-small-body);
   color: var(--typography-color-secondary);
+  padding: var(--layout-padding-xsmall) var(--layout-padding-none);
 }
 
 /* Styles for the input field container */
@@ -36,7 +38,6 @@
   border: var(--layout-border-width-small) solid
     var(--surface-color-border-default);
   border-radius: var(--layout-border-radius-medium);
-  margin: var(--layout-margin-small) var(--layout-margin-none);
   padding: var(--layout-padding-small) 12px;
 }