mirror of
https://github.com/dbeaver/cloudbeaver.git
synced 2026-09-24 16:04:36 +08:00
Sychev Andrey
584e5bb260
* refactor: rename css variable in order to be more descriptive and stick to the naming convention * refactor: unify controls, add new global control css variables * feat: add radio component * docs: add radio stories * docs: add input docs story * docs: add simple form story * refactor: change default radio dot size * refactor: change class name for radio children wrapper * refactor: don't reexport inner radio elements * refactor: simplify RadioGroup interface by removing items props, make label(any) required The radiogroup must have an accessible name either by a visible label referenced by aria-labelledby or has a label specified with aria-label. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/radiogroup_role * refactor: use label wrapper for input component to simplify structure * refactor: add classname for radio group container
26 lines
930 B
TypeScript
26 lines
930 B
TypeScript
/*
|
|
* CloudBeaver - Cloud Database Manager
|
|
* Copyright (C) 2020-2025 DBeaver Corp and others
|
|
*
|
|
* Licensed under the Apache License, Version 2.0.
|
|
* you may not use this file except in compliance with the License.
|
|
*/
|
|
|
|
import { type ComponentPropsWithRef } from 'react';
|
|
import './Input.css';
|
|
|
|
export interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
|
|
size?: 'small' | 'medium' | 'large' | 'xlarge';
|
|
label?: React.ReactNode;
|
|
}
|
|
|
|
export const Input: React.FC<InputProps> = function Input({ size, className, ...props }) {
|
|
const classNameToApply = `dbv-kit-input dbv-kit-input--${size ?? 'medium'} ${className ?? ''}`.trim();
|
|
return (
|
|
<label className="dbv-kit-input-wrapper">
|
|
{props.label && <div className={`dbv-kit-input__title ${props.required ? 'dbv-kit-input__title--required' : ''}`}>{props.label}</div>}
|
|
<input className={classNameToApply} {...props} />
|
|
</label>
|
|
);
|
|
};
|