diff --git a/react/css/src/digitv2/components/buttonsV2.scss b/react/css/src/digitv2/components/buttonsV2.scss index 28699636cf0..8e006d97bde 100644 --- a/react/css/src/digitv2/components/buttonsV2.scss +++ b/react/css/src/digitv2/components/buttonsV2.scss @@ -53,6 +53,7 @@ padding-right: theme(digitv2.spacers.spacer6); min-width: 6.5625rem; min-height: theme(digitv2.spacers.spacer10); + border-radius: theme(digitv2.borderRadius.radius0); h2 { @extend .typography.button.large; @@ -69,6 +70,7 @@ gap: theme(digitv2.spacers.spacer2); min-width: 6.5625rem; background-color: theme(digitv2.lightTheme.primary-1); + border-radius: theme(digitv2.borderRadius.radius0); h2 { @extend .typography.button.large; @@ -130,6 +132,7 @@ min-width: 6.5625rem; border: 0.063rem solid theme(digitv2.lightTheme.primary-1); width: fit-content; + border-radius: theme(digitv2.borderRadius.radius0); &:focus { @apply outline-none; @@ -199,6 +202,7 @@ padding-right: theme(digitv2.spacers.spacer0); gap: theme(digitv2.spacers.spacer2); min-width: 6.5625rem; + border-radius: theme(digitv2.borderRadius.radius0); &:focus { @apply outline-none; @@ -258,6 +262,7 @@ padding-right: theme(digitv2.spacers.spacer0); gap: theme(digitv2.spacers.spacer2); min-width: 4.875rem; + border-radius: theme(digitv2.borderRadius.radius0); &:focus { @apply outline-none; diff --git a/react/css/src/digitv2/components/textInputV2.scss b/react/css/src/digitv2/components/textInputV2.scss index 20fa9fd7ef1..fb084e92320 100644 --- a/react/css/src/digitv2/components/textInputV2.scss +++ b/react/css/src/digitv2/components/textInputV2.scss @@ -10,6 +10,7 @@ color: theme(digitv2.lightTheme.text-primary); line-height: theme(digitv2.spacers.spacer6); border: 0.094rem solid theme(digitv2.lightTheme.alert-error); + border-radius: theme(digitv2.borderRadius.radius0); } .digit-text-input-field { @@ -226,6 +227,7 @@ color: theme(digitv2.lightTheme.text-primary); line-height: theme(digitv2.spacers.spacer6); border: 0.094rem solid theme(digitv2.lightTheme.alert-error); + border-radius: theme(digitv2.borderRadius.radius0); } .digit-employeeCard-input { @@ -238,6 +240,7 @@ border: 0.063rem solid theme(digitv2.lightTheme.text-secondary); color: theme(digitv2.lightTheme.text-primary); line-height: theme(digitv2.spacers.spacer6); + border-radius: theme(digitv2.borderRadius.radius0); } .digit-employeeCard-input:disabled { @@ -264,6 +267,7 @@ color: theme(digitv2.lightTheme.text-primary); line-height: theme(digitv2.spacers.spacer6); border: 0.094rem solid theme(digitv2.lightTheme.alert-error); + border-radius: theme(digitv2.borderRadius.radius0); } .digit-inputWrapper { @@ -322,6 +326,7 @@ border: 0.063rem solid theme(digitv2.lightTheme.text-secondary); color: theme(digitv2.lightTheme.text-primary); line-height: theme(digitv2.spacers.spacer6); + border-radius: theme(digitv2.borderRadius.radius0); } .digit-citizenCard-input--front { @@ -344,6 +349,7 @@ color: theme(digitv2.lightTheme.text-primary); line-height:theme(digitv2.spacers.spacer6); border: 0.094rem solid theme(digitv2.lightTheme.alert-error); + border-radius: theme(digitv2.borderRadius.radius0); } .digit-card-inputError { @@ -356,6 +362,7 @@ color: theme(digitv2.lightTheme.text-primary); line-height: theme(digitv2.spacers.spacer6); border: 0.094rem solid theme(digitv2.lightTheme.alert-error); + border-radius: theme(digitv2.borderRadius.radius0); } diff --git a/react/css/tailwind.config.js b/react/css/tailwind.config.js index 16bc93c6c6b..bf7c8ad9c8a 100644 --- a/react/css/tailwind.config.js +++ b/react/css/tailwind.config.js @@ -281,6 +281,22 @@ module.exports = { spacer12:"3rem", spacer13:"3.5rem" }, + borderRadius:{ + radius0:"0rem", + radius1: "0.25rem", + radius2: "0.375rem", + radius3: "0.5rem", + radius4: "0.625rem", + radius5: "0.75rem", + radius6: "0.875rem", + radius7: "1rem", + radius8: "1.125rem", + radius9: "1.25rem", + radius10: "1.5rem", + radius11: "1.75rem", + radius12: "2rem", + radius13: "2.5rem" +}, divider: { dividerS: "0.063rem solid #D6D5D4", dividerM: "0.125rem solid #D6D5D4", diff --git a/react/ui-components/src/atoms/Button.js b/react/ui-components/src/atoms/Button.js index 35f1571d31e..0153261d1ea 100644 --- a/react/ui-components/src/atoms/Button.js +++ b/react/ui-components/src/atoms/Button.js @@ -90,6 +90,7 @@ const Button = (props) => { }; const icon = IconRender(); + const borderRadius = props?.borderRadius; const formattedLabel = props?.label ? props?.variation === "link" @@ -125,7 +126,7 @@ const Button = (props) => { id={fieldId} disabled={props?.isDisabled || null} title={props?.title || ""} - style={props.style ? props.style : null} + style={props.style ? { borderRadius, ...props.style } : borderRadius ? { borderRadius } : undefined} >
{ } ${props.populators?.customIcon ? "withIcon" : ""}`; const datePickerRef = useRef(null); - + const borderRadius = props.borderRadius; return (
{ ? new Date(props?.populators?.max) : undefined } + style={props.style ? { borderRadius, ...props.style } : borderRadius ? { borderRadius } : undefined} />
{ }} ref={props.inputRef} value={props?.value} - style={{ ...props.style }} + style={props.style ? { borderRadius, ...props.style } : borderRadius ? { borderRadius } : undefined} defaultValue={props.defaultValue} minLength={props.minlength} maxLength={props.maxlength} @@ -427,7 +428,7 @@ const TextInput = (props) => { }} ref={props.inputRef} value={props?.value} - style={{ ...props.style }} + style={props.style ? { borderRadius, ...props.style } : borderRadius ? { borderRadius } : undefined} defaultValue={props.defaultValue} minLength={props.minlength} maxLength={props.maxlength} @@ -526,6 +527,7 @@ TextInput.propTypes = { errors: PropTypes.object, config: PropTypes.object, error: PropTypes.string, + borderRadius: PropTypes.string }; TextInput.defaultProps = {