Merge branch 'develop' into add-notice-component

dequelabs · Aug 2, 2023 · a425f9d · a425f9d
2 parents a355e8e + 10f53c9
commit a425f9d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/docs/pages/components/Tooltip.mdx b/docs/pages/components/Tooltip.mdx
@@ -15,6 +15,12 @@ import { Tooltip } from '@deque/cauldron-react'
 
 Cauldron's tooltip relies on [Popper](https://popper.js.org/) to position tooltips dynamically. Tooltips can be triggered from any focusable element via a `target` attribute pointed to an HTMLElement or React ref object.
 
+<Note>
+
+`Tooltip` is intended to be used with elements that are interactive or are keyboard accessible such as buttons or links. For non-interactive elements such as informational tooltips attached to an icon, consider using [TooltipTabstop](./TooltipTabstop) instead.
+
+</Note>
+
 ### Text Tooltips
 
 Text Tooltips are the default variant and are intended to show short single-line text hints.

diff --git a/packages/styles/forms.css b/packages/styles/forms.css
@@ -310,7 +310,7 @@ textarea.Field--has-error:focus:hover,
   box-sizing: border-box;
   font-size: var(--text-size-small);
   color: var(--field-content-color);
-  min-width: var(--input-min-width);
+  min-width: min(var(--input-min-width), 100%);
 }
 
 .Field__text-input[disabled],
@@ -323,7 +323,7 @@ textarea.Field--has-error:focus:hover,
   display: block;
   min-height: 56px;
   font-size: var(--text-size-small);
-  min-width: var(--input-min-width);
+  min-width: min(var(--input-min-width), 100%);
   padding: var(--space-half);
   max-width: 500px;
   color: var(--field-content-color);