Skip to content

Commit

Permalink
Merge pull request #163 from capitec/162-bug-no-sensible-default-for-…
Browse files Browse the repository at this point in the history 
…input-error-font-color

Fixed default fallback for input components error font color
  • Loading branch information
@stefan505
stefan505 authored Jul 6, 2023
2 parents 441bad9 + 2e21c26 commit 978fe95
Show file tree
Hide file tree
Showing 10 changed files with 332 additions and 333 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@capitec/omni-components",
"version": "0.7.14",
"version": "0.8.0",
"type": "module",
"description": "Modern UI component library for mobile and web",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion src/currency-field/CurrencyField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,7 @@ export class CurrencyField extends OmniFormElement {
}
.field.error {
color: var(--omni-currency-field-error-font-color);
color: var(--omni-currency-field-error-font-color, var(--omni-font-color));
}
.label {
Expand Down
206 changes: 103 additions & 103 deletions src/date-picker/DatePicker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,130 +240,130 @@ export class DatePicker extends OmniFormElement {
return [
super.styles,
css`
/* Added to ensure that component has pointer cursor applied */
:host {
cursor: pointer;
}
.field {
flex: 1 1 auto;
border: none;
background: none;
box-shadow: none;
outline: 0;
padding: 0;
margin: 0;
text-align: var(--omni-date-picker-text-align, left);
color: var(--omni-date-picker-font-color, var(--omni-font-color));
font-family: var(--omni-date-picker-font-family, var(--omni-font-family));
font-size: var(--omni-date-picker-font-size, var(--omni-font-size));
font-weight: var(--omni-date-picker-font-weight, var(--omni-font-weight));
height: var(--omni-date-picker-height, 100%);
padding: var(--omni-date-picker-padding, 10px);
width: var(--omni-date-picker-width);
min-width: var(--omni-date-picker-min-width, 242px);
/* Added to ensure that component has pointer cursor applied */
:host {
cursor: pointer;
}
cursor: pointer;
}
.field {
flex: 1 1 auto;
.field.disabled {
color: var(--omni-date-picker-disabled-font-color, #7C7C7C);
}
.field.error {
color: var(--omni-date-picker-error-font-color);
}
border: none;
background: none;
box-shadow: none;
outline: 0;
padding: 0;
margin: 0;
/* Styles for the control and control icon */
text-align: var(--omni-date-picker-text-align, left);
.control {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
cursor: pointer;
padding: var(--omni-date-picker-control-padding, 10px 10px);
}
color: var(--omni-date-picker-font-color, var(--omni-font-color));
font-family: var(--omni-date-picker-font-family, var(--omni-font-family));
font-size: var(--omni-date-picker-font-size, var(--omni-font-size));
font-weight: var(--omni-date-picker-font-weight, var(--omni-font-weight));
height: var(--omni-date-picker-height, 100%);
padding: var(--omni-date-picker-padding, 10px);
width: var(--omni-date-picker-width);
min-width: var(--omni-date-picker-min-width, 242px);
.control:hover {
background-color: var(--omni-date-picker-control-hover-color, var(--omni-accent-hover-color));
}
cursor: pointer;
}
.field.disabled {
color: var(--omni-date-picker-disabled-font-color, #7C7C7C);
}
.field.error {
color: var(--omni-date-picker-error-font-color, var(--omni-font-color));
}
.control-icon,
::slotted([slot='calendar']){
width: var(--omni-date-picker-control-icon-width, 20px);
height: var(--omni-date-picker-control-icon-height, 20px);
fill: var(--omni-date-picker-control-icon-color, var(--omni-primary-color));
cursor: pointer;
}
/* Styles for the control and control icon */
.control-icon.error {
fill: var(--omni-date-picker-control-icon-error-color, var(--omni-error-font-color));
}
.control {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
cursor: pointer;
padding: var(--omni-date-picker-control-padding, 10px 10px);
}
.left-border {
width: var(--omni-date-picker-control-left-border-width, 1px);
background-color: var(--omni-date-picker-control-left-border-color,var(--omni-form-border-color));
}
.control:hover {
background-color: var(--omni-date-picker-control-hover-color, var(--omni-accent-hover-color));
}
.layout:focus-within > .left-border {
width: var(--omni-date-picker-control-left-focused-border-width, 2px);
background-color: var(--omni-date-picker-control-left-focused-color, var(--omni-primary-color));
}
.left-border.error {
background-color: var(--omni-date-picker-control-left-border-error-color, var(--omni-error-font-color));
}
.control-icon,
::slotted([slot='calendar']){
width: var(--omni-date-picker-control-icon-width, 20px);
height: var(--omni-date-picker-control-icon-height, 20px);
fill: var(--omni-date-picker-control-icon-color, var(--omni-primary-color));
cursor: pointer;
}
/* Styles related to the picker container*/
.picker-container {
z-index: var(--omni-date-picker-container-z-index, 420);
}
.control-icon.error {
fill: var(--omni-date-picker-control-icon-error-color, var(--omni-error-font-color));
}
/* Picker dialog mobile*/
@media screen and (max-width: 766px) {
.picker-dialog {
position: fixed;
top: inherit;
width: 100%;
margin: unset;
border-style: none;
padding: unset;
left: var(--omni-date-picker-mobile-picker-dialog-left, 0px);
right: var(--omni-date-picker-mobile-picker-dialog-right, 0px);
bottom: var(--omni-date-picker-mobile-picker-dialog-bottom, 0px);
.left-border {
width: var(--omni-date-picker-control-left-border-width, 1px);
background-color: var(--omni-date-picker-control-left-border-color,var(--omni-form-border-color));
}
.picker-dialog:modal{
max-width: 100%;
overflow: none;
.layout:focus-within > .left-border {
width: var(--omni-date-picker-control-left-focused-border-width, 2px);
background-color: var(--omni-date-picker-control-left-focused-color, var(--omni-primary-color));
}
.picker-dialog::backdrop {
background: var(--omni-date-picker-mobile-picker-dialog-background-color, rgba(0, 0, 0, 0.1));
.left-border.error {
background-color: var(--omni-date-picker-control-left-border-error-color, var(--omni-error-font-color));
}
}
/* Desktop and landscape tablet device styling, if element is at the bottom of the screen make items render above the input */
@media screen and (min-width: 767px) {
/* Styles related to the picker container*/
.picker-container {
position: absolute;
cursor: default;
transition: 1s;
width: var(--omni-date-picker-container-width, 100%);
top: var(--omni-date-picker-container-top, 102%);
z-index: var(--omni-date-picker-container-z-index, 420);
}
/* Styles if the element is at the bottom of the screen then render the picker on top of the element */
.picker-container.bottom {
top: var(--omni-date-picker-container-render-bottom-top, -2%);
transform: translateY(-100%);
}
}
/* Picker dialog mobile*/
@media screen and (max-width: 766px) {
.picker-dialog {
position: fixed;
top: inherit;
width: 100%;
margin: unset;
border-style: none;
padding: unset;
left: var(--omni-date-picker-mobile-picker-dialog-left, 0px);
right: var(--omni-date-picker-mobile-picker-dialog-right, 0px);
bottom: var(--omni-date-picker-mobile-picker-dialog-bottom, 0px);
}
.picker-dialog:modal{
max-width: 100%;
overflow: none;
}
.picker-dialog::backdrop {
background: var(--omni-date-picker-mobile-picker-dialog-background-color, rgba(0, 0, 0, 0.1));
}
}
/* Desktop and landscape tablet device styling, if element is at the bottom of the screen make items render above the input */
@media screen and (min-width: 767px) {
.picker-container {
position: absolute;
cursor: default;
transition: 1s;
width: var(--omni-date-picker-container-width, 100%);
top: var(--omni-date-picker-container-top, 102%);
}
/* Styles if the element is at the bottom of the screen then render the picker on top of the element */
.picker-container.bottom {
top: var(--omni-date-picker-container-render-bottom-top, -2%);
transform: translateY(-100%);
}
}
`
];
}
Expand Down
50 changes: 25 additions & 25 deletions src/email-field/EmailField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,36 +81,36 @@ export class EmailField extends OmniFormElement {
return [
super.styles,
css`
.field {
flex: 1 1 auto;
.field {
flex: 1 1 auto;
border: none;
background: none;
box-shadow: none;
outline: 0;
padding: 0;
margin: 0;
border: none;
background: none;
box-shadow: none;
outline: 0;
padding: 0;
margin: 0;
text-align: var(--omni-email-field-text-align, left);
text-align: var(--omni-email-field-text-align, left);
color: var(--omni-email-field-font-color, var(--omni-font-color));
font-family: var(--omni-email-field-font-family, var(--omni-font-family));
font-size: var(--omni-email-field-font-size, var(--omni-font-size));
font-weight: var(--omni-email-field-font-weight, var(--omni-font-weight));
padding: var(--omni-email-field-padding, 10px);
color: var(--omni-email-field-font-color, var(--omni-font-color));
font-family: var(--omni-email-field-font-family, var(--omni-font-family));
font-size: var(--omni-email-field-font-size, var(--omni-font-size));
font-weight: var(--omni-email-field-font-weight, var(--omni-font-weight));
padding: var(--omni-email-field-padding, 10px);
height: var(--omni-email-field-height, 100%);
width: var(--omni-email-field-width, 100%);
}
.field.disabled {
color: var(--omni-email-field-disabled-font-color, #7C7C7C);
}
height: var(--omni-email-field-height, 100%);
width: var(--omni-email-field-width, 100%);
}
.field.disabled {
color: var(--omni-email-field-disabled-font-color, #7C7C7C);
}
.field.error {
color: var(--omni-email-field-error-font-color);
}
`
.field.error {
color: var(--omni-email-field-error-font-color, var(--omni-font-color));
}
`
];
}

Expand Down
Loading

0 comments on commit 978fe95

Please sign in to comment.