Skip to content

v1.1.0

Latest

Choose a tag to compare

@github-actions github-actions released this 30 Jul 18:34

@starbemtech/react-starsystem@1.1.0

Minor Changes

  • 5baa862: Input: move the label above the field instead of floating it inside the bordered box (matches Select/FormField's existing label position — visual change for consumers using <Input label="..."/> standalone without a FormField wrapper, no type-level breaking change). Add variant (outline default, filled, underline), size (sm, md default, lg), a success state (parallel to error, mutually exclusive — error wins if both are set), and prefix/suffix add-ons. Also fixes the md size's padding/radius, which previously used 16px/8px padding and a 16px radius instead of the design system's 14px/10px padding and 12px radius.

  • 0f45761: Textarea: move the label above the field instead of floating it inside the bordered box (matches Input/Select/FormField's label position — visual change for consumers using <Textarea label="..."/> standalone, no type-level breaking change). Add variant (outline default, filled, underline), size (sm, md default, lg), a success state (parallel to error, mutually exclusive — error wins if both are set), and an opt-in character counter (showCount, requires maxLength).

    Select: add variant, size, and success, matching Input/Textarea. Fixes the trigger's fixed 56px height and 16px/8px padding (now organic height with 14px/10px padding on the md default, matching the design system), and fixes the trigger and popover menu background, which used an incorrect gray (#F7F7F7) instead of white.

    Internal: extracted the variant/size color and sizing logic shared by Input, Textarea, and Select into src/components/shared/fieldStyles.ts — not part of the public API, but public type aliases (InputVariant, InputSize, TextareaVariant, TextareaSize, SelectVariant, SelectSize) are preserved for existing imports.


🔖 Commits

Changes since v1.0.1:

  • 18c08dc chore: release v1.1.0
  • 97eafa4 ✨ (Sidebar.stories.tsx): add support for collapsible UserFooter component to show/hide user name based on collapsed state
  • 0f45761 chore: add changeset for Textarea/Select DS parity
  • fcc4a07 docs: add variant/size/success/counter stories for Textarea and Select
  • 3c20bbb feat(Select): add variant/size/success, fix background gray-bug and fixed height
  • 688338d fix(Textarea): remove unrequested opacity-60 from disabled state
  • ad4d8d1 feat(Textarea): add opt-in character counter tied to maxLength
  • 08cec86 feat(Textarea): add variant/size/success, move label above field
  • 33e183d refactor(Input): extract field variant/size styles into shared module
  • b9dca08 docs: add Textarea/Select DS parity implementation plan
  • d7478a7 docs: add Textarea/Select DS parity design spec
  • fc63d74 docs: add Textarea/Select DS parity implementation plan
  • 6394580 docs: add Textarea/Select DS parity design spec
  • fd3690e ✨ (Avatar.tsx): Update Avatar component to conditionally show different background and text colors based on showImage prop ♻️ (Input.tsx): Refactor getFieldColorClasses function to use consistent background and border colors for different variants and states ♻️ (Toggle.tsx): Refactor Toggle component to use primary base color for checked state background color instead of secondary darker color
  • cffaf61 test(Input): add missing a11y tests for success and prefix+error states
  • 5baa862 chore: add changeset for Input redesign
  • bea5145 docs(Input): add stories for variant/size/success/prefix-suffix
  • e34e0e1 fix(Input): add missing divider border on prefix/suffix
  • 4825fa0 feat(Input): add prefix/suffix add-ons
  • 0b3faf9 feat(Input): add success state with hint icon
  • 9682eab feat(Input): add variant/size, move label above field
  • 7295f8d docs: add Input redesign implementation plan
  • d63b089 docs: add Input redesign design spec
  • 7300e2c docs: add Input redesign implementation plan
  • 428f480 docs: add Input redesign design spec
  • 83d7a10 ✨ (Modal.stories.tsx): Update Modal stories to initialize the 'open' state as false instead of true to prevent modals from opening by default. Add buttons to manually open the modals for better user interaction.

Full diff


📦 Install

pnpm add @starbemtech/react-starsystem@1.1.0

🚀 Basic usage

import { Button } from '@starbemtech/react-starsystem'
import '@starbemtech/react-starsystem/style.css'

🎨 Design Tokens

import { colors, fontFamily, fontSize, spacing, borderRadius } from '@starbemtech/react-starsystem'

// colors
colors.primary.base   // #FF5100
colors.secondary.base // #7F56D9
colors.terciary.base  // #ED2E98