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,41 @@
+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')};
+ }
+`;
+
+// TODO: Implement autogrow
+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}
+`;