chore: #272 v5-label-component-deprecated-existing

src/components/deprecated-label/__styles__/index.ts

@@ -0,0 +1,7 @@
+import { styled } from '@linaria/react'
+
+/** @deprecated This style is deprecated and will be removed in future releases. */
+export const ElDeprecatedLabel = styled.label`
+  font-size: var(--font-size-small);
+  color: var(--neutral-500);
+`

src/components/label/__tests__/__snapshots__/label.test.tsx.snap → src/components/deprecated-label/__tests__/__snapshots__/label.test.tsx.snap

@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Label component > should match a snapshot 1`] = `
+exports[`DeprecatedLabel component > should match a snapshot 1`] = `
 <DocumentFragment>
   <label
-    class="mocked-styled-0 el-label"
+    class="mocked-styled-0 el-deprecated-label"
   />
 </DocumentFragment>
 `;

src/components/label/__tests__/label.test.tsx → src/components/deprecated-label/__tests__/label.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react'
-import { Label } from '..'
+import { DeprecatedLabel } from '..'
 
-describe('Label component', () => {
+describe('DeprecatedLabel component', () => {
   it('should match a snapshot', () => {
-    const wrapper = render(<Label />)
+    const wrapper = render(<DeprecatedLabel />)
     expect(wrapper.asFragment()).toMatchSnapshot()
   })
 })

src/components/label/label.mdx → src/components/deprecated-label/label.mdx

@@ -1,11 +1,11 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
-import { Label } from './index'
+import { DeprecatedLabel } from './index'
 import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
 import * as LabelStories from './label.stories'
 
 <Meta of={LabelStories} />
 
-# Label
+# DeprecatedLabel
 
 Typically labels are used in conjunction with the `InputGroup` component for labeling inputs. In some cases it may also be appropriate to label another DOM element where a heading is not appropriate, for example listing key value pairs.
 

src/components/deprecated-label/label.stories.tsx

@@ -0,0 +1,10 @@
+import { DeprecatedLabel } from './index'
+
+export default {
+  title: 'DeprecatedLabel',
+  component: DeprecatedLabel,
+}
+
+export const BasicUsage = {
+  render: ({}) => <DeprecatedLabel>I&apos;m a label for a form input or something else</DeprecatedLabel>,
+}

src/components/deprecated-label/label.tsx

@@ -0,0 +1,10 @@
+import React, { FC, LabelHTMLAttributes } from 'react'
+import { ElDeprecatedLabel } from './__styles__'
+
+/** @deprecated will be replaced by new v5 LabelProps*/
+export interface DeprecatedLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {}
+
+/** @deprecated will be replaced by new v5 Label */
+export const DeprecatedLabel: FC<DeprecatedLabelProps> = ({ children, ...rest }) => {
+  return <ElDeprecatedLabel {...rest}>{children}</ElDeprecatedLabel>
+}

src/components/drawer/drawer.stories.tsx

@@ -3,7 +3,7 @@ import { Drawer, DrawerBg } from './index'
 import { Button, DeprecatedButtonGroup } from '../button'
 import { FormLayout, InputWrapFull, InputWrapHalf } from '../form-layout'
 import { InputGroup } from '../input-group'
-import { Label } from '../label'
+import { DeprecatedLabel } from '../deprecated-label'
 import { Select } from '../select'
 import { TextArea } from '../textarea'
 import { TextBase } from '../typography'
@@ -73,7 +73,7 @@ export const ReactUsageWithForm = {
             </InputWrapHalf>
             <InputWrapHalf>
               <InputGroup>
-                <Label>Under 18?</Label>
+                <DeprecatedLabel>Under 18?</DeprecatedLabel>
                 <Select>
                   <option>Yes</option>
                   <option>No</option>
@@ -82,7 +82,7 @@ export const ReactUsageWithForm = {
             </InputWrapHalf>
             <InputWrapFull>
               <InputGroup>
-                <Label>Notes</Label>
+                <DeprecatedLabel>Notes</DeprecatedLabel>
                 <TextArea fieldSizing="content" />
               </InputGroup>
             </InputWrapFull>

src/components/file-input/__styles__/index.ts

@@ -1,4 +1,4 @@
-import { ElLabel } from '../../label/__styles__/index'
+import { ElDeprecatedLabel } from '../../deprecated-label/__styles__/index'
 import { ElIcon } from '../../icon/__styles__/index'
 import { ElButton } from '../../button/styles'
 import { styled } from '@linaria/react'
@@ -29,7 +29,7 @@ export const ElFileInputWrap = styled.div`
     padding: 1rem;
   }
 
-  ${ElLabel} {
+  ${ElDeprecatedLabel} {
     height: 1.25rem;
     display: block;
   }

src/components/file-input/__tests__/__snapshots__/file-input.test.tsx.snap

@@ -60,7 +60,7 @@ exports[`FileInput component > should match a snapshot with full props 1`] = `
     class="mocked-styled-1 el-file-input-wrap"
   >
     <label
-      class="mocked-styled-12 el-label"
+      class="mocked-styled-12 el-deprecated-label"
     >
       Some Label
     </label>

src/components/file-input/file-input.tsx

@@ -13,7 +13,7 @@ import { useId } from '../../storybook/random-id'
 import { elMl3, elMr4 } from '../../styles/spacing'
 import { Button } from '../button'
 import { Icon } from '../icon'
-import { Label } from '../label'
+import { DeprecatedLabel } from '../deprecated-label'
 import { FlexContainer } from '../layout'
 import { handleSetNativeInput } from '../multi-select'
 import {
@@ -132,7 +132,7 @@ export const FileInput: FileInputWrapped = forwardRef(
 
     return (
       <ElFileInputWrap>
-        {label && <Label>{label}</Label>}
+        {label && <DeprecatedLabel>{label}</DeprecatedLabel>}
         <FlexContainer isFlexAlignCenter>
           <Button className={elMr4} type="button">
             {fileUrl ? 'Change' : 'Upload'}

src/components/form-layout/form-layout.mdx

@@ -7,7 +7,7 @@ import { Subtitle, BodyText, SmallText } from '../typography'
 import { TextArea } from '../textarea'
 import { MultiSelectInput } from '../multi-select'
 import { Button, DeprecatedButtonGroup } from '../button'
-import { Label } from '../label'
+import { DeprecatedLabel } from '../deprecated-label'
 import * as FormLayoutStories from './form-layout.stories'
 
 <Meta of={FormLayoutStories} />

src/components/form-layout/form-layout.stories.tsx

@@ -4,7 +4,7 @@ import { Toggle, ToggleRadio, ElToggleItem } from '../toggle'
 import { TextArea } from '../textarea'
 import { MultiSelectInput } from '../multi-select'
 import { Button, DeprecatedButtonGroup } from '../button'
-import { Label } from '../label'
+import { DeprecatedLabel } from '../deprecated-label'
 import { Select } from '../select'
 import { TextBase, TextSM } from '../typography'
 
@@ -44,7 +44,7 @@ export const BasicForm = {
               <ElToggleItem>On</ElToggleItem>
               <ElToggleItem>Off</ElToggleItem>
             </Toggle>
-            <Label>Active</Label>
+            <DeprecatedLabel>Active</DeprecatedLabel>
           </InputGroup>
         </InputWrapSmall>
         <InputWrap>
@@ -72,13 +72,13 @@ export const BasicForm = {
                 },
               ]}
             />
-            <Label>Options</Label>
+            <DeprecatedLabel>Options</DeprecatedLabel>
           </InputGroup>
         </InputWrap>
         <InputWrapFull>
           <InputGroup>
             <TextArea fieldSizing="content" placeholder="A placeholder" />
-            <Label>Long Description</Label>
+            <DeprecatedLabel>Long Description</DeprecatedLabel>
           </InputGroup>
         </InputWrapFull>
       </FormLayout>
@@ -111,7 +111,7 @@ export const ComplexForm = {
         </InputWrap>
         <InputWrap>
           <InputGroup>
-            <Label>Select Option</Label>
+            <DeprecatedLabel>Select Option</DeprecatedLabel>
             <Select>
               <option value="1">Option 1</option>
               <option value="2">Option 2</option>
@@ -128,7 +128,7 @@ export const ComplexForm = {
               <ElToggleItem>On</ElToggleItem>
               <ElToggleItem>Off</ElToggleItem>
             </Toggle>
-            <Label>Active</Label>
+            <DeprecatedLabel>Active</DeprecatedLabel>
           </InputGroup>
         </InputWrapSmall>
         <InputWrap>
@@ -156,13 +156,13 @@ export const ComplexForm = {
                 },
               ]}
             />
-            <Label>Options</Label>
+            <DeprecatedLabel>Options</DeprecatedLabel>
           </InputGroup>
         </InputWrap>
         <InputWrapFull>
           <InputGroup>
             <TextArea fieldSizing="content" placeholder="A placeholder" />
-            <Label>Long Description</Label>
+            <DeprecatedLabel>Long Description</DeprecatedLabel>
           </InputGroup>
         </InputWrapFull>
       </FormLayout>
@@ -197,7 +197,7 @@ export const ComplexForm = {
               ]}
               defaultValues={['item-one']}
             />
-            <Label>Select Items</Label>
+            <DeprecatedLabel>Select Items</DeprecatedLabel>
           </InputGroup>
         </InputWrapFull>
       </FormLayout>

src/components/input-group/__styles__/index.ts

@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react'
 import { ElIcon } from '../../icon/__styles__'
-import { ElLabel } from '../../label/__styles__'
+import { ElDeprecatedLabel } from '../../deprecated-label/__styles__'
 import { ElInput, elHasInputError } from '../../input/__styles__'
 import { ElTextArea } from '../../textarea'
 import { ElSelect } from '../../select/__styles__'
@@ -13,7 +13,7 @@ export const ElInputGroup = styled.div`
   display: flex;
   flex-wrap: wrap;
 
-  ${ElLabel} {
+  ${ElDeprecatedLabel} {
     order: 1;
     flex-basis: 100%;
     padding: 0 0.5rem 0.5rem 0;
@@ -80,7 +80,7 @@ export const ElInputGroup = styled.div`
     }
 
     &:disabled {
-      ~ ${ElIcon}, ~ ${ElInputAddOn}, ~ ${ElLabel} {
+      ~ ${ElIcon}, ~ ${ElInputAddOn}, ~ ${ElDeprecatedLabel} {
         color: rgba(100, 100, 100, 0.35);
       }
     }
@@ -101,7 +101,7 @@ export const ElInputGroup = styled.div`
     }
 
     &:checked {
-      ~ ${ElIcon}, ~ ${ElLabel}, ~ ${ElInputAddOn} {
+      ~ ${ElIcon}, ~ ${ElDeprecatedLabel}, ~ ${ElInputAddOn} {
         background: var(--white);
       }
 
@@ -112,20 +112,20 @@ export const ElInputGroup = styled.div`
   }
 
   ${ElInput}[type='checkbox'] {
-    ~ ${ElLabel} {
+    ~ ${ElDeprecatedLabel} {
       display: block;
     }
   }
 
   ${ElToggleRadioWrap}, ${ElToggleLabel}, ${ElMultiSelectInputWrapper} {
     order: 2;
-    ~ ${ElLabel} {
+    ~ ${ElDeprecatedLabel} {
       order: 1;
       padding: 0 0.5rem 0.5rem 0;
     }
   }
 
-  ${ElInput}[type='radio'] ~ ${ElLabel} {
+  ${ElInput}[type='radio'] ~ ${ElDeprecatedLabel} {
     order: 4;
     flex-basis: auto;
     flex-grow: 1;

src/components/input-group/__tests__/__snapshots__/input-group.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`InputGroup component > should match a snapshot when used in explicit mo
       </svg>
     </span>
     <label
-      class="mocked-styled-3 el-label"
+      class="mocked-styled-3 el-deprecated-label"
     >
       Please enter a username
     </label>
@@ -61,7 +61,7 @@ exports[`InputGroup component > should match a snapshot when used in react short
       id="myId"
     />
     <label
-      class="mocked-styled-3 el-label"
+      class="mocked-styled-3 el-deprecated-label"
       for="myId"
     >
       Enter your username
@@ -135,7 +135,7 @@ exports[`InputGroup component > should match a snapshot when used in react short
       </svg>
     </span>
     <label
-      class="mocked-styled-3 el-label"
+      class="mocked-styled-3 el-deprecated-label"
       for="myId"
     >
       Enter your username

src/components/input-group/__tests__/input-group.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import { InputGroup } from '..'
 import { Input } from '../../input'
-import { Label } from '../../label'
+import { DeprecatedLabel } from '../../deprecated-label'
 import { Icon } from '../../icon'
 
 describe('InputGroup component', () => {
@@ -30,7 +30,7 @@ describe('InputGroup component', () => {
       <InputGroup>
         <Input />
         <Icon icon="email">Please enter an email</Icon>
-        <Label>Please enter a username</Label>
+        <DeprecatedLabel>Please enter a username</DeprecatedLabel>
       </InputGroup>,
     )
     expect(wrapper.asFragment()).toMatchSnapshot()

src/components/input-group/input-group.mdx

@@ -2,7 +2,7 @@ import { Meta, Story, Canvas, Controls } from '@storybook/blocks'
 import { InputGroup } from './index'
 import { Input } from '../input'
 import { Icon } from '../icon'
-import { Label } from '../label'
+import { DeprecatedLabel } from '../deprecated-label'
 import { InputAddOn } from '../input-add-on'
 import { RenderHtmlMarkup } from '../../storybook/render-html-markup'
 import { InputError } from '../input-error'
@@ -19,7 +19,7 @@ InputGroup provides a wrapper and styling for the `Input`, `Icon`, `Label`, and
 ## Usage with HTML & CSS only
 
 - The order of the child components matters, in order to make the focus state work (i.e. the different styling applied when you click into the component)
-- The `<input>` component must come first in the DOM, before the `<label>`, and the `<span>` for the icon and InputAddOn, as is shown in the HTML docs
+- The `<input>` component must come first in the DOM, before the `<DeprecatedLabel>`, and the `<span>` for the icon and InputAddOn, as is shown in the HTML docs
 
 ## Usage with React
 

src/components/input-group/input-group.stories.tsx

@@ -1,7 +1,7 @@
 import { InputGroup } from './index'
 import { Input } from '../input'
 import { Icon } from '../icon'
-import { Label } from '../label'
+import { DeprecatedLabel } from '../deprecated-label'
 import { InputAddOn } from '../input-add-on'
 
 export default {
@@ -14,7 +14,7 @@ export const CompleteExample = {
     <InputGroup>
       <Input id="myId" type="text" />
       <Icon fontSize="1rem" icon="user" />
-      <Label htmlFor="myId">Enter your username</Label>
+      <DeprecatedLabel htmlFor="myId">Enter your username</DeprecatedLabel>
       <InputAddOn>Required</InputAddOn>
     </InputGroup>
   ),
@@ -35,7 +35,7 @@ export const WithLabelOnly = {
   render: ({}) => (
     <InputGroup>
       <Input id="myId3" type="email" />
-      <Label htmlFor="myId3">Email address</Label>
+      <DeprecatedLabel htmlFor="myId3">Email address</DeprecatedLabel>
     </InputGroup>
   ),
   name: 'With Label only',

src/components/input-group/input-group.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react'
 import { ElInputGroup } from './__styles__'
 import { Input } from '../input'
 import { Icon, IconNames } from '../icon'
-import { Label } from '../label'
+import { DeprecatedLabel } from '../deprecated-label'
 import { InputAddOn } from '../input-add-on'
 import { Intent } from '../../helpers/intent'
 import { useId } from '../../storybook/random-id'
@@ -48,7 +48,7 @@ export const InputGroup: InputGroupWrapped = forwardRef(
         <ElInputGroup className={className}>
           <Input hasError={errorState} id={groupId} {...rest} ref={ref} />
           {icon && <Icon fontSize="1rem" intent={errorState ? 'danger' : intent} icon={icon} />}
-          {label && <Label htmlFor={groupId}>{label}</Label>}
+          {label && <DeprecatedLabel htmlFor={groupId}>{label}</DeprecatedLabel>}
           {inputAddOnText && <InputAddOn intent={errorState ? 'danger' : intent}>{inputAddOnText}</InputAddOn>}
           {errorMessage && <InputError message={errorMessage} />}
         </ElInputGroup>