feat(dropdowns): adds subcomponent mapping to Field (#1745)

Author: geotrev

Diff for: docs/migration.md

@@ -88,6 +88,11 @@ consider additional positioning prop support on a case-by-case basis.
     renamed to `@zendeskgarden/react-dropdowns.legacy` in `v9`
 - `Menu`: value `auto` is no longer valid for the `fallbackPlacements` prop.
 - Removed `label` prop from `OptGroup`. Use `legend` instead.
+- Subcomponent exports have been deprecated and will be removed in a future major version. Update
+  to subcomponent properties:
+  - `Hint` -> `Field.Hint`
+  - `Label` -> `Field.Label`
+  - `Message` -> `Field.Message`
 
 #### @zendeskgarden/react-forms
 

Diff for: packages/dropdowns/README.md

@@ -28,7 +28,7 @@ import { Field, Label, Combobox, Option } from '@zendeskgarden/react-dropdowns';
  */
 <ThemeProvider>
   <Field>
-    <Label>Combobox</Label>
+    <Field.Label>Label</Field.Label>
     <Combobox>
       <Option value="One" />
       <Option value="Two" />

Diff for: packages/dropdowns/demo/combobox.stories.mdx

@@ -1,14 +1,6 @@
 import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
 import { useArgs } from '@storybook/client-api';
-import {
-  Combobox,
-  Hint,
-  Label,
-  Message,
-  Option,
-  OptGroup,
-  Tag
-} from '@zendeskgarden/react-dropdowns';
+import { Combobox, Field, Option, OptGroup, Tag } from '@zendeskgarden/react-dropdowns';
 import { ComboboxStory } from './stories/ComboboxStory';
 import { OPTIONS } from './stories/data';
 import README from '../README.md';
@@ -17,9 +9,10 @@ import README from '../README.md';
   title="Packages/Dropdowns/Combobox"
   component={Combobox}
   subcomponents={{
-    Hint,
-    Label,
-    Message,
+    Field,
+    'Field.Hint': Field.Hint,
+    'Field.Label': Field.Label,
+    'Field.Message': Field.Message,
     Option,
     'Option.Meta': Option.Meta,
     OptGroup,

Diff for: packages/dropdowns/demo/stories/ComboboxStory.tsx

@@ -15,11 +15,8 @@ import { Grid } from '@zendeskgarden/react-grid';
 import {
   Combobox,
   Field,
-  Hint,
   IComboboxProps,
   IOptionProps,
-  Label,
-  Message,
   OptGroup,
   Option,
   Tag
@@ -127,10 +124,10 @@ export const ComboboxStory: Story<IArgs> = ({
       <Grid.Row justifyContent="center" style={{ height: 'calc(100vh - 80px)' }}>
         <Grid.Col alignSelf="center">
           <Field>
-            <Label hidden={isLabelHidden} isRegular={isLabelRegular}>
+            <Field.Label hidden={isLabelHidden} isRegular={isLabelRegular}>
               {label}
-            </Label>
-            {hint && <Hint>{hint}</Hint>}
+            </Field.Label>
+            {hint && <Field.Hint>{hint}</Field.Hint>}
             <Combobox
               validation={validation}
               {...args}
@@ -179,9 +176,9 @@ export const ComboboxStory: Story<IArgs> = ({
               )}
             </Combobox>
             {message && (
-              <Message validation={validation} validationLabel={validationLabel}>
+              <Field.Message validation={validation} validationLabel={validationLabel}>
                 {message}
-              </Message>
+              </Field.Message>
             )}
           </Field>
         </Grid.Col>

Diff for: packages/dropdowns/demo/~patterns/stories/ListboxStory.tsx

@@ -8,7 +8,7 @@
 import React, { useRef } from 'react';
 import { Story } from '@storybook/react';
 import styled from 'styled-components';
-import { Combobox, Field, Label, Option } from '@zendeskgarden/react-dropdowns';
+import { Combobox, Field, Option } from '@zendeskgarden/react-dropdowns';
 import { getColorV8 } from '@zendeskgarden/react-theming';
 import { Paragraph } from '@zendeskgarden/react-typography';
 
@@ -34,7 +34,7 @@ export const ListboxStory: Story<IArgs> = ({ listboxAppendToNode }) => {
       <div ref={portalNode} />
       <StyledContainer>
         <Field>
-          <Label>Listbox portal pattern</Label>
+          <Field.Label>Listbox portal pattern</Field.Label>
           <Combobox
             isAutocomplete
             isEditable={false}

Diff for: packages/dropdowns/src/elements/combobox/Combobox.spec.tsx

@@ -14,9 +14,6 @@ import { Combobox } from './Combobox';
 import { OptGroup } from './OptGroup';
 import { Option } from './Option';
 import { Field } from './Field';
-import { Label } from './Label';
-import { Hint } from './Hint';
-import { Message } from './Message';
 
 interface ITestComboboxProps extends IComboboxProps {
   fieldTestId?: string;
@@ -46,8 +43,8 @@ const TestCombobox = forwardRef<HTMLDivElement, ITestComboboxProps>(
     ref
   ) => (
     <Field data-test-id={fieldTestId}>
-      <Label data-test-id={labelTestId}>Label</Label>
-      <Hint data-test-id={hintTestId}>Hint</Hint>
+      <Field.Label data-test-id={labelTestId}>Label</Field.Label>
+      <Field.Hint data-test-id={hintTestId}>Hint</Field.Hint>
       <Combobox
         data-test-id={comboboxTestId}
         inputProps={
@@ -59,13 +56,13 @@ const TestCombobox = forwardRef<HTMLDivElement, ITestComboboxProps>(
       >
         {children}
       </Combobox>
-      <Message
+      <Field.Message
         data-test-id={messageTestId}
         validation={validation}
         validationLabel={validationLabel}
       >
         Message
-      </Message>
+      </Field.Message>
     </Field>
   )
 );

Diff for: packages/dropdowns/src/elements/combobox/Field.tsx

@@ -8,11 +8,11 @@
 import React, { HTMLAttributes, LabelHTMLAttributes, forwardRef, useMemo, useState } from 'react';
 import { FieldContext } from '../../context/useFieldContext';
 import { StyledField } from '../../views';
+import { Hint } from './Hint';
+import { Label } from './Label';
+import { Message } from './Message';
 
-/**
- * @extends HTMLAttributes<HTMLDivElement>
- */
-export const Field = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
+const FieldComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {
   const [labelProps, setLabelProps] = useState<LabelHTMLAttributes<HTMLLabelElement> | undefined>(
     undefined
   );
@@ -56,4 +56,17 @@ export const Field = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   );
 });
 
-Field.displayName = 'Field';
+FieldComponent.displayName = 'Field';
+
+/**
+ * @extends HTMLAttributes<HTMLDivElement>
+ */
+export const Field = FieldComponent as typeof FieldComponent & {
+  Hint: typeof Hint;
+  Label: typeof Label;
+  Message: typeof Message;
+};
+
+Field.Hint = Hint;
+Field.Label = Label;
+Field.Message = Message;

Diff for: packages/dropdowns/src/elements/combobox/Hint.tsx

@@ -10,6 +10,8 @@ import useFieldContext from '../../context/useFieldContext';
 import { StyledHint } from '../../views';
 
 /**
+ * @deprecated use `Field.Hint` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const Hint = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>((props, ref) => {

Diff for: packages/dropdowns/src/elements/combobox/Label.tsx

@@ -13,6 +13,8 @@ import { ILabelProps } from '../../types';
 import { StyledLabel } from '../../views';
 
 /**
+ * @deprecated use `Field.Label` instead
+ *
  * @extends LabelHTMLAttributes<HTMLLabelElement>
  */
 export const Label = forwardRef<HTMLLabelElement, ILabelProps>(

Diff for: packages/dropdowns/src/elements/combobox/Message.tsx

@@ -13,6 +13,8 @@ import useFieldContext from '../../context/useFieldContext';
 import { StyledMessage } from '../../views';
 
 /**
+ * @deprecated use `Field.Message` instead
+ *
  * @extends HTMLAttributes<HTMLDivElement>
  */
 export const Message = forwardRef<HTMLDivElement, IMessageProps>((props, ref) => {

Diff for: packages/dropdowns/src/views/combobox/StyledHint.ts

@@ -7,11 +7,11 @@
 
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { Hint } from '@zendeskgarden/react-forms';
+import { Field } from '@zendeskgarden/react-forms';
 
 const COMPONENT_ID = 'dropdowns.combobox.hint';
 
-export const StyledHint = styled(Hint).attrs({
+export const StyledHint = styled(Field.Hint).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`

Diff for: packages/dropdowns/src/views/combobox/StyledLabel.ts

@@ -7,11 +7,11 @@
 
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { Label } from '@zendeskgarden/react-forms';
+import { Field } from '@zendeskgarden/react-forms';
 
 const COMPONENT_ID = 'dropdowns.combobox.label';
 
-export const StyledLabel = styled(Label).attrs({
+export const StyledLabel = styled(Field.Label).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`

Diff for: packages/dropdowns/src/views/combobox/StyledMessage.ts

@@ -7,11 +7,11 @@
 
 import styled from 'styled-components';
 import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
-import { Message } from '@zendeskgarden/react-forms';
+import { Field } from '@zendeskgarden/react-forms';
 
 const COMPONENT_ID = 'dropdowns.combobox.message';
 
-export const StyledMessage = styled(Message).attrs({
+export const StyledMessage = styled(Field.Message).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`

Diff for: packages/typography/demo/stories/data.ts

@@ -287,7 +287,7 @@ if __name__ == '__main__':
 
 import React from 'react';
 import { Col, Row } from '@zendeskgarden/react-grid';
-import { Combobox, Field, Label, Option, Tag } from '@zendeskgarden/react-dropdowns.next';
+import { Combobox, Field, Option, Tag } from '@zendeskgarden/react-dropdowns.next';
 import { ReactComponent as AvatarIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg';
 
 const OPTIONS = [
@@ -330,7 +330,7 @@ const Example = () => {
     <Row justifyContent="center">
       <Col sm={5}>
         <Field>
-          <Label>Horticulturalists</Label>
+          <Field.Label>Horticulturalists</Field.Label>
           <Combobox isMultiselectable maxHeight="auto">
             {OPTIONS.map(option => (
               <Option