From 507ed8e02392afcdc59e93a5ec4f40283c185caa Mon Sep 17 00:00:00 2001 From: shryoo-ibm <106095943+shryoo-ibm@users.noreply.github.com> Date: Thu, 30 Mar 2023 14:09:17 -0400 Subject: [PATCH] feat(PasswordInput): add typescript types to PasswordInput (#13311) * refactor: add types to props in PasswordInput * refactor: make separate excluded attributes type * docs: contributor information * fix: remove feature condition and deprecated size --------- Co-authored-by: Taylor Jones Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .all-contributorsrc | 9 + README.md | 1 + .../{PasswordInput.js => PasswordInput.tsx} | 179 ++++++++++++++++-- 3 files changed, 178 insertions(+), 11 deletions(-) rename packages/react/src/components/TextInput/{PasswordInput.js => PasswordInput.tsx} (68%) diff --git a/.all-contributorsrc b/.all-contributorsrc index 0f67da6ae9eb..ce6cac01955b 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -1105,6 +1105,15 @@ "code", "a11y" ] + }, + { + "login": "shryoo-ibm", + "name": "Seong-Hyun Ryoo", + "avatar_url": "https://avatars.githubusercontent.com/u/106095943?s=96&v=4", + "profile": "https://seongryoo.github.io", + "contributions": [ + "code" + ] } ], "commitConvention": "none" diff --git a/README.md b/README.md index dae2ca7a9190..3896cffaf916 100644 --- a/README.md +++ b/README.md @@ -230,6 +230,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Bianca Sparxs
💻
Mahmoud Abdulazim
💻
Dave Steinberg
💻 +
Seong-Hyun Ryoo
💻
Pratik Karad
💻 ️️️️♿️ diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.tsx similarity index 68% rename from packages/react/src/components/TextInput/PasswordInput.js rename to packages/react/src/components/TextInput/PasswordInput.tsx index 7ce3d1f11249..d046f6fb99ea 100644 --- a/packages/react/src/components/TextInput/PasswordInput.js +++ b/packages/react/src/components/TextInput/PasswordInput.tsx @@ -1,14 +1,170 @@ -import React, { useContext, useEffect, useState } from 'react'; +import React, { + InputHTMLAttributes, + useContext, + useEffect, + useState, +} from 'react'; import classNames from 'classnames'; -import PropTypes from 'prop-types'; +import PropTypes, { ReactNodeLike } from 'prop-types'; import { View, ViewOff } from '@carbon/icons-react'; import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps'; import { textInputProps } from './util'; import { FormContext } from '../FluidForm'; -import * as FeatureFlags from '@carbon/feature-flags'; import deprecate from '../../prop-types/deprecate'; import { usePrefix } from '../../internal/usePrefix'; +type ExcludedAttributes = 'size'; + +export interface PasswordInputProps + extends Omit, ExcludedAttributes> { + /** + * Provide a custom className that is applied directly to the underlyling `` node + */ + className?: string; + + /** + * Optionally provide the default value of the `` + */ + defaultValue?: string | number; + + /** + * Specify whether the control is disabled + */ + disabled?: boolean; + + /** + * Specify whether to display the character counter + */ + enableCounter?: boolean; + + /** + * Provide text that is used alongside the control label for additional help + */ + helperText?: ReactNodeLike; + + /** + * Specify whether or not the underlying label is visually hidden + */ + hideLabel?: boolean; + + /** + * "Hide password" tooltip text on password visibility toggle + */ + hidePasswordLabel?: string; + + /** + * Provide a unique identifier for the input field + */ + id: string; + + /** + * `true` to use the inline version + */ + inline?: boolean; + + /** + * Specify whether the control is currently invalid + */ + invalid?: boolean; + + /** + * Provide the text that is displayed when the control is in an invalid state + */ + invalidText?: ReactNodeLike; + + /** + * Provide the text that will be read by a screen reader when visiting this control + */ + labelText: ReactNodeLike; + + /** + * @deprecated The `light` prop for `PasswordInput` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release. + * `true` to use the light version. For use on $ui-01 backgrounds only. + * Don't use this to make tile background color same as container background color. + */ + light?: boolean; + + /** + * Max character count allowed for the input. This is needed in order for enableCounter to display + */ + maxCount?: number; + + /** + * Optionally provide an `onChange` handler that is called whenever `` is updated + * @param evt Change event triggered by `` + * @returns {void} + */ + onChange?: (evt: React.ChangeEvent) => void; + + /** + * Optionally provide an `onClick` handler that is called whenever the `` is returned + * @param evt Mouse event triggered by `` + * @returns {void} + */ + onClick?: (evt: React.MouseEvent) => void; + + /** + * Callback function that is called whenever the toggle password visibility button is clicked + * @param evt Mouse event triggered by the password visibility `