adjust components datePicker and select (#184)

* adjust components `datePicker` and `select` * adjust types this component `select`
platformbuilders · Aug 29, 2024 · 628bc8f · 628bc8f
1 parent 92fa7c7
commit 628bc8f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 10 deletions.
diff --git a/documentation/sidebars.js b/documentation/sidebars.js
@@ -28,6 +28,7 @@ module.exports = {
           'component.paper',
           'component.Select',
           'component.textInput',
+          'component.datePicker',
           {
             Typography: [
               'component.typography',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/fluid-react",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "private": false,
   "description": "Builders React for Fluid Design System",
   "keywords": [

diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx
@@ -1,6 +1,6 @@
-import { expect, jest } from '@storybook/jest';
+import { jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
-import { configure, userEvent, within } from '@storybook/testing-library';
+import { configure } from '@storybook/testing-library';
 import DatePicker from './index';
 
 configure({
@@ -9,7 +9,6 @@ configure({
 
 //  Mocks
 const onChange = jest.fn();
-const calendarTestID = 'calendar-test-id';
 
 const meta: Meta<typeof DatePicker> = {
   title: 'Components/DatePicker',
@@ -26,6 +25,7 @@ const meta: Meta<typeof DatePicker> = {
     workDays: { control: { type: 'boolean' } },
     minDate: { control: { type: 'boolean' } },
     maxDate: { control: { type: 'boolean' } },
+    inputVariant: { type: 'string' },
   },
   args: {
     onChange: onChange,

diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx
@@ -15,6 +15,7 @@ interface Props extends DatePickerProps {
   disableYearPicker?: boolean;
   workDays?: boolean;
   holidays?: string[];
+  inputVariant?: 'default' | 'outlined';
 }
 
 const DatePickerComponent: React.FC<Props> = ({
@@ -28,6 +29,7 @@ const DatePickerComponent: React.FC<Props> = ({
   holidays,
   name,
   id,
+  inputVariant = 'outlined',
 }) => {
   const datePickerRef = useRef();
   return (
@@ -43,6 +45,7 @@ const DatePickerComponent: React.FC<Props> = ({
             onClick={openCalendar}
             onChange={(e) => onChange(e)}
             iconRight="ChevronDownIcon"
+            variant={inputVariant}
           />
         );
       }}

diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
@@ -1,9 +1,12 @@
-import { FC } from 'react';
+import { FC, SelectHTMLAttributes } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import {
   Icon,
   ScrollDownButton,
   ScrollUpButton,
+  SelectItemProps,
+  SelectTriggerProps,
+  SelectViewportProps,
   Value,
 } from '@radix-ui/react-select';
 import {
@@ -21,7 +24,7 @@ type SelectOptions = {
   value: string;
 };
 
-type Props = {
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {
   id: string;
   options: SelectOptions[];
   disabled?: boolean;
@@ -31,23 +34,34 @@ type Props = {
   onValueChange: (value: string) => void;
   defaultValue?: string;
   value?: string;
+  style?: SelectTriggerProps;
+  styleItem?: SelectItemProps;
+  styleContentItem?: SelectViewportProps;
 };
 
-const Select: FC<Props> = ({
+const Select: FC<SelectProps> = ({
   options,
   disabled = false,
   placeholder,
   onValueChange,
   value,
   defaultValue,
   id,
+  style,
+  styleItem,
+  styleContentItem,
 }) => (
   <Wrapper
     onValueChange={onValueChange}
     defaultValue={defaultValue}
     value={value}
   >
-    <StyledTrigger id={id} aria-label="select" disabled={disabled}>
+    <StyledTrigger
+      id={id}
+      aria-label="select"
+      disabled={disabled}
+      style={style}
+    >
       <Value placeholder={<PlaceholderText>{placeholder}</PlaceholderText>} />
       <Icon>
         <ChevronDownIcon />
@@ -57,9 +71,9 @@ const Select: FC<Props> = ({
       <ScrollUpButton>
         <ChevronUpIcon />
       </ScrollUpButton>
-      <StyledViewPort>
+      <StyledViewPort style={styleContentItem}>
         {options.map((item) => (
-          <StyledItem value={item.value} key={item.value}>
+          <StyledItem value={item.value} key={item.value} style={styleItem}>
             <StyledItemText>{item.option}</StyledItemText>
           </StyledItem>
         ))}

diff --git a/src/components/Select/select.stories.tsx b/src/components/Select/select.stories.tsx
@@ -21,6 +21,9 @@ const meta: Meta<typeof Select> = {
     helperMessage: 'Select Test',
     label: 'Select Test',
     value: 'Female',
+    style: {},
+    styleContentItem: {},
+    styleItem: undefined,
     options: [
       {
         value: 'Male',