Add multi-state capability to the CalendarDay component. #553
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| const backgroundColor = createConicGradient(backgroundColors); | ||
| const borderColor = createConicGradient(states.map((state, index) => state.borderColor ?? backgroundColors[index])); | ||
| const textBackgroundColor = resolveColor(layoutContext.colorScheme, { lightMode: '#eee', darkMode: '#444' })?.replace('#', '%23'); | ||
| const textBorderColor = resolveColor(layoutContext.colorScheme, { lightMode: '#aaa', darkMode: '#333' })?.replace('#', '%23'); |
Check failure
Code scanning / CodeQL
Incomplete string escaping or encoding High
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 4 days ago
To fix the problem, all occurrences of # in the color strings used inside the data:image/svg+xml URLs must be escaped, not just the first one. The general approach is to replace the string-literal argument to .replace with a regular expression that has the global (g) flag, so every # is transformed to %23.
Concretely, in src/components/presentational/CalendarDay/CalendarDay.tsx, within the createCombinedStateIfNecessary function, update both lines where .replace('#', '%23') is called on the result of resolveColor. Change them to .replace(/#/g, '%23'). This change preserves existing behavior for single-# colors and makes the code robust if resolveColor ever returns a more complex color string containing multiple # characters (e.g., gradients). No additional imports or helper methods are needed; it uses built-in JavaScript regex support.
| @@ -186,8 +186,8 @@ | ||
|
|
||
| const backgroundColor = createConicGradient(backgroundColors); | ||
| const borderColor = createConicGradient(states.map((state, index) => state.borderColor ?? backgroundColors[index])); | ||
| const textBackgroundColor = resolveColor(layoutContext.colorScheme, { lightMode: '#eee', darkMode: '#444' })?.replace('#', '%23'); | ||
| const textBorderColor = resolveColor(layoutContext.colorScheme, { lightMode: '#aaa', darkMode: '#333' })?.replace('#', '%23'); | ||
| const textBackgroundColor = resolveColor(layoutContext.colorScheme, { lightMode: '#eee', darkMode: '#444' })?.replace(/#/g, '%23'); | ||
| const textBorderColor = resolveColor(layoutContext.colorScheme, { lightMode: '#aaa', darkMode: '#333' })?.replace(/#/g, '%23'); | ||
|
|
||
| return { | ||
| ...states[0], |
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
1 participant
Overview
This branch adds multi-state capability to the
CalendarDaycomponent.Previously, a fixed state configuration was supplied to the component. The component would dynamically acquire the single state key to use for each day, pull that state from the fixed state configuration, and apply it. This mechanism has been deprecated.
The new state acquisition mechanism does not require a fixed state configuration up front. Instead, the component dynamically asks for a collection of states to apply to each day. The states for a given day can also have a note and/or custom display value attached. The Storybook has been updated to demonstrate these new rendering options.
This change is intended to be fully backward compatible, so existing usage of the
CalendarDaycomponent should not need to be updated until we decide to remove the deprecated functionality in a future major release.Single-State | Multi-State
Other Notable Items
predictableRandomNumberhelper function.Security
No new security risks. This is just an adjustment to how a bit of rendering configuration is managed and applied.
Testing
Some basic regression should be performed on the
AsthmaControlCalendarand theSeverityCalendarto ensure they still function as expected.Documentation
@CareEvolution/api-docs.