feat(Dropdown): add hideTitleText prop (#7594)

* feat(Dropdown): add hideTitleText prop

* refactor(Dropdown): change hideTitleText to hideLabel

Co-authored-by: Tony Wu <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.all-contributorsrc

@@ -646,6 +646,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "molyholy",
+      "name": "molyholy",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/77503726?v=4",
+      "profile": "https://github.com/molyholy",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -166,6 +166,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/DavidSCChen"><img src="https://avatars1.githubusercontent.com/u/54974983?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DavidSCChen</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=DavidSCChen" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/molyholy"><img src="https://avatars2.githubusercontent.com/u/77503726?v=4?s=100" width="100px;" alt=""/><br /><sub><b>molyholy</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=molyholy" title="Code">💻</a></td>
   </tr>
 </table>
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -2309,6 +2309,9 @@ Map {
         ],
         "type": "oneOfType",
       },
+      "hideLabel": Object {
+        "type": "bool",
+      },
       "id": Object {
         "isRequired": true,
         "type": "string",

packages/react/src/components/Dropdown/Dropdown-story.js

@@ -60,6 +60,7 @@ const props = () => ({
   disabled: boolean('Disabled (disabled)', false),
   light: boolean('Light variant (light)', false),
   titleText: text('Title (titleText)', 'Dropdown label'),
+  hideLabel: boolean('No title text shown (hideLabel)', false),
   helperText: text('Helper text (helperText)', 'This is some helper text.'),
   invalid: boolean('Show form validation UI (invalid)', false),
   invalidText: text(

packages/react/src/components/Dropdown/Dropdown.js

@@ -45,6 +45,7 @@ const Dropdown = React.forwardRef(function Dropdown(
     onChange,
     id,
     titleText,
+    hideLabel,
     helperText,
     translateWithId,
     light,
@@ -98,6 +99,7 @@ const Dropdown = React.forwardRef(function Dropdown(
 
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--visually-hidden`]: hideLabel,
   });
 
   const helperClasses = cx(`${prefix}--form__helper-text`, {
@@ -232,6 +234,11 @@ Dropdown.propTypes = {
    */
   helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  hideLabel: PropTypes.bool,
+
   /**
    * Specify a custom `id`
    */