Disp 139/input

src/components/experimental/TextField/ClearButton.tsx

@@ -0,0 +1,25 @@
+import React, { ReactElement } from 'react';
+import styled from 'styled-components';
+import { Button as BaseButton, ButtonProps as BaseButtonProps } from 'react-aria-components';
+import { getSemanticValue } from '../../../essentials/experimental/cssVariables';
+import { XCrossCircleIcon } from '../../../icons';
+
+const StyledButton = styled(BaseButton)`
+    appearance: none;
+    background: none;
+    border: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+    color: ${getSemanticValue('on-surface-variant')};
+`;
+
+function ClearButton(props: BaseButtonProps): ReactElement {
+    return (
+        <StyledButton {...props}>
+            <XCrossCircleIcon />
+        </StyledButton>
+    );
+}
+
+export { ClearButton };

src/components/experimental/TextField/Field.ts

@@ -0,0 +1,40 @@
+import { Input as BaseInput, TextArea as BaseTextArea } from 'react-aria-components';
+import styled, { css } from 'styled-components';
+import { getSemanticValue } from '../../../essentials/experimental/cssVariables';
+import { textStyles } from '../Text/Text';
+
+const fieldStyles = css`
+    border: none;
+    background-color: unset;
+    outline: none;
+
+    display: block;
+    width: 100%;
+    padding: 0;
+
+    caret-color: ${getSemanticValue('interactive')};
+    color: ${getSemanticValue('on-surface')};
+
+    ${textStyles.variants.body1}
+
+    &::placeholder {
+        color: ${getSemanticValue('on-surface-variant')};
+    }
+`;
+
+export const TextArea = styled(BaseTextArea).attrs({ rows: 1 })`
+    ${fieldStyles};
+
+    resize: none;
+    min-height: ${textStyles.variants.body1.lineHeight};
+`;
+
+export const Input = styled(BaseInput)`
+    ${fieldStyles}
+
+    &[type='search'] {
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    }
+`;

src/components/experimental/TextField/Label.ts

@@ -0,0 +1,25 @@
+import { Label as BaseLabel } from 'react-aria-components';
+import styled, { css } from 'styled-components';
+import { textStyles } from '../Text/Text';
+
+export const flyingLabelStyles = css`
+    top: 0;
+    transform: translate3d(0, 0, 0);
+
+    ${textStyles.variants.label2}
+`;
+
+export const Label = styled(BaseLabel)<{ $flying: boolean }>`
+    position: absolute;
+    top: 50%;
+    color: currentColor;
+
+    ${textStyles.variants.body1}
+
+    transform: translate3d(0, calc(-${textStyles.variants.body1.lineHeight} / 2), 0);
+    transform-origin: 0;
+
+    transition: top 200ms ease, font-size 200ms ease, transform 200ms ease;
+
+    ${props => props.$flying && flyingLabelStyles}
+`;