Merge pull request #79 from qwikerx/fix/select-size

fix: change size to sizing into Select component
qwikerx · Jun 9, 2024 · 157291d · 157291d
2 parents 3bb5483 + a0092b6
commit 157291d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/apps/web/src/examples.ts b/apps/web/src/examples.ts
@@ -887,7 +887,7 @@ export const examples: Record<string, Example[]> = {
       description: 'Get started with the small, default, and large sizes for the select component from the example below.',
       url: '/examples/[theme-rtl]/select/04-sizes',
       content:
-        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Select } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const selected = useSignal(\'\')\n  const countries = [\n    { value: \'us\', name: \'United States\' },\n    { value: \'ca\', name: \'Canada\' },\n    { value: \'fr\', name: \'France\' },\n  ]\n\n  return (\n    <>\n      <div class="p-3 flex flex-col gap-3">\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Small" size="sm" />\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Medium" size="md" />\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Large" size="lg" />\n      </div>\n    </>\n  )\n})',
+        'import { component$, useSignal } from \'@builder.io/qwik\'\nimport { Select } from \'flowbite-qwik\'\n\nexport default component$(() => {\n  const selected = useSignal(\'\')\n  const countries = [\n    { value: \'us\', name: \'United States\' },\n    { value: \'ca\', name: \'Canada\' },\n    { value: \'fr\', name: \'France\' },\n  ]\n\n  return (\n    <>\n      <div class="p-3 flex flex-col gap-3">\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Small" sizing="sm" />\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Medium" sizing="md" />\n        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Large" sizing="lg" />\n      </div>\n    </>\n  )\n})',
       height: '200',
     },
     {

diff --git a/apps/web/src/routes/examples/[theme-rtl]/select/04-sizes/index@examples.tsx b/apps/web/src/routes/examples/[theme-rtl]/select/04-sizes/index@examples.tsx
@@ -19,9 +19,9 @@ export default component$(() => {
   return (
     <>
       <div class="p-3 flex flex-col gap-3">
-        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Small" size="sm" />
-        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Medium" size="md" />
-        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Large" size="lg" />
+        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Small" sizing="sm" />
+        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Medium" sizing="md" />
+        <Select bind:value={selected} options={countries} placeholder="Choose a country" label="Large" sizing="lg" />
       </div>
     </>
   )

diff --git a/packages/lib/src/components/Select/Select.tsx b/packages/lib/src/components/Select/Select.tsx
@@ -11,20 +11,20 @@ type SelectProps = PropsOf<'select'> & {
   placeholder?: string
   disabled?: boolean
   underline?: boolean
-  size?: InputSize
+  sizing?: InputSize
   validationStatus?: ValidationStatus
   validationMessage?: JSXOutput
   helper?: JSXOutput
 }
 
-export const Select = component$<SelectProps>(({ label, options, class: classNames, ...props }) => {
+export const Select = component$<SelectProps>(({ label, options, sizing = 'md', ...props }) => {
   const validationStatus = useComputed$(() => props.validationStatus)
-  const size = useComputed$(() => props.size ?? ('md' as InputSize))
+  const sizingComputed = useComputed$(() => sizing as InputSize)
   const disabled = useComputed$(() => props.disabled ?? false)
   const underline = useComputed$(() => props.underline ?? false)
 
   const { labelClasses, selectClasses, validationWrapperClasses } = useSelectClasses({
-    size,
+    sizing: sizingComputed,
     disabled,
     underline,
     validationStatus,

diff --git a/packages/lib/src/components/Select/composables/use-select-classes.ts b/packages/lib/src/components/Select/composables/use-select-classes.ts
@@ -23,7 +23,7 @@ const errorInputClasses =
   'bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500'
 
 export type UseSelectClassesProps = {
-  size: Signal<InputSize>
+  sizing: Signal<InputSize>
   disabled: Signal<boolean>
   underline: Signal<boolean>
   validationStatus: Signal<ValidationStatus | undefined>
@@ -45,7 +45,7 @@ export function useSelectClasses(props: UseSelectClassesProps): {
     return twMerge(
       defaultSelectClasses,
       classByStatus,
-      selectSizeClasses[props.size.value],
+      selectSizeClasses[props.sizing.value],
       props.disabled.value && disabledSelectClasses,
       props.underline.value ? underlineSelectClasses : 'border border-gray-300 rounded-lg',
       props.underline.value && underlineByStatus,