TextArea polish + story (#28040)

frontend/src/metabase/core/components/TextArea/TextArea.stories.tsx

+import React from "react";
+import type { ComponentStory } from "@storybook/react";
+import TextArea from "./TextArea";
+
+export default {
+  title: "Core/Text Area",
+  component: TextArea,
+};
+
+const Template: ComponentStory<typeof TextArea> = args => {
+  return <TextArea {...args} />;
+};
+
+export const Default = Template.bind({});

frontend/src/metabase/core/components/TextArea/TextArea.styled.tsx

 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { color } from "metabase/lib/colors";
+import { focusOutlineStyle } from "metabase/core/style/input";
 
 export interface TextAreaRootProps {
   readOnly?: boolean;
@@ -25,6 +26,9 @@ export const TextAreaRoot = styled.textarea<TextAreaRootProps>`
     border-color: ${() => color("brand")};
     transition: border 300ms ease-in-out;
   }
+  ${css`
+    ${focusOutlineStyle("brand")}
+  `};
 
   ${props =>
     props.hasError &&