Inherit link color in components that support validation states (#492)

react-ui-org · Nov 27, 2024 · 810dee6 · 810dee6
1 parent d288c21
commit 810dee6
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 9 deletions.
diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md
@@ -18,7 +18,13 @@ React.createElement(() => {
   return (
     <CheckboxField
       checked={agree}
-      label="I agree"
+      label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
       onChange={() => setAgree(!agree)}
     />
   );
@@ -132,20 +138,44 @@ React.createElement(() => {
     <>
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         validationState="valid"
       />
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         validationState="warning"
-        validationText="Please wait 10 minutes until we verify your data."
+        validationText={(
+          <>
+            Please wait 10 minutes until we verify your data.
+            {' '}
+            <TextLink href="#" label="Cancel" />
+          </>
+        )}
       />
       <CheckboxField
         checked={agree}
-        label="I have read and agree with terms and conditions"
+        label={(
+          <>
+            I have read and agree with
+            {' '}
+            <TextLink href="#" label="terms and conditions" />
+          </>
+        )}
         onChange={() => setAgree(!agree)}
         required
         validationState="invalid"

diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
@@ -388,7 +388,13 @@ have.
   label="User name"
   onChange={() => {}}
   validationState="warning"
-  validationText="Account with this name already exists, pick a different one."
+  validationText={(
+    <>
+      Account with this name already exists, pick a different one.
+      {' '}
+      <TextLink href="#" label="Forgot your password?" />
+    </>
+  )}
   value="joe"
   required
 />
@@ -411,7 +417,13 @@ have.
   label="User name"
   onChange={() => {}}
   validationState="warning"
-  validationText="Account with this name already exists, pick a different one."
+  validationText={(
+    <>
+      Account with this name already exists, pick a different one.
+      {' '}
+      <TextLink href="#" label="Forgot your password?" />
+    </>
+  )}
   variant="filled"
   value="joe"
   required

diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md
@@ -148,7 +148,15 @@ React.createElement(() => {
         label="Listen in studio quality"
         onChange={() => setStudioQuality(!studioQuality)}
         validationState="invalid"
-        validationText="Please upgrade your plan to make this option available."
+        validationText={(
+          <>
+            Please
+            {' '}
+            <TextLink href="#" label="upgrade your plan" />
+            {' '}
+            to make this option available.
+          </>
+        )}
       />
     </>
   );

diff --git a/src/styles/theme/_form-fields.scss b/src/styles/theme/_form-fields.scss
@@ -30,6 +30,25 @@ $horizontal-label-vertical-alignment: var(--rui-FormField--horizontal__label__ve
 $horizontal-field-vertical-alignment: var(--rui-FormField--horizontal__field__vertical-alignment);
 $horizontal-full-width-label-width: var(--rui-FormField--horizontal--full-width__label__width);
 
+// Form fields: links in validation states
+$link-validation-colors: (
+    invalid: (
+        default: var(--rui-color-feedback-success),
+        hover: var(--rui-color-feedback-success-hover),
+        active: var(--rui-color-feedback-success-active),
+    ),
+    valid: (
+        default: var(--rui-color-feedback-valid),
+        hover: var(--rui-color-feedback-valid-hover),
+        active: var(--rui-color-feedback-valid-active),
+    ),
+    warning: (
+        default: var(--rui-color-feedback-warning),
+        hover: var(--rui-color-feedback-warning-hover),
+        active: var(--rui-color-feedback-warning-active),
+    ),
+);
+
 // Form fields: disabled state
 $disabled-cursor: var(--rui-FormField--disabled__cursor);
 $disabled-opacity: var(--rui-FormField--disabled__opacity);

diff --git a/src/styles/tools/form-fields/_variants.scss b/src/styles/tools/form-fields/_variants.scss
@@ -70,7 +70,7 @@
             + "Choose one of #{map.keys(settings.$themeable-variant-states)}.";
     }
 
-    $themeable-states: map.get(map.get(settings.$themeable-variant-states, $type), $variant);
+    $themeable-states: map.get(settings.$themeable-variant-states, $type, $variant);
 
     @if list.index($themeable-states, "hover") {
         @include _generate-custom-properties($type, $variant, "default");
@@ -143,5 +143,9 @@
 }
 
 @mixin validation($variant) {
+    --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
+    --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
+    --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
+
     @include _get-theme(validation, $variant);
 }