tag:github.com,2008:https://github.com/freeCodeCamp/ui/releases
Release notes from ui
2025-06-20T08:37:05Z
tag:github.com,2008:Repository/781586977/v4.2.0
2025-06-20T08:42:42Z
v4.2.0
<h2>What's Changed</h2>
<ul>
<li>feat(button): add disabled styles for danger variant by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Sembauke/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Sembauke">@Sembauke</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2928217235" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/518" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/518/hovercard" href="https://github.com/freeCodeCamp/ui/pull/518">#518</a></li>
<li>fix(tabs): correct props interfaces of TabsTrigger and TabsList by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mr-nobody-7/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mr-nobody-7">@mr-nobody-7</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3157826535" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/597" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/597/hovercard" href="https://github.com/freeCodeCamp/ui/pull/597">#597</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mr-nobody-7/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mr-nobody-7">@mr-nobody-7</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3157826535" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/597" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/597/hovercard" href="https://github.com/freeCodeCamp/ui/pull/597">#597</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v4.1.0...v4.2.0"><tt>v4.1.0...v4.2.0</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v4.1.0
2025-06-18T09:54:56Z
v4.1.0
<h2>What's Changed</h2>
<ul>
<li>feat(PrismFormatted): support sass and scss by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/shootermv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/shootermv">@shootermv</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2981570027" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/543" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/543/hovercard" href="https://github.com/freeCodeCamp/ui/pull/543">#543</a></li>
<li>feat(color): Add orange30 to the color palette by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/krasnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/krasnoff">@krasnoff</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3106000770" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/570" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/570/hovercard" href="https://github.com/freeCodeCamp/ui/pull/570">#570</a></li>
<li>feat(quiz): allow revealing correct answers on success by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2852272307" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/487" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/487/hovercard" href="https://github.com/freeCodeCamp/ui/pull/487">#487</a></li>
<li>feat: export UseQuizResult and UseQuizProps interfaces by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/krasnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/krasnoff">@krasnoff</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3117607952" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/571" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/571/hovercard" href="https://github.com/freeCodeCamp/ui/pull/571">#571</a></li>
<li>feat(color): add green80 and yellow80 to color palette by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Priyesh1311421/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Priyesh1311421">@Priyesh1311421</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3145605994" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/588" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/588/hovercard" href="https://github.com/freeCodeCamp/ui/pull/588">#588</a></li>
<li>chore: upgrade node and pnpm versions by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3144250656" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/584" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/584/hovercard" href="https://github.com/freeCodeCamp/ui/pull/584">#584</a></li>
<li>fix(alert, callout): change text color of Alert and Callout by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Priyesh1311421/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Priyesh1311421">@Priyesh1311421</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3149641325" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/591" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/591/hovercard" href="https://github.com/freeCodeCamp/ui/pull/591">#591</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/krasnoff/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/krasnoff">@krasnoff</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3106000770" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/570" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/570/hovercard" href="https://github.com/freeCodeCamp/ui/pull/570">#570</a></li>
<li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Priyesh1311421/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Priyesh1311421">@Priyesh1311421</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3145605994" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/588" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/588/hovercard" href="https://github.com/freeCodeCamp/ui/pull/588">#588</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v4.0.1...v4.1.0"><tt>v4.0.1...v4.1.0</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v4.0.1
2025-03-24T07:32:05Z
v4.0.1
<h2>What's Changed</h2>
<ul>
<li>fix(base.css): remove bold font-weight from base styles by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Sembauke/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Sembauke">@Sembauke</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2942118022" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/530" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/530/hovercard" href="https://github.com/freeCodeCamp/ui/pull/530">#530</a></li>
<li>fix(control-label): set font weight to bold by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Sembauke/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Sembauke">@Sembauke</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2942106133" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/529" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/529/hovercard" href="https://github.com/freeCodeCamp/ui/pull/529">#529</a></li>
<li>fix(Quiz): remove marker from list items by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2942215294" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/531" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/531/hovercard" href="https://github.com/freeCodeCamp/ui/pull/531">#531</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v4.0.0...v4.0.1"><tt>v4.0.0...v4.0.1</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v4.0.0
2025-03-20T13:46:28Z
v4.0.0
<h2>What's Changed</h2>
<ul>
<li>feat(storybook): add fCC favicon by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2919425544" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/512" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/512/hovercard" href="https://github.com/freeCodeCamp/ui/pull/512">#512</a></li>
<li>feat(col): add support for extra small column size (4) by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Sembauke/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Sembauke">@Sembauke</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2928301219" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/520" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/520/hovercard" href="https://github.com/freeCodeCamp/ui/pull/520">#520</a></li>
<li>chore: add additional global CSS by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/a2937/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/a2937">@a2937</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2805220332" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/466" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/466/hovercard" href="https://github.com/freeCodeCamp/ui/pull/466">#466</a></li>
<li>refactor(quiz): rename passingGrade to passingPercent for clarity by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Sembauke/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Sembauke">@Sembauke</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2928233690" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/519" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/519/hovercard" href="https://github.com/freeCodeCamp/ui/pull/519">#519</a></li>
<li>refactor(col): remove smPush prop and related logic by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Sembauke/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Sembauke">@Sembauke</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2928348401" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/521" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/521/hovercard" href="https://github.com/freeCodeCamp/ui/pull/521">#521</a></li>
</ul>
<h2>Breaking Changes</h2>
<ul>
<li>Additional CSS styles were added to the default stylesheet (<code>base.css</code>), which could break the layout of some consumers. The exact changes can be found here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2805220332" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/466" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/466/hovercard" href="https://github.com/freeCodeCamp/ui/pull/466">#466</a></li>
<li><code>useQuiz</code> hook: Renamed the <code>passingGrade</code> prop to <code>passingPercent</code></li>
<li><code>Col</code> component: Removed the <code>smPush</code> prop</li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v3.2.0...v4.0.0"><tt>v3.2.0...v4.0.0</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v3.2.0
2025-03-13T06:30:52Z
v3.2.0
<h2>What's Changed</h2>
<ul>
<li>feat: add jsx to babel highlight by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/a2937/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/a2937">@a2937</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2756003844" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/450" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/450/hovercard" href="https://github.com/freeCodeCamp/ui/pull/450">#450</a></li>
<li>feat: add json to babel highlight by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/a2937/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/a2937">@a2937</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2771202513" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/454" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/454/hovercard" href="https://github.com/freeCodeCamp/ui/pull/454">#454</a></li>
<li>feat: Enable Bash syntax highlighting by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sulaiman-dev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sulaiman-dev">@sulaiman-dev</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800837077" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/464" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/464/hovercard" href="https://github.com/freeCodeCamp/ui/pull/464">#464</a></li>
<li>chore: move storybook config files to use typescript by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/shootermv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/shootermv">@shootermv</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2583790537" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/374" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/374/hovercard" href="https://github.com/freeCodeCamp/ui/pull/374">#374</a></li>
<li>fix: Color System page by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2846415053" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/482" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/482/hovercard" href="https://github.com/freeCodeCamp/ui/pull/482">#482</a></li>
<li>chore(storybook): remove redundant postcss-loader config by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/shootermv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/shootermv">@shootermv</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2851071459" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/485" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/485/hovercard" href="https://github.com/freeCodeCamp/ui/pull/485">#485</a></li>
<li>chore: remove <code>validation</code> prop from QuizQuestion code snippets by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/shootermv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/shootermv">@shootermv</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2860104326" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/492" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/492/hovercard" href="https://github.com/freeCodeCamp/ui/pull/492">#492</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sulaiman-dev/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sulaiman-dev">@sulaiman-dev</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2800837077" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/464" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/464/hovercard" href="https://github.com/freeCodeCamp/ui/pull/464">#464</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v3.1.1...v3.2.0"><tt>v3.1.1...v3.2.0</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v3.1.1
2024-12-09T17:37:04Z
v3.1.1
<h2>What's Changed</h2>
<ul>
<li>fix: quiz answer content overflow by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/LaurenRenaeCampbell/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/LaurenRenaeCampbell">@LaurenRenaeCampbell</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2721195956" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/440" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/440/hovercard" href="https://github.com/freeCodeCamp/ui/pull/440">#440</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/LaurenRenaeCampbell/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/LaurenRenaeCampbell">@LaurenRenaeCampbell</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2721195956" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/440" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/440/hovercard" href="https://github.com/freeCodeCamp/ui/pull/440">#440</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v3.1.0...v3.1.1"><tt>v3.1.0...v3.1.1</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v3.1.0
2024-11-08T09:12:28Z
v3.1.0
<h2>What's Changed</h2>
<ul>
<li>feat: add data-value attribute to QuizQuestion answer by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2601697950" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/390" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/390/hovercard" href="https://github.com/freeCodeCamp/ui/pull/390">#390</a></li>
<li>chore: add prepublishOnly script by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2553337988" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/344" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/344/hovercard" href="https://github.com/freeCodeCamp/ui/pull/344">#344</a></li>
<li>fix: display quiz correct count on demo by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/a2937/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/a2937">@a2937</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2584263209" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/377" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/377/hovercard" href="https://github.com/freeCodeCamp/ui/pull/377">#377</a></li>
<li>fix: adjust space between quiz questions by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2620472330" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/405" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/405/hovercard" href="https://github.com/freeCodeCamp/ui/pull/405">#405</a></li>
<li>test: add proper classes to container story by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/shootermv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/shootermv">@shootermv</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2628413216" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/410" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/410/hovercard" href="https://github.com/freeCodeCamp/ui/pull/410">#410</a></li>
</ul>
<h2>New Contributors</h2>
<ul>
<li><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/shootermv/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/shootermv">@shootermv</a> made their first contribution in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2628413216" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/410" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/410/hovercard" href="https://github.com/freeCodeCamp/ui/pull/410">#410</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v3.0.0...v3.1.0"><tt>v3.0.0...v3.1.0</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v3.0.0
2024-10-22T18:42:14Z
v3.0.0
<h2>What's Changed</h2>
<ul>
<li>fix: update background color by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/a2937/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/a2937">@a2937</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2584102277" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/375" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/375/hovercard" href="https://github.com/freeCodeCamp/ui/pull/375">#375</a></li>
<li>fix: add radio option color class by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/a2937/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/a2937">@a2937</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2584241580" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/376" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/376/hovercard" href="https://github.com/freeCodeCamp/ui/pull/376">#376</a></li>
<li>feat: allow customizing passing grade by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2591141966" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/382" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/382/hovercard" href="https://github.com/freeCodeCamp/ui/pull/382">#382</a></li>
<li>feat: support displaying quiz answer feedback by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2569824402" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/356" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/356/hovercard" href="https://github.com/freeCodeCamp/ui/pull/356">#356</a></li>
</ul>
<h2>Breaking Changes</h2>
<ul>
<li><code>useQuiz</code> now requires a <code>passingGrade</code> prop</li>
<li>The value of <code>correctAnswerCount</code> returned from <code>useQuiz</code> can be <code>undefined</code> instead of always being a number. The <code>undefined</code> value indicates that the quiz has not been validated (the <code>validateAnswer</code> function hasn't been called)</li>
<li><code>QuizQuestion</code> no longer accepts a <code>validation</code> prop. The prop is now folded into the <code>QuizQuestion</code>'s <code>answers</code> prop.
<ul>
<li>Old:
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="<QuizQuestion
question="Lorem ipsum"
answers={[
{ label: "Option 1", value: 1 },
{ label: "Option 2", value: 2 },
]}
selectedAnswer={1}
validation={{ state: "correct", message: "Correct!" }}
/>"><pre><span class="pl-c1"><</span><span class="pl-v">QuizQuestion</span>
<span class="pl-c1">question</span><span class="pl-c1">=</span><span class="pl-s">"Lorem ipsum"</span>
<span class="pl-c1">answers</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">[</span>
<span class="pl-kos">{</span> <span class="pl-c1">label</span>: <span class="pl-s">"Option 1"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-c1">1</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">{</span> <span class="pl-c1">label</span>: <span class="pl-s">"Option 2"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-c1">2</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">]</span><span class="pl-kos">}</span>
<span class="pl-c1">selectedAnswer</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span>
<span class="pl-c1">validation</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">state</span>: <span class="pl-s">"correct"</span><span class="pl-kos">,</span> <span class="pl-c1">message</span>: <span class="pl-s">"Correct!"</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-kos">/></span></pre></div>
</li>
<li>New:
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="<QuizQuestion
question="Lorem ipsum"
answers={[
{
label: "Option 1",
value: 1,
validation: { state: "correct", message: "Correct!" }
},
{ label: "Option 2", value: 2 },
]}
selectedAnswer={1}
/>"><pre><span class="pl-c1"><</span><span class="pl-v">QuizQuestion</span>
<span class="pl-c1">question</span><span class="pl-c1">=</span><span class="pl-s">"Lorem ipsum"</span>
<span class="pl-c1">answers</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">[</span>
<span class="pl-kos">{</span>
<span class="pl-c1">label</span>: <span class="pl-s">"Option 1"</span><span class="pl-kos">,</span>
<span class="pl-c1">value</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
<span class="pl-c1">validation</span>: <span class="pl-kos">{</span> <span class="pl-c1">state</span>: <span class="pl-s">"correct"</span><span class="pl-kos">,</span> <span class="pl-c1">message</span>: <span class="pl-s">"Correct!"</span> <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">{</span> <span class="pl-c1">label</span>: <span class="pl-s">"Option 2"</span><span class="pl-kos">,</span> <span class="pl-c1">value</span>: <span class="pl-c1">2</span> <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">]</span><span class="pl-kos">}</span>
<span class="pl-c1">selectedAnswer</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">1</span><span class="pl-kos">}</span>
<span class="pl-kos">/></span></pre></div>
</li>
</ul>
</li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v2.3.1...v3.0.0"><tt>v2.3.1...v3.0.0</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v2.3.1
2024-10-11T17:24:53Z
v2.3.1
<h2>What's Changed</h2>
<ul>
<li>fix: remove default text color in <code>p</code> by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2580872988" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/370" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/370/hovercard" href="https://github.com/freeCodeCamp/ui/pull/370">#370</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v2.3.0...v2.3.1"><tt>v2.3.0...v2.3.1</tt></a></p>
huyenltnguyen
tag:github.com,2008:Repository/781586977/v2.3.0
2024-10-10T18:35:49Z
v2.3.0
<h2>What's Changed</h2>
<ul>
<li>fix: move validation status to the selected answer by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2571439787" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/358" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/358/hovercard" href="https://github.com/freeCodeCamp/ui/pull/358">#358</a></li>
<li>refactor: initialize questions directly by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ojeytonwilliams/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ojeytonwilliams">@ojeytonwilliams</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2575344246" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/364" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/364/hovercard" href="https://github.com/freeCodeCamp/ui/pull/364">#364</a></li>
<li>feat: allow quiz answer value to have string type by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/huyenltnguyen/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/huyenltnguyen">@huyenltnguyen</a> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2575345497" data-permission-text="Title is private" data-url="https://github.com/freeCodeCamp/ui/issues/365" data-hovercard-type="pull_request" data-hovercard-url="/freeCodeCamp/ui/pull/365/hovercard" href="https://github.com/freeCodeCamp/ui/pull/365">#365</a></li>
</ul>
<p><strong>Full Changelog</strong>: <a class="commit-link" href="https://github.com/freeCodeCamp/ui/compare/v2.2.0...v2.3.0"><tt>v2.2.0...v2.3.0</tt></a></p>
huyenltnguyen