Problem/Motivation
When using the varbase_components:progress-bar with empty color
and facing an error while the core Batch API uses this only for non-JavaScript batch jobs
{#
/**
* @file
* Theme override for a progress bar.
*
* Note that the core Batch API uses this only for non-JavaScript batch jobs.
*
* Available variables:
* - color: [bg-primary | bg-secondary | bg-success | bg-info | bg-warning | bg-danger |
bg-light' | bg-dark | bg-black | bg-white | bg-body | bg-transparent |
bg-opacity-10 | bg-opacity-25 | bg-opacity-50 | bg-opacity-75 |
bg-opacity-100 | bg-gradient] Use background utility classes to change the
appearance of individual progress bars.
* - striped: [true | false] Add .progress-bar-striped to any .progress-bar to
apply a stripe via CSS gradient over the background color.
* - animated: [true | false] The striped gradient can also be animated.
Add .progress-bar-animated to .progress-bar to animate
the stripes right to left via CSS3 animations.
* - label: The label of the working task.
* - percent: [1 to 100] The percentage of the progress.
* - message: A string containing information to be displayed.
*/
#}
{% include 'varbase_components:progress-bar' with {
color: '',
striped: true,
animated: true,
label: label,
percent: percent,
message: message
} %}
The following error message shows up
The website encountered an unexpected error. Please try again later.
Drupal\sdc\Exception\InvalidComponentException: [color] Does not have a value in the enumeration ["primary","bg-primary","bg-secondary","bg-success","bg-info","bg-warning","bg-danger","bg-light","bg-dark","bg-black","bg-white","bg-body","bg-transparent","bg-opacity-10","bg-opacity-25","bg-opacity-50","bg-opacity-75","bg-opacity-100","bg-gradient"]/n[percent] String value found, but an integer or an object is required in Drupal\sdc\Component\ComponentValidator->validateProps() (line 201 of core/modules/sdc/src/Component/ComponentValidator.php).
Drupal\sdc\Component\ComponentValidator->validateProps(Array, Object) (Line: 132)
Drupal\sdc\Twig\TwigExtension->doValidateProps(Array, 'varbase_components:progress-bar') (Line: 112)
Drupal\sdc\Twig\TwigExtension->validateProps(Array, 'varbase_components:progress-bar') (Line: 41)
__TwigTemplate_13f2fb37452b9c4fdd475ec2104ec85a->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 42)
__TwigTemplate_7df926a80b88c312b020639830113253->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array, Array) (Line: 40)
Twig\TemplateWrapper->render(Array) (Line: 53)
twig_render_template('themes/contrib/vartheme_bs5/templates/misc/progress-bar.html.twig', Array) (Line: 372)
Drupal\Core\Theme\ThemeManager->render('progress_bar', Array) (Line: 436)
Drupal\Core\Render\Renderer->doRender(Array) (Line: 449)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 474)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 89)
__TwigTemplate_6a8ee03af68c3e0bb206fb7efb0bdf48->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array, Array) (Line: 40)
Twig\TemplateWrapper->render(Array) (Line: 53)
twig_render_template('core/modules/system/templates/install-page.html.twig', Array) (Line: 372)
Drupal\Core\Theme\ThemeManager->render('install_page', Array) (Line: 436)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 204)
Drupal\Core\Render\Renderer->render(Array) (Line: 474)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 94)
__TwigTemplate_06ea40c6cdf886e5f1befe4f413df2d9->doDisplay(Array, Array) (Line: 394)
Twig\Template->displayWithErrorHandling(Array, Array) (Line: 367)
Twig\Template->display(Array) (Line: 379)
Twig\Template->render(Array, Array) (Line: 40)
Twig\TemplateWrapper->render(Array) (Line: 53)
twig_render_template('themes/contrib/vartheme_bs5/templates/system/html.html.twig', Array) (Line: 372)
Drupal\Core\Theme\ThemeManager->render('html', Array) (Line: 436)
Drupal\Core\Render\Renderer->doRender(Array, 1) (Line: 204)
Drupal\Core\Render\Renderer->render(Array, 1) (Line: 148)
Drupal\Core\Render\Renderer->Drupal\Core\Render\{closure}() (Line: 583)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 149)
Drupal\Core\Render\Renderer->renderRoot(Array) (Line: 66)
Drupal\Core\Render\BareHtmlPageRenderer->renderBarePage(Array, Object, 'install_page', Array) (Line: 76)
Drupal\Core\ProxyClass\Render\BareHtmlPageRenderer->renderBarePage(Array, Object, 'install_page', Array) (Line: 1056)
install_display_output(Array, Array) (Line: 161)
install_drupal(Object) (Line: 48)
Proposed resolution
Add a default empty value for the color property prop
props:
type: object
properties:
color:
type: string
title: Color
description: Use background utility classes to change the appearance of individual progress bars.
default: ''
enum:
- ''
- bg-primary
- bg-secondary
- bg-success
- bg-info
- bg-warning
- bg-danger
- bg-light
- bg-dark
- bg-black
- bg-white
- bg-body
- bg-transparent
- bg-opacity-10
- bg-opacity-25
- bg-opacity-50
- bg-opacity-75
- bg-opacity-100
- bg-gradient
As of percentage is in string format in Batches AJAX
{
status: true,
percentage: "66",
message: "Completed 21 of 32.",
label: ""
}
Changed the percent property prop to string
percent:
type: string
title: Percent
description: The percentage of the progress between 1 to 100.
Remaining tasks
- ✅ File an issue about this project
- ✅ Addition/Change/Update/Fix to this project
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support on feature change/addition
- ➖ User Guide Documentation support on feature change/addition
- ✅ Accessibility and Readability
- ✅ Code review from 1 Varbase core team member
- ✅ Full testing and approval
- ✅ Credit contributors
- ✅ Review with the product owner
- ✅ Update Release Notes and Update Helper on new feature change/addition
- ✅ Release
Varbase 10.0.0-beta1 →
,
varbase_components-2.0.0-alpha10 →
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
API changes
Data model changes
Release notes snippet
- Issue
#3371370 →
: Fixed default color value in the enumeration of colors for
varbase_components:progress-bar