diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts index abc7993d80..66da317d67 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts @@ -85,13 +85,13 @@ describe("Number Slider spec", () => { propPane.UpdatePropertyFieldValue("Default Value", "-10"); agHelper.VerifyEvaluatedErrorMessage( - "This value must be greater than min value", + "This value must be greater than or equal to the min value", ); propPane.UpdatePropertyFieldValue("Default Value", "110"); agHelper.VerifyEvaluatedErrorMessage( - "This value must be less than max value", + "This value must be less than or equal to the max value", ); propPane.UpdatePropertyFieldValue("Default Value", "asd"); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts index a10e97624d..ef1adaf62f 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts @@ -39,8 +39,6 @@ describe("Range Slider spec", () => { agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); propPane.UpdatePropertyFieldValue("Min. Value", "0"); - - // agHelper.VerifyEvaluatedValue("0"); }); it("2. Validates Max. Value", () => { @@ -59,8 +57,6 @@ describe("Range Slider spec", () => { agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); propPane.UpdatePropertyFieldValue("Max. Value", "100"); - - // agHelper.VerifyEvaluatedValue("100"); }); it("3. Validates Step Size", () => { @@ -79,8 +75,6 @@ describe("Range Slider spec", () => { agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); propPane.UpdatePropertyFieldValue("Step Size", "1"); - - // agHelper.VerifyEvaluatedValue("1"); }); it("4. Validates Min Range", () => { @@ -101,15 +95,13 @@ describe("Range Slider spec", () => { agHelper.VerifyEvaluatedErrorMessage("This value must be less than 100"); propPane.UpdatePropertyFieldValue("Min. Range", "10"); - - // agHelper.VerifyEvaluatedValue("10"); }); it("5. Validates Default Start Value", () => { propPane.UpdatePropertyFieldValue("Default Start Value", "-100"); agHelper.VerifyEvaluatedErrorMessage( - "This value must be greater than min value", + "This value must be greater than or equal to the min value", ); propPane.UpdatePropertyFieldValue("Default Start Value", "110"); @@ -123,8 +115,6 @@ describe("Range Slider spec", () => { agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); propPane.UpdatePropertyFieldValue("Default Start Value", "10"); - - // agHelper.VerifyEvaluatedValue("10"); }); it("6. Validates Default End Value", () => { @@ -137,7 +127,7 @@ describe("Range Slider spec", () => { propPane.UpdatePropertyFieldValue("Default End Value", "110"); agHelper.VerifyEvaluatedErrorMessage( - "This value must be less than max value", + "This value must be less than or equal to the max value", ); propPane.UpdatePropertyFieldValue("Default End Value", "asd"); @@ -145,8 +135,6 @@ describe("Range Slider spec", () => { agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); propPane.UpdatePropertyFieldValue("Default End Value", "100"); - - // agHelper.VerifyEvaluatedValue("100"); }); it("7. Change Step Size and check if binding value changes", () => { diff --git a/app/client/src/widgets/CategorySliderWidget/index.ts b/app/client/src/widgets/CategorySliderWidget/index.ts index 8cc2386e7c..09d8641ed3 100644 --- a/app/client/src/widgets/CategorySliderWidget/index.ts +++ b/app/client/src/widgets/CategorySliderWidget/index.ts @@ -21,9 +21,9 @@ export const CONFIG = { defaultOptionValue: "md", isVisible: true, isDisabled: false, - showMarksLabel: false, + showMarksLabel: true, rows: 8, - columns: 42, + columns: 40, widgetName: "CategorySlider", shouldScroll: false, shouldTruncate: false, diff --git a/app/client/src/widgets/CategorySliderWidget/widget/index.tsx b/app/client/src/widgets/CategorySliderWidget/widget/index.tsx index 5939fab05c..74f05c2fe2 100644 --- a/app/client/src/widgets/CategorySliderWidget/widget/index.tsx +++ b/app/client/src/widgets/CategorySliderWidget/widget/index.tsx @@ -140,6 +140,7 @@ class CategorySliderWidget extends BaseWidget< labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} loading={this.props.isLoading} marks={sliderOptions} diff --git a/app/client/src/widgets/CategorySliderWidget/widget/propertyConfig/contentConfig.ts b/app/client/src/widgets/CategorySliderWidget/widget/propertyConfig/contentConfig.ts index 87e36c2d8c..c614aaaca6 100644 --- a/app/client/src/widgets/CategorySliderWidget/widget/propertyConfig/contentConfig.ts +++ b/app/client/src/widgets/CategorySliderWidget/widget/propertyConfig/contentConfig.ts @@ -135,6 +135,16 @@ export default [ { sectionName: "General", children: [ + { + helpText: "Show help text or details about current input", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { propertyName: "showMarksLabel", helpText: "Controls the visibility of the marks Label widget", diff --git a/app/client/src/widgets/NumberSliderWidget/component/Slider.tsx b/app/client/src/widgets/NumberSliderWidget/component/Slider.tsx index a7c2ba6dd3..be6b695a68 100644 --- a/app/client/src/widgets/NumberSliderWidget/component/Slider.tsx +++ b/app/client/src/widgets/NumberSliderWidget/component/Slider.tsx @@ -51,6 +51,9 @@ export interface SliderComponentProps /** If true label will be not be hidden when user stops dragging */ tooltipAlwaysOn: boolean; + /** helpText for the label tooltip */ + labelTooltip?: string; + /** Disables slider */ disabled?: boolean; @@ -95,6 +98,7 @@ const SliderComponent = (props: SliderComponentProps) => { labelText, labelTextColor, labelTextSize, + labelTooltip, labelWidth, loading, marks, @@ -207,6 +211,7 @@ const SliderComponent = (props: SliderComponentProps) => { disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} + helpText={labelTooltip} loading={loading} position={labelPosition} text={labelText} diff --git a/app/client/src/widgets/NumberSliderWidget/index.ts b/app/client/src/widgets/NumberSliderWidget/index.ts index f3c7f27583..2a3d55e651 100644 --- a/app/client/src/widgets/NumberSliderWidget/index.ts +++ b/app/client/src/widgets/NumberSliderWidget/index.ts @@ -25,7 +25,7 @@ export const CONFIG = { isDisabled: false, tooltipAlwaysOn: false, rows: 8, - columns: 38, + columns: 40, widgetName: "NumberSlider", shouldScroll: false, shouldTruncate: false, diff --git a/app/client/src/widgets/NumberSliderWidget/validations.ts b/app/client/src/widgets/NumberSliderWidget/validations.ts index ceb64942c3..9865db0427 100644 --- a/app/client/src/widgets/NumberSliderWidget/validations.ts +++ b/app/client/src/widgets/NumberSliderWidget/validations.ts @@ -107,7 +107,7 @@ export function defaultValueValidation( return { isValid: false, parsed: undefined, - messages: ["This value must be greater than min value"], + messages: ["This value must be greater than or equal to the min value"], }; } @@ -115,7 +115,7 @@ export function defaultValueValidation( return { isValid: false, parsed: undefined, - messages: ["This value must be less than max value"], + messages: ["This value must be less than or equal to the max value"], }; } diff --git a/app/client/src/widgets/NumberSliderWidget/widget/index.tsx b/app/client/src/widgets/NumberSliderWidget/widget/index.tsx index e18bea8ddb..33d7f1d4ef 100644 --- a/app/client/src/widgets/NumberSliderWidget/widget/index.tsx +++ b/app/client/src/widgets/NumberSliderWidget/widget/index.tsx @@ -103,6 +103,7 @@ class NumberSliderWidget extends BaseWidget< labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} loading={this.props.isLoading} // If showMarks is off don't show marks at all diff --git a/app/client/src/widgets/NumberSliderWidget/widget/propertyConfig/contentConfig.ts b/app/client/src/widgets/NumberSliderWidget/widget/propertyConfig/contentConfig.ts index 58b2ecc231..9a21a02410 100644 --- a/app/client/src/widgets/NumberSliderWidget/widget/propertyConfig/contentConfig.ts +++ b/app/client/src/widgets/NumberSliderWidget/widget/propertyConfig/contentConfig.ts @@ -170,6 +170,16 @@ export default [ { sectionName: "General", children: [ + { + helpText: "Show help text or details about current input", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { propertyName: "showMarksLabel", helpText: "Show the marks label below the slider", @@ -255,7 +265,7 @@ export default [ { propertyName: "tooltipAlwaysOn", helpText: "Keep showing the tooltip with value", - label: "Tooltip Always On", + label: "Show value always", controlType: "SWITCH", isJSConvertible: true, isBindProperty: true, diff --git a/app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx b/app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx index 223fbc431a..8c1d014dd2 100644 --- a/app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx +++ b/app/client/src/widgets/RangeSliderWidget/component/RangeSlider.tsx @@ -64,6 +64,9 @@ export interface RangeSliderComponentProps /** If true label will be not be hidden when user stops dragging */ tooltipAlwaysOn: boolean; + /** helpText for the label tooltip */ + labelTooltip?: string; + /** Disables slider */ disabled?: boolean; @@ -106,6 +109,7 @@ const RangeSliderComponent = (props: RangeSliderComponentProps) => { labelText, labelTextColor, labelTextSize, + labelTooltip, labelWidth, loading, marks, @@ -314,6 +318,7 @@ const RangeSliderComponent = (props: RangeSliderComponentProps) => { disabled={disabled} fontSize={labelTextSize} fontStyle={labelStyle} + helpText={labelTooltip} loading={loading} position={labelPosition} text={labelText} diff --git a/app/client/src/widgets/RangeSliderWidget/index.ts b/app/client/src/widgets/RangeSliderWidget/index.ts index a8d0b2e22b..2e59fcedfb 100644 --- a/app/client/src/widgets/RangeSliderWidget/index.ts +++ b/app/client/src/widgets/RangeSliderWidget/index.ts @@ -31,7 +31,7 @@ export const CONFIG = { labelWidth: 8, labelTextSize: "0.875rem", rows: 8, - columns: 38, + columns: 40, widgetName: "RangeSlider", shouldScroll: false, shouldTruncate: false, diff --git a/app/client/src/widgets/RangeSliderWidget/validations.ts b/app/client/src/widgets/RangeSliderWidget/validations.ts index 693a52829b..71ac255598 100644 --- a/app/client/src/widgets/RangeSliderWidget/validations.ts +++ b/app/client/src/widgets/RangeSliderWidget/validations.ts @@ -168,7 +168,7 @@ export function startValueValidation( return { isValid: false, parsed: undefined, - messages: ["This value must be greater than min value"], + messages: ["This value must be greater than or equal to the min value"], }; } @@ -216,7 +216,7 @@ export function endValueValidation( return { isValid: false, parsed: undefined, - messages: ["This value must be less than max value"], + messages: ["This value must be less than or equal to the max value"], }; } diff --git a/app/client/src/widgets/RangeSliderWidget/widget/index.tsx b/app/client/src/widgets/RangeSliderWidget/widget/index.tsx index b5aff1105e..a326635ee2 100644 --- a/app/client/src/widgets/RangeSliderWidget/widget/index.tsx +++ b/app/client/src/widgets/RangeSliderWidget/widget/index.tsx @@ -135,9 +135,10 @@ class RangeSliderWidget extends BaseWidget< labelText={this.props.labelText} labelTextColor={this.props.labelTextColor} labelTextSize={this.props.labelTextSize} + labelTooltip={this.props.labelTooltip} labelWidth={this.getLabelWidth()} - loading={this.props.isLoading} // If showMarks is off don't show marks at all + loading={this.props.isLoading} marks={this.props.showMarksLabel ? this.props.marks : []} max={this.props.max} min={this.props.min} diff --git a/app/client/src/widgets/RangeSliderWidget/widget/propertyConfig/contentConfig.ts b/app/client/src/widgets/RangeSliderWidget/widget/propertyConfig/contentConfig.ts index 2c95770070..7c691440e0 100644 --- a/app/client/src/widgets/RangeSliderWidget/widget/propertyConfig/contentConfig.ts +++ b/app/client/src/widgets/RangeSliderWidget/widget/propertyConfig/contentConfig.ts @@ -212,6 +212,16 @@ export default [ { sectionName: "General", children: [ + { + helpText: "Show help text or details about current input", + propertyName: "labelTooltip", + label: "Tooltip", + controlType: "INPUT_TEXT", + placeholderText: "Value must be atleast 6 chars", + isBindProperty: true, + isTriggerProperty: false, + validation: { type: ValidationTypes.TEXT }, + }, { propertyName: "showMarksLabel", helpText: "Show the marks label below the slider", @@ -297,7 +307,7 @@ export default [ { propertyName: "tooltipAlwaysOn", helpText: "Keep showing the label with value", - label: "Tooltip Always On", + label: "Show value always", controlType: "SWITCH", isJSConvertible: true, isBindProperty: true,