mirror of
https://github.com/usebruno/bruno.git
synced 2026-06-11 09:51:30 +00:00
260c9e1f4c
* refactor: replace old Checkbox component and Added new TextInput, MaskedInput, and Select components - Deleted the old Checkbox and StyledWrapper components from the components directory. - Introduced a new Checkbox component with enhanced features including indeterminate state and customizable icons. - Added a new StyledWrapper for the Checkbox to manage styles and layout. - Created InputWrapper and StyledWrapper components for consistent form field handling. - Added new TextInput, MaskedInput, and Select components with their respective styles for improved UI consistency. * refactor: enhance Checkbox, InputWrapper, and Select components with accessibility improvements - Added useId for unique ID generation in Checkbox and Select components, improving accessibility. - Updated Checkbox to use generated IDs for aria attributes and labels. - Refactored InputWrapper to accept and apply generated IDs for label, description, and error elements. - Modified Select component to include aria attributes for better screen reader support. - Adjusted StyledWrapper imports to reference constants for consistent styling across components.
34 lines
881 B
JavaScript
34 lines
881 B
JavaScript
import styled from 'styled-components';
|
|
import { INPUT_SIZES } from './constants';
|
|
|
|
const StyledWrapper = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
|
|
.input-wrapper-label {
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
font-size: ${(props) => props.theme.font.size[INPUT_SIZES[props.$size || 'md'].labelFontSize]};
|
|
color: ${(props) => props.theme.colors.text.body};
|
|
}
|
|
|
|
.input-wrapper-required {
|
|
color: ${(props) => props.theme.colors.text.danger};
|
|
margin-left: 0.125rem;
|
|
}
|
|
|
|
.input-wrapper-description {
|
|
font-size: ${(props) => props.theme.font.size.xs};
|
|
color: ${(props) => props.theme.colors.text.muted};
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.input-wrapper-error {
|
|
font-size: ${(props) => props.theme.font.size.xs};
|
|
color: ${(props) => props.theme.colors.text.danger};
|
|
margin-top: 0.25rem;
|
|
}
|
|
`;
|
|
|
|
export default StyledWrapper;
|