Merge branch 'master' into patch-2

carbon-design-system · Oct 17, 2019 · 273674c · 273674c
2 parents 0e6a87e + 8532739
commit 273674c
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 12 deletions.
diff --git a/.github/workflows/deploy-react-storybook.yml b/.github/workflows/deploy-react-storybook.yml
@@ -19,7 +19,7 @@ jobs:
       - name: Use Node.js 10.x
         uses: actions/setup-node@v1
         with:
-          version: 10.x
+          node-version: '10.x'
       - name: Install dependencies
         run: yarn install --offline
       - name: Build project

diff --git a/.github/workflows/nightly-release.yml b/.github/workflows/nightly-release.yml
@@ -13,7 +13,7 @@ jobs:
       - name: Use Node.js 10.x
         uses: actions/setup-node@v1
         with:
-          version: 10.x
+          node-version: '10.x'
       - name: Install dependencies
         run: yarn install --offline
       - name: Build project

diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
@@ -27,6 +27,7 @@ const props = {
     ),
     disabled: boolean('Disabled (disabled)', false),
     role: 'listitem',
+    title: 'Clear Selection',
   }),
   filter() {
     return { ...this.regular(), onClick: action('onClick') };

diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
@@ -26,7 +26,15 @@ const TYPES = {
   'warm-gray': 'Warm-Gray',
 };
 
-const Tag = ({ children, className, type, filter, disabled, ...other }) => {
+const Tag = ({
+  children,
+  className,
+  type,
+  filter,
+  title,
+  disabled,
+  ...other
+}) => {
   const tagClass = `${prefix}--tag--${type}`;
   const tagClasses = classNames(`${prefix}--tag`, tagClass, className, {
     [`${prefix}--tag--disabled`]: disabled,
@@ -35,11 +43,11 @@ const Tag = ({ children, className, type, filter, disabled, ...other }) => {
   return filter ? (
     <span
       className={tagClasses}
-      title="Clear filter"
+      title={title || 'Clear filter'}
       tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       {...other}>
       {children !== null && children !== undefined ? children : TYPES[type]}
-      <Close16 aria-label="Clear filter" />
+      <Close16 aria-label={title || 'Clear filter'} />
     </span>
   ) : (
     <span className={tagClasses} {...other}>
@@ -73,6 +81,11 @@ Tag.propTypes = {
    * Determine if <Tag> is a filter/chip
    */
   filter: PropTypes.bool,
+
+  /**
+   * Text to show on clear filters
+   */
+  title: PropTypes.string,
 };
 
 export const types = Object.keys(TYPES);

diff --git a/packages/react/src/components/TextInput/PasswordInput-test.js b/packages/react/src/components/TextInput/PasswordInput-test.js
@@ -14,6 +14,8 @@ describe('PasswordInput', () => {
         labelText="testlabel"
         helperText="testHelper"
         light
+        showPasswordLabel="Show password"
+        hidePasswordLabel="Hide password"
       />
     );
 
@@ -43,6 +45,8 @@ describe('PasswordInput', () => {
         expect(passwordInput().props().type).toEqual('password');
         wrapper.find('button').simulate('click');
         expect(passwordInput().props().type).toEqual('text');
+        wrapper.find('button').simulate('click');
+        expect(passwordInput().props().type).toEqual('password');
       });
 
       it('should set value as expected', () => {
@@ -62,6 +66,19 @@ describe('PasswordInput', () => {
         wrapper.setProps({ placeholder: 'Enter text' });
         expect(passwordInput().props().placeholder).toEqual('Enter text');
       });
+
+      it('should set password visibility toggle text as expected', () => {
+        const { hidePasswordLabel, showPasswordLabel } = wrapper.props();
+        expect(
+          wrapper.find('.bx--text-input--password__visibility__toggle').text()
+        ).toEqual(showPasswordLabel);
+        wrapper
+          .find('.bx--text-input--password__visibility__toggle')
+          .simulate('click');
+        expect(
+          wrapper.find('.bx--text-input--password__visibility__toggle').text()
+        ).toEqual(hidePasswordLabel);
+      });
     });
 
     describe('label', () => {

diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
@@ -21,6 +21,8 @@ export default function PasswordInput({
   light,
   tooltipPosition = 'bottom',
   tooltipAlignment = 'center',
+  hidePasswordLabel = 'Hide password',
+  showPasswordLabel = 'Show password',
   ...other
 }) {
   const [inputType, setInputType] = useState('password');
@@ -97,7 +99,7 @@ export default function PasswordInput({
         className={passwordVisibilityToggleClasses}
         onClick={togglePasswordVisibility}>
         <span className={`${prefix}--assistive-text`}>
-          {`${passwordIsVisible ? 'Hide' : 'Show'} password`}
+          {passwordIsVisible ? hidePasswordLabel : showPasswordLabel}
         </span>
         {passwordVisibilityIcon}
       </button>
@@ -211,6 +213,16 @@ PasswordInput.propTypes = {
    * Can be one of: start, center, or end.
    */
   tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * "Hide password" tooltip text on password visibility toggle
+   */
+  hidePasswordLabel: PropTypes.string,
+
+  /**
+   * "Show password" tooltip text on password visibility toggle
+   */
+  showPasswordLabel: PropTypes.string,
 };
 
 PasswordInput.defaultProps = {

diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
@@ -70,6 +70,14 @@ const props = {
       ['start', 'center', 'end'],
       'center'
     ),
+    hidePasswordLabel: text(
+      '"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
+      'Hide password'
+    ),
+    showPasswordLabel: text(
+      '"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
+      'Show password'
+    ),
   }),
 };
 
@@ -98,12 +106,14 @@ storiesOf('TextInput', module)
   )
   .add(
     'Toggle password visibility',
-    () => (
-      <TextInput.PasswordInput
-        {...props.TextInputProps()}
-        {...props.PasswordInputProps()}
-      />
-    ),
+    () => {
+      return (
+        <TextInput.PasswordInput
+          {...props.TextInputProps()}
+          {...props.PasswordInputProps()}
+        />
+      );
+    },
     {
       info: {
         text: `