style(fractal): fix the content offset with border transition

packages/fractal/.storybook/main.ts

@@ -4,6 +4,7 @@ import { mergeConfig } from 'vite'
 const config: StorybookConfig = {
  addons: [
  '@storybook/addon-essentials',
+ '@storybook/addon-styling',
  '@storybook/addon-links',
  '@storybook/addon-interactions',
  '@storybook/addon-a11y',

packages/fractal/fractal-panda.preset.ts

@@ -48,11 +48,13 @@ const fractalPreset = definePreset({
  selectContainer: recipes.selectContainer,
  selectDescription: recipes.selectDescription,
  selectDropdown: recipes.selectDropdown,
+ selectIndicator: recipes.selectIndicator,
  selectItem: recipes.selectItem,
  selectItemGroup: recipes.selectItemGroup,
  selectItemSeparator: recipes.selectItemSeparator,
  selectLabel: recipes.selectLabel,
  selectTrigger: recipes.selectTrigger,
+ selectValue: recipes.selectValue,
 
  typography: recipes.typography,
  },

packages/fractal/package.json

@@ -55,8 +55,9 @@
  "build:info": "yarn run prebuild:info && yarn panda ship --outfile dist/fractal.buildinfo.json",
  "prebuild:styles": "mkdir -p ./dist",
  "build:styles": "yarn run prebuild:styles && yarn panda cssgen --outfile dist/fractal.css",
+ "clean:cache": "rm -Rf ./node_modules/.cache >/dev/null 2>&1 || true",
  "clean:build": "rm -Rf ./dist >/dev/null 2>&1 || true",
- "clean:fonts": "rm -Rf assets/fonts >/dev/null 2>&1 || true",
+ "clean:fonts": "rm -Rf ./assets/fonts >/dev/null 2>&1 || true",
  "clean:storybook": "rm -Rf storybook-static >/dev/null 2>&1 || true",
  "predev": "yarn run -T turbo run update:fonts --filter=@snowball-tech/fractal",
  "dev": "yarn run predev && yarn run -T concurrently \"yarn run -T nodemon -e \\\"\\\" --watch \\\"./fractal-panda.preset.ts\\\" --exec \\\"yarn run build:code\\\"\" \"yarn run dev:storybook\"",
@@ -121,6 +122,7 @@
  "@radix-ui/react-label": "^2.0.2",
  "@radix-ui/react-select": "^1.2.2",
  "@snowball-tech/design-tokens": "4.2.0",
+ "@storybook/addon-styling": "^1.3.2",
  "lodash": "^4.17.21",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"

packages/fractal/src/components/InputCheckbox/InputCheckbox.recipe.ts

@@ -27,8 +27,8 @@ export const inputCheckboxContainer: ReturnType<typeof defineRecipe> =
  color: 'var(--color-text-dark)',
  display: 'flex',
  gap: 'var(--size-spacing-2)',
- p: 'var(--size-spacing-1)',
- pr: 'var(--size-spacing-2)',
+ p: 'var(--size-spacing-2)',
+ shadow: 'var(--shadow-brutal-1)',
  },
 
  defaultVariants: {
@@ -59,11 +59,12 @@ export const inputCheckbox: ReturnType<typeof defineRecipe> = defineRecipe({
  all: 'unset',
  backgroundColor: 'var(--color-base-white)',
  border: 'var(--size-border-2) solid var(--color-border-default)',
+ borderRadius: 'var(--size-radius-xs)',
  cursor: 'var(--cursor-clickable)',
  display: 'flex',
- height: '24px',
+ height: '20px',
  justifyContent: 'center',
- width: '24px',
+ width: '20px',
  },
 
  defaultVariants: {
@@ -112,6 +113,11 @@ export const inputCheckboxCheckmark: ReturnType<typeof defineRecipe> =
 
  // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
  base: {
+ '& > svg': {
+ height: '20px',
+ width: '20px',
+ },
+
  '.group.disabled &': {
  color: 'var(--color-text-disabled)',
  },
@@ -166,7 +172,6 @@ export const inputCheckboxLabel: ReturnType<typeof defineRecipe> = defineRecipe(
  flexGrow: 1,
  overflow: 'auto',
  overflowWrap: 'break-word',
- py: 'var(--size-spacing-2)',
  },
 
  defaultVariants: {

packages/fractal/src/components/InputText/InputText.recipe.ts

@@ -60,7 +60,7 @@ export const inputTextIcon: ReturnType<typeof defineRecipe> = defineRecipe({
  '.group.icon-right &': {
  right: 'var(--size-spacing-1)',
  },
- '.group.successfull &': {
+ '.group.success &': {
  color: `var(--color-icon-input-success)`,
  },
 
@@ -96,21 +96,28 @@ export const inputText: ReturnType<typeof defineRecipe> = defineRecipe({
  '&:not(:is(:disabled, [disabled], [data-disabled], :read-only, [data-read-only]))':
  {
  '&:not(:is(:focus, [data-focus]))': {
+ '.group.icon-left:is(:hover, [data-hover]) &': {
+ pl: 'calc(var(--size-spacing-5) - 0.085rem)',
+ },
+
  _groupHover: {
  backgroundColor: `var(--color-background-input-hover)`,
  border: `var(--border-input-hover)`,
  color: `var(--color-text-input-hover)`,
- margin:
- '0 calc((var(--size-border-2) - var(--size-border-1)) * -1)',
+ pl: 'calc(var(--size-input-padding-horizontal) - 0.085rem)',
  shadow: `var(--shadow-input-hover)`,
  },
  },
 
  _focus: {
+ '.group.icon-left &': {
+ pl: 'calc(var(--size-spacing-5) - 0.085rem)',
+ },
+
  backgroundColor: `var(--color-background-input-focus)`,
  border: `var(--border-input-focus)`,
  color: `var(--color-text-input-focus)`,
- margin: '0 calc((var(--size-border-2) - var(--size-border-1)) * -1)',
+ pl: 'calc(var(--size-input-padding-horizontal) - 0.085rem)',
  shadow: `var(--shadow-input-focus)`,
  },
  },
@@ -124,10 +131,17 @@ export const inputText: ReturnType<typeof defineRecipe> = defineRecipe({
  '.group.icon-right &': {
  pr: 'var(--size-spacing-5)',
  },
- '.group.successfull &': {
+ '.group.success &': {
  border: `var(--border-input-success)`,
  },
 
+ '.group.success &, .group.error &': {
+ pl: 'calc(var(--size-input-padding-horizontal) - 0.085rem)',
+ },
+ '.group.success.icon-left &, .group.error.icon-left &': {
+ pl: 'calc(var(--size-spacing-5) - 0.085rem)',
+ },
+
  _disabled: {
  backgroundColor: `var(--color-background-input-disabled)`,
  border: `var(--border-input-disabled)`,

packages/fractal/src/components/InputText/InputText.tsx

@@ -65,7 +65,7 @@ export default function InputText({
  !isEmpty(iconToDisplay) ? `icon-${iconPosition}` : '',
  readOnly ? 'readonly' : '',
  required ? 'required' : '',
- isSuccessful ? 'successfull' : '',
+ isSuccessful ? 'success' : '',
  )
 
  const inputElement = (

packages/fractal/src/components/Select/Select.recipe.ts

@@ -49,12 +49,6 @@ export const selectTrigger: ReturnType<typeof defineRecipe> = defineRecipe({
 
  // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
  base: {
- '& > *': {
- alignSelf: 'center',
- },
- '& > span:not([aria-hidden])': {
- flexGrow: 1,
- },
  '& > span[aria-hidden], & > span[aria-hidden] > svg': {
  height: '100%',
  },
@@ -65,22 +59,20 @@ export const selectTrigger: ReturnType<typeof defineRecipe> = defineRecipe({
 
  // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
  '&:not(:is(:disabled, [disabled], [data-disabled]))': {
- '&:is(:focus-visible, [data-focus-visible]), &:focus-within': {
+ _focus: {
  backgroundColor: `var(--color-background-select-focus)`,
  border: `var(--border-select-focus)`,
  color: `var(--color-text-select-focus)`,
- margin: '0 calc((var(--size-border-2) - var(--size-border-1)) * -1)',
+ pl: 'calc(var(--size-select-padding-horizontal) - 0.085rem)',
  shadow: `var(--shadow-select-focus)`,
  },
 
- '&:not(:is(:focus, [data-focus]))': {
- _groupHover: {
- backgroundColor: `var(--color-background-select-hover)`,
- border: `var(--border-select-hover)`,
- color: `var(--color-text-select-hover)`,
- margin: '0 calc((var(--size-border-2) - var(--size-border-1)) * -1)',
- shadow: `var(--shadow-select-hover)`,
- },
+ _groupHover: {
+ backgroundColor: `var(--color-background-select-hover)`,
+ border: `var(--border-select-hover)`,
+ color: `var(--color-text-select-hover)`,
+ pl: 'calc(var(--size-select-padding-horizontal) - 0.085rem)',
+ shadow: `var(--shadow-select-hover)`,
  },
  },
 
@@ -112,6 +104,50 @@ export const selectTrigger: ReturnType<typeof defineRecipe> = defineRecipe({
  },
 })
 
+export const selectValue: ReturnType<typeof defineRecipe> = defineRecipe({
+ description: 'Select currently selected value (or placeholder)',
+ name: 'selectValue',
+
+ // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
+ jsx: ['Select'],
+
+ // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
+ base: {
+ alignSelf: 'center',
+ flexGrow: 1,
+ },
+})
+
+export const selectIndicator: ReturnType<typeof defineRecipe> = defineRecipe({
+ description: 'Select status indicator (arrow)',
+ name: 'selectIndicator',
+
+ // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
+ jsx: ['Select'],
+
+ // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
+ base: {
+ '& > svg': {
+ height: '100%',
+ },
+
+ '.group.opened &': {
+ transform: 'rotate(180deg)',
+ },
+
+ '.trigger:focus &': {
+ mr: '-0.085rem',
+ },
+ _groupHover: {
+ mr: '-0.085rem',
+ },
+
+ alignSelf: 'center',
+ height: '100%',
+ transition: 'transform 300ms ease-out',
+ },
+})
+
 export const selectDropdown: ReturnType<typeof defineRecipe> = defineRecipe({
  description: 'Select dropdown',
  name: 'selectDropdown',

packages/fractal/src/components/Select/Select.stories.tsx

@@ -121,15 +121,10 @@ export const Playground: Story = {
  control: 'radio',
  mapping: {
  'Grouped items': itemsWithGroups,
- 'Mixed items and groups (with separators)':
- itemsWithGroupsAndSeparators,
+ 'Mixed items': itemsWithGroupsAndSeparators,
  'Simple items': items,
  },
- options: [
- 'Simple items',
- 'Grouped items',
- 'Mixed items and groups (with separators)',
- ],
+ options: ['Simple items', 'Grouped items', 'Mixed items'],
  },
  },
  args: {

packages/fractal/src/components/Select/Select.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { UilAngleDown as AngleDownIcon } from '@iconscout/react-unicons'
 import { Label as RxLabel } from '@radix-ui/react-label'
 import * as RxSelect from '@radix-ui/react-select'
@@ -6,14 +8,17 @@ import {
  selectContainer,
  selectDescription,
  selectDropdown,
+ selectIndicator,
  selectLabel,
  selectTrigger,
+ selectValue,
  typography,
 } from '@snowball-tech/fractal-panda/recipes'
 import isEmpty from 'lodash/fp/isEmpty'
 import isFunction from 'lodash/fp/isFunction'
 import omit from 'lodash/fp/omit'
 import uniqueId from 'lodash/fp/uniqueId'
+import { useState } from 'react'
 
 import type { SelectProps } from './Select.types'
 
@@ -41,20 +46,18 @@ export default function Select({
  value,
  ...props
 }: SelectProps) {
+ const [isOpen, setIsOpen] = useState(open)
+
  const groupClassNames = cx(
  'group',
  selectContainer(),
  props.className,
  disabled ? 'disabled' : '',
  required ? 'required' : '',
+ isOpen ? 'opened' : 'closed',
  )
 
- const dropdownClassNames = cx(
- 'group',
- selectDropdown(),
- disabled ? 'disabled' : '',
- required ? 'required' : '',
- )
+ const dropdownClassNames = cx('group', selectDropdown())
 
  return (
  <div className={groupClassNames}>
@@ -86,23 +89,33 @@ export default function Select({
  : {})}
  {...(isFunction(onOpenChange)
  ? {
- onOpenChange: (isOpened: boolean) => onOpenChange(isOpened),
+ onOpenChange: (isOpened: boolean) => {
+ setIsOpen(isOpened)
+ onOpenChange(isOpened)
+ },
  }
  : {})}
  // Be careful, arguments of `omit` from lodash FP are flipped!
  {...omit(['autoComplete', 'className', 'dir'], props)}
  >
  <RxSelect.Trigger
- className={cx(typography({ variant: 'body-1' }), selectTrigger())}
- >
- {isEmpty(displayedValue) ? (
- <RxSelect.Value placeholder={placeholder} />
- ) : (
- <RxSelect.Value placeholder={placeholder}>
- {displayedValue}
- </RxSelect.Value>
+ className={cx(
+ 'trigger',
+ typography({ variant: 'body-1' }),
+ selectTrigger(),
  )}
- <RxSelect.Icon>
+ >
+ <div className={selectValue()}>
+ {isEmpty(displayedValue) ? (
+ <RxSelect.Value placeholder={placeholder} />
+ ) : (
+ <RxSelect.Value placeholder={placeholder}>
+ {displayedValue}
+ </RxSelect.Value>
+ )}
+ </div>
+
+ <RxSelect.Icon className={selectIndicator()}>
  <AngleDownIcon />
  </RxSelect.Icon>
  </RxSelect.Trigger>

packages/fractal/src/components/index.ts

@@ -1,4 +1,5 @@
 export { Button } from './Button/index.js'
 export { InputCheckbox } from './InputCheckbox/index.js'
 export { InputText } from './InputText/index.js'
+export { Select } from './Select/index.js'
 export { Typography } from './Typography/index.js'