Skip to content

hzc-7906: Restyle SelectField and AutocompleteField to HIVE v4#633

Open
pawelklasa wants to merge 10 commits into
masterfrom
feature/hzc-7906-restyle-select-autocomplete-hive-v4
Open

hzc-7906: Restyle SelectField and AutocompleteField to HIVE v4#633
pawelklasa wants to merge 10 commits into
masterfrom
feature/hzc-7906-restyle-select-autocomplete-hive-v4

Conversation

@pawelklasa
Copy link
Copy Markdown
Contributor

HZC-7906

Restyle the entire Select stack and AutocompleteField to HIVE 4.0.

Scope

  • SelectField, MultiSelectField, CheckableSelectField (+ Formik wrappers, Common, helpers)
  • AutocompleteField (+ Formik wrapper)

Changes

  • v4 CSS modules with --hive-color-*-v4 tokens, --hive-grid, --hive-border-radius, --hive-border-width
  • 36px control height, 8px radius, hover -> text-v4 border, focus -> primary-v4 + 3px halo (matches TextField/Button)
  • Menu: 8px radius, soft shadow, 40px option rows, hover surface-hover-v4, selected surface-active-v4 + medium weight
  • Open-state control drops the focus halo so it looks attached to the menu
  • v3 fallback under src/old, exported as @hazelcast/ui/old
  • Storybook: Playground + MDX docs (Overview / Guidelines / Accessibility) + LegacyV3 story for each component
  • Migration notes in docs/migration-v4.md

Tests

  • 47/47 Select + Autocomplete tests pass
  • Lint clean

pawelklasa added 7 commits May 7, 2026 10:24
- migrate SelectField, MultiSelectField, CheckableSelectField, AutocompleteField to HIVE 4.0 visuals (36px height, 8px radius, --hive-* tokens)

- SCSS modules -> CSS modules

- preserve v3 fallback under @hazelcast/ui/old (src/old/Select/* and src/old/AutocompleteField*)

- update consumer story/test imports to .css

- doc: add summary row + dedicated sections to docs/migration-v4.md
…style-select-autocomplete-hive-v4

# Conflicts:
#	docs/migration-v4.md
#	src/old/index.ts
@@ -0,0 +1,132 @@
import { Meta, Title, Canvas, Controls } from '@storybook/blocks'
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Buttons and border looks random

Image

Copy link
Copy Markdown
Contributor

@fantkolja fantkolja left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I click exactly on the icon it does not open

Image

@@ -0,0 +1,132 @@
import { Meta, Title, Canvas, Controls } from '@storybook/blocks'
import * as AutocompleteFieldStories from './AutocompleteField.stories'
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It still looks misaligned

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants