animate label on focus for Select element

artsy · May 24, 2023 · dbec911 · dbec911
1 parent 5f34a15
commit dbec911
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/palette/src/elements/Select/Select.tsx b/packages/palette/src/elements/Select/Select.tsx
@@ -198,7 +198,7 @@ const Container = styled(Box)<ContainerProps>`
           ${props.error && SELECT_STATES.error}
         }
 
-        &:has(option[value=""]:checked) {
+        &:not(:focus):has(option[value=""]:checked) {
           ${props.title &&
           css`
             color: transparent;

diff --git a/packages/palette/src/elements/Select/tokens.ts b/packages/palette/src/elements/Select/tokens.ts
@@ -26,6 +26,8 @@ export const SELECT_STATES: Record<State, any> = {
 
     + label {
       color: ${themeGet("colors.blue100")};
+      transform: translateY(-150%);
+      font-size: ${themeGet("textVariants.xs.fontSize")};
     }
 
     &:has(option[value=""]:checked) + label {