Merge pull request #333 from Tap30/feat/add-hide-focus-state-for-text…

…-inputs fix(text-inputs): add `no-focus-visible` prop
Tap30 · Jan 6, 2025 · 53960fd · 53960fd
2 parents 9083a55 + bdfa657
commit 53960fd
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/packages/web-components/src/base-text-input/base-text-input.style.ts b/packages/web-components/src/base-text-input/base-text-input.style.ts
@@ -119,7 +119,7 @@ export default css`
     --input-support-color: var(--tapsi-color-content-negative);
   }
 
-  .control:not(.error):focus-within {
+  .control:not(.no-active-border):not(.error):focus-within {
     --input-control-bg-color: var(--tapsi-color-surface-secondary);
     --input-control-border-color: var(--tapsi-color-border-inverse-primary);
     --input-support-color: var(--tapsi-color-content-secondary);

diff --git a/packages/web-components/src/base-text-input/base-text-input.ts b/packages/web-components/src/base-text-input/base-text-input.ts
@@ -115,6 +115,12 @@ export abstract class BaseTextInput extends BaseInput {
   @property()
   public size: "sm" | "md" = "md";
 
+  /**
+   * Whether to show the active border around the input or not.
+   */
+  @property({ type: Boolean, attribute: "no-active-border" })
+  public noActiveBorder = false;
+
   @state()
   private _dirty = false;
 
@@ -344,6 +350,7 @@ export abstract class BaseTextInput extends BaseInput {
       error: this.hasError(),
       readonly: this.readOnly,
       rounded: this.rounded,
+      "no-active-border": this.noActiveBorder,
     });
 
     return html`

diff --git a/packages/web-components/src/text-area/index.ts b/packages/web-components/src/text-area/index.ts
@@ -74,6 +74,7 @@ export { BaseTextInputSlots as Slots };
  * @prop {"sm" | "md"} [size="md"] - The size of the input.
  * @prop {boolean} [hide-label=false] - Whether to hide the label or not.
  * @prop {boolean} [rounded=false] - Whether the input is rounded or not.
+ * @prop {boolean} [no-active-border=false] - Whether to show the active border around the input or not.
  * @prop {number} [rows=2] -
  * The number of rows to display for the text input.
  * Defaults to 2.

diff --git a/packages/web-components/src/text-field/index.ts b/packages/web-components/src/text-field/index.ts
@@ -73,6 +73,7 @@ export { BaseTextInputSlots as Slots };
  * @prop {"sm" | "md"} [size="md"] - The size of the input.
  * @prop {boolean} [hide-label=false] - Whether to hide the label or not.
  * @prop {boolean} [rounded=false] - Whether the input is rounded or not.
+ * @prop {boolean} [no-active-border=false] - Whether to show the active border around the input or not.
  * @prop {string} [type="text"] -
  * The `<input>` type to use, defaults to "text". The type greatly changes how
  * the text field behaves.