ui-components: Uppercase text transformation

Avatar component has to be forced to display text with upper-case. Added `transformCase` prop with the same styles as in `Badge` component to follow the same styles.
cockroachdb · May 22, 2020 · 407133a · 407133a
1 parent b4d4765
commit 407133a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 2 deletions.
diff --git a/packages/storybook-ui-components/stories/2-Avatar.stories.tsx b/packages/storybook-ui-components/stories/2-Avatar.stories.tsx
@@ -136,6 +136,7 @@ export const demo = () => (
     )}
     onClick={action("button-click")}
     selectable={boolean("Selectable", true)}
+    transformCase={select("transformCase", ["none", "uppercase"], "uppercase")}
   >
     {text("Text", "RL")}
   </Avatar>

diff --git a/packages/ui-components/src/Avatar/Avatar.module.scss b/packages/ui-components/src/Avatar/Avatar.module.scss
@@ -69,6 +69,18 @@
   letter-spacing: 0.1px;
 }
 
+.noTransform {
+  text-transform: none;
+}
+
+.transformCase-none {
+  text-transform: none;
+}
+
+.transformCase-uppercase {
+  text-transform: uppercase;
+}
+
 .disabled {
   background: $crl-neutral-2;
   color: $crl-base-text--light;

diff --git a/packages/ui-components/src/Avatar/Avatar.test.tsx b/packages/ui-components/src/Avatar/Avatar.test.tsx
@@ -10,6 +10,7 @@ describe("Avatar", () => {
       const className = wrapper.prop("className");
       expect(className).toContain("intent-default");
       expect(className).toContain("size-l");
+      expect(className).toContain("transformCase-uppercase");
       expect(className).not.toContain("disabled");
       expect(className).not.toContain("selectable");
     });

diff --git a/packages/ui-components/src/Avatar/Avatar.tsx b/packages/ui-components/src/Avatar/Avatar.tsx
@@ -11,10 +11,12 @@ export interface AvatarProps {
   disabled?: boolean;
   selectable?: boolean;
   onClick?: () => void;
+  transformCase?: AvatarCase;
 }
 
 export type AvatarSize = "xs" | "s" | "m" | "l";
 export type AvatarIntent = "default" | "active" | "pending" | "invalid";
+export type AvatarCase = "none" | "uppercase";
 
 const cx = classNames.bind(styles);
 
@@ -25,15 +27,16 @@ const Avatar: React.FC<AvatarProps> = ({
   disabled = false,
   selectable = false,
   onClick,
+  transformCase = "uppercase",
 }) => {
   const classnames = useMemo(
     () =>
-      cx("avatar", objectToClassnames({ size }), {
+      cx("avatar", objectToClassnames({ size, transformCase }), {
         disabled,
         selectable: !disabled && selectable,
         [`intent-${intent}`]: !disabled,
       }),
-    [intent, size, disabled, selectable],
+    [intent, size, disabled, selectable, transformCase],
   );
 
   const onClickHandler = useCallback(() => {