Skip to content

Commit

Permalink
datepicker placeholder, tabs default
Browse files Browse the repository at this point in the history
  • Loading branch information
scottrepreneur committed Jan 5, 2024
1 parent e7c2f86 commit ac71a49
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 4 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@raidguild/design-system",
"version": "0.5.7",
"version": "0.5.8",
"license": "MIT",
"author": "Raid Guild",
"main": "./dist/src/index.js",
Expand Down
8 changes: 6 additions & 2 deletions src/components/forms/DatePicker/CustomDatePickerButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export type CustomDatePickerButtonProps = ChakraButtonProps & {
value?: React.ReactNode;
onClick?: () => void;
ref?: HTMLInputElement;
placeholder?: string;
};

export type CustomDatePickerButton = CustomDatePickerButtonProps & {
Expand All @@ -13,9 +14,12 @@ export type CustomDatePickerButton = CustomDatePickerButtonProps & {

export const CustomDatePickerButton: React.FC<CustomDatePickerButtonProps> =
forwardRef<CustomDatePickerButtonProps, 'button'>(
({ value, onClick, variant = 'outline' }, ref) => (
(
{ value, onClick, placeholder = 'Select Date', variant = 'outline' },
ref
) => (
<Button onClick={onClick} ref={ref} variant={variant}>
{value}
{value || placeholder}
</Button>
)
);
10 changes: 9 additions & 1 deletion src/components/forms/DatePicker/DatePicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export type DatePickerProps = {
localForm: Pick<UseFormReturn, 'control' | 'formState' | 'watch'>;
registerOptions?: RegisterOptions;
tooltip?: string;
placeholder?: string;
variant?: string;
spacing?: number | string;
} & Omit<ReactDatePickerProps, 'onChange'>;
Expand All @@ -36,6 +37,8 @@ const DatePicker: React.FC<DatePickerProps> = ({
localForm,
registerOptions,
tooltip,
placeholderText, // default prop from react-datepicker
placeholder, // match rest of inputs for consistency, takes priority
variant = 'ghost',
spacing,
...props
Expand Down Expand Up @@ -89,7 +92,12 @@ const DatePicker: React.FC<DatePickerProps> = ({
{...props}
{...field}
selected={watch?.(name)}
customInput={<CustomDatePickerButton variant={variant} />}
customInput={
<CustomDatePickerButton
variant={variant}
placeholder={placeholder || placeholderText}
/>
}
ref={(ref) => {
field.ref({
focus: ref?.setFocus,
Expand Down
1 change: 1 addition & 0 deletions src/stories/forms/DatePicker.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const DatePicker: StoryFn<typeof DatePickerComponent> = () => {
<DatePickerComponent
name='raidStartDate'
localForm={localForm}
placeholder='Select a date'
label='Raid Start Date'
tooltip='The date the raid is expected to start'
/>
Expand Down
3 changes: 3 additions & 0 deletions src/theme/components/Tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,8 @@ const Tabs = {
},
},
},
defaultProps: {
variant: 'default',
},
};
export default Tabs;

0 comments on commit ac71a49

Please sign in to comment.