surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.21k stars 814 forks source link

New Buttons Progress Bar for Default V2 #7476

Closed JaneSjs closed 9 months ago

JaneSjs commented 1 year ago

T15274 - Change the survey progress bar style https://surveyjs.answerdesk.io/internal/ticket/details/T15274


The task is to modify the progress bar appearance: image

import "survey-core/defaultV2.min.css";
import "survey-core/modern.min.css";

const modernProgressBarCss = {
  progress: "sv-progress sv-body__progress",
  progressBar: "sv-progress__bar",
  progressText: "sv-progress__text",
  progressTextInBar: "sv-hidden",
  progressButtonsContainerCenter: "sv_progress-buttons__container-center",
  progressButtonsContainer: "sv_progress-buttons__container",
  progressButtonsImageButtonLeft: "sv_progress-buttons__image-button-left",
  progressButtonsImageButtonRight: "sv_progress-buttons__image-button-right",
  progressButtonsImageButtonHidden: "sv_progress-buttons__image-button--hidden",
  progressButtonsListContainer: "sv_progress-buttons__list-container",
  progressButtonsList: "sv_progress-buttons__list",
  progressButtonsListElementPassed: "sv_progress-buttons__list-element--passed",
  progressButtonsListElementCurrent:
    "sv_progress-buttons__list-element--current",
  progressButtonsListElementNonClickable:
    "sv_progress-buttons__list-element--nonclickable",
  progressButtonsPageTitle: "sv_progress-buttons__page-title",
  progressButtonsPageDescription: "sv_progress-buttons__page-description"
};
 survey.css = modernProgressBarCss;

It works for a SurveyJS Form Library: https://codesandbox.io/s/long-cookies-thn8m7?file=/src/SurveyComponent.jsx. For a Survey Creator, custom CSS is not applied: https://codesandbox.io/s/ecstatic-scooby-7zndc2?file=/src/SurveyCreatorComponent.jsx:1742-1933

mikeamelin commented 11 months ago

Prototype — https://www.figma.com/file/jcuAUsN02n2yJerx39mqf9/Library-Preview?type=design&node-id=1825-177056&mode=design

Screenshot 2023-12-18 at 11 41 19

JaneSjs commented 11 months ago

T15932 - How to display the navigation between pages as Wizard https://surveyjs.answerdesk.io/internal/ticket/details/T15932

JaneSjs commented 10 months ago

+1 T16366 - Header Image and Progress Bar Bug https://surveyjs.answerdesk.io/internal/ticket/details/T16366