fix: add autofocus style to input (#451)

* fix: add autofocus style to input

* fix: rollback changes to lock

* fix: rollback changes to lock

* fix: rollback changes to lock

* fix: rollback changes to lock

* chore: commit save point

build.washingtonpost.com/public/sitemap.xml

@@ -44,6 +44,10 @@
     <loc>https://build.washingtonpost.com/components/checkbox</loc>
   </url>
 
+  <url>
+    <loc>https://build.washingtonpost.com/components/coach-marks</loc>
+  </url>
+
   <url>
     <loc>https://build.washingtonpost.com/components/container</loc>
   </url>

ui/input-shared/src/InputShared.tsx

@@ -1,6 +1,12 @@
 import * as React from "react";
 import { css, theme, globalCss } from "@washingtonpost/wpds-theme";
 
+export const FloatingLabelStyles = {
+  fontSize: theme.fontSizes["075"],
+  lineHeight: theme.lineHeights["100"],
+  transform: `translateY(${theme.space["050"]})`,
+};
+
 export const sharedInputStyles = {
   borderRadius: theme.radii["012"],
   borderColor: theme.colors.subtle,
@@ -105,11 +111,12 @@ export const useFloating = (
   onChange,
   isAutofilled
 ): [
-  boolean,
-  React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>,
-  React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>,
-  (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
-] => {
+    boolean,
+    React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>,
+    React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>,
+    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
+  ] => {
+
   const [isFloating, setIsFloating] = React.useState(val ? true : false);
   const [isTouched, setIsTouched] = React.useState(val ? true : false);
   const [isFocused, setIsFocused] = React.useState(false);

ui/input-text/package.json

@@ -37,7 +37,6 @@
   },
   "peerDependencies": {
     "@washingtonpost/wpds-assets": "^1.18.0",
-    "@washingtonpost/wpds-box": "*",
     "@washingtonpost/wpds-button": "*",
     "@washingtonpost/wpds-divider": "*",
     "@washingtonpost/wpds-error-message": "*",
@@ -52,15 +51,14 @@
   "dependencies": {
     "@radix-ui/react-label": "^1.0.0",
     "@washingtonpost/wpds-assets": "^1.18.0",
-    "@washingtonpost/wpds-box": "1.9.1",
-    "@washingtonpost/wpds-button": "1.9.1",
-    "@washingtonpost/wpds-error-message": "1.9.1",
-    "@washingtonpost/wpds-helper-text": "1.9.1",
-    "@washingtonpost/wpds-icon": "1.9.1",
-    "@washingtonpost/wpds-input-label": "1.9.1",
-    "@washingtonpost/wpds-input-shared": "1.9.1",
-    "@washingtonpost/wpds-theme": "1.9.1",
-    "@washingtonpost/wpds-visually-hidden": "1.9.1",
+    "@washingtonpost/wpds-button": "*",
+    "@washingtonpost/wpds-error-message": "*",
+    "@washingtonpost/wpds-helper-text": "*",
+    "@washingtonpost/wpds-icon": "*",
+    "@washingtonpost/wpds-input-label": "*",
+    "@washingtonpost/wpds-input-shared": "*",
+    "@washingtonpost/wpds-theme": "*",
+    "@washingtonpost/wpds-visually-hidden": "*",
     "nanoid": "^3.3.4"
   },
   "gitHead": "37dec684cc01ef4a87df682998c91ad97368ce8a"

ui/input-text/src/InputText.tsx

@@ -10,7 +10,6 @@ import {
   unstyledInputStyles,
   globalInputAutoFillTriggerAnimations,
 } from "@washingtonpost/wpds-input-shared";
-import { InputLabel } from "@washingtonpost/wpds-input-label";
 import { ErrorMessage } from "@washingtonpost/wpds-error-message";
 import { HelperText } from "@washingtonpost/wpds-helper-text";
 import { VisuallyHidden } from "@washingtonpost/wpds-visually-hidden";
@@ -21,6 +20,7 @@ import {
   Email,
   Close,
 } from "@washingtonpost/wpds-assets";
+import { TextInputLabel } from "./TextInputLabel";
 import { StyledContainer } from "./StyledContainer";
 import type * as WPDS from "@washingtonpost/wpds-theme";
 
@@ -35,27 +35,6 @@ const UnstyledInput = styled("input", {
   ...unstyledInputStyles,
 });
 
-const TextInputLabel = styled(InputLabel, {
-  insetBlockStart: "0",
-  insetInlineStart: "$050",
-  position: "absolute",
-  pointerEvents: "none",
-  transform: `translateY(${theme.space["100"]})`,
-  transition: theme.transitions.allFast,
-  "@reducedMotion": {
-    transition: "none",
-  },
-  variants: {
-    isFloating: {
-      true: {
-        fontSize: theme.fontSizes["075"],
-        lineHeight: theme.lineHeights["100"],
-        transform: `translateY(${theme.space["050"]})`,
-      },
-    },
-  },
-});
-
 const IconContainer = styled("div", {
   color: theme.colors.accessible,
   display: "flex",

ui/input-text/src/StyledContainer.tsx

@@ -1,20 +1,26 @@
 import * as React from "react";
 import { theme, styled } from "@washingtonpost/wpds-theme";
 import type * as WPDS from "@washingtonpost/wpds-theme";
-import { Box } from "@washingtonpost/wpds-box";
 
 import {
   sharedInputStyles,
   sharedInputVariants,
+  FloatingLabelStyles
 } from "@washingtonpost/wpds-input-shared";
 
-const Container = styled(Box, {
+import { TextInputLabel } from "./TextInputLabel";
+
+const Container = styled("div", {
   ...sharedInputStyles,
   alignItems: "center",
   display: "flex",
 
   "&:focus-within": {
     borderColor: theme.colors.signal,
+
+    [`& ${TextInputLabel}`]: {
+      ...FloatingLabelStyles,
+    },
   },
 
   variants: {

ui/input-text/src/TextInputLabel.tsx

@@ -0,0 +1,21 @@
+import { styled, theme } from "@washingtonpost/wpds-theme";
+import { InputLabel } from "@washingtonpost/wpds-input-label";
+import { FloatingLabelStyles } from "@washingtonpost/wpds-input-shared";
+
+export const TextInputLabel = styled(InputLabel, {
+  insetBlockStart: "0",
+  insetInlineStart: "$050",
+  position: "absolute",
+  pointerEvents: "none",
+  transform: `translateY(${theme.space["100"]})`,
+  transition: theme.transitions.allFast,
+  "@reducedMotion": {
+    transition: "none",
+  },
+
+  variants: {
+    isFloating: {
+      true: FloatingLabelStyles,
+    },
+  },
+});

ui/input-text/src/play.stories.tsx

@@ -49,6 +49,12 @@ InputText.parameters = {
   chromatic: { disableSnapshot: true },
 };
 
+export const AutoFocus = Template.bind({});
+
+AutoFocus.args = {
+  autoFocus: true,
+};
+
 const SynchContainer = styled("div", {
   display: "flex",
   alignItems: "center",

ui/input-textarea/src/InputTextarea.tsx

@@ -8,6 +8,7 @@ import {
   sharedInputVariants,
   useFloating,
   globalInputAutoFillTriggerAnimations,
+  FloatingLabelStyles,
 } from "@washingtonpost/wpds-input-shared";
 import { InputLabel } from "@washingtonpost/wpds-input-label";
 import { ErrorMessage } from "@washingtonpost/wpds-error-message";
@@ -58,12 +59,19 @@ const ControlCSS = css({
   display: "flex",
   flexDirection: "column",
   position: "relative",
+
+  "&:focus-within": {
+
+    [`& ${TextAreaLabel}`]: {
+      ...FloatingLabelStyles,
+    },
+  },
 });
 
 export interface InputTextareaProps
   extends Omit<
-    WPDS.VariantProps<typeof InputTextareaCSS>,
-    "isInvalid" | "isDisabled"
+  WPDS.VariantProps<typeof InputTextareaCSS>,
+  "isInvalid" | "isDisabled"
   > {
   /** Override CSS */
   css?: WPDS.CSS;