Feature: label color property for star widget (#900)

This commit is contained in:
Viraj Bahulkar 2021-10-07 08:47:29 +05:30 committed by GitHub
parent 3f22edb977
commit eeb15db665
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 1 deletions

View file

@ -20,6 +20,8 @@ export const StarRating = function StarRating({
const allowHalfStar = component.definition.properties.allowHalfStar.value ?? false;
const textColorProperty = component.definition.styles.textColor;
const color = textColorProperty ? textColorProperty.value : '#ffb400';
const labelColorProperty = component.definition.styles.labelColor;
const labelColor = labelColorProperty ? labelColorProperty.value : '#333';
const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
const disabledState = component.definition.styles?.disabledState?.value ?? false;
@ -99,7 +101,7 @@ export const StarRating = function StarRating({
style={{ display: parsedWidgetVisibility ? '' : 'none' }}
>
{/* TODO: Add label color defination property instead of hardcoded color*/}
<span className="label form-check-label form-check-label col-auto" style={{ color: '#000' }}>
<span className="label form-check-label form-check-label col-auto" style={{ color: labelColor }}>
{label}
</span>
{animatedStars.map((props, index) => (

View file

@ -1002,6 +1002,7 @@ export const componentTypes = [
},
styles: {
textColor: { type: 'color', displayName: 'Star Color' },
labelColor: { type: 'color', displayName: 'Label Color' },
visibility: { type: 'code', displayName: 'Visibility' },
disabledState: { type: 'code', displayName: 'Disable' },
},
@ -1024,6 +1025,7 @@ export const componentTypes = [
events: [],
styles: {
textColor: { value: '#ffb400' },
labelColor: { value: '#333' },
visibility: { value: '{{true}}' },
disabledState: { value: '{{false}}' },
},