Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

[Bug] Course search panel on the Competency Management page doesn't match the Paragon components and tokens in the design

オープン
  • 何か問題がありますか？
#836 コメント 0 件 リアクション 0 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@AShatsila がすでに取り組んでいます。

2026年9月26日 から。

評価

この issue はまだ評価されていません。

説明

Environment: Master Sandbox, https://apps.master.openedx.io/authoring/taxonomy/45/competencies

Design: Figma, "Apply Competencies" frame

The design builds the course search panel from Paragon components with specific properties and spacing tokens. In the points below, the implementation uses the same Paragon components but with different properties, or hard-coded values in place of the tokens. The values from the design were read from the Figma properties panel.

  1. The "Start Date" button uses different Button properties than the design.
    • Design: Paragon Button, color Tertiary, size Small, the date_range icon before the label. The button keeps the same style when a date range is selected.
    • Implementation: variant="outline-primary", which switches to a filled variant="primary" once dates are selected. The button has the default size and the calendar icon after the label (iconAfter={Calendar}).
    • Expected: variant="tertiary", size="sm", iconBefore={Calendar}, with the same variant whether or not dates are selected.
Image
  1. The pagination below the course list uses the default size.
    • Design: Paragon Pagination, size Small, with a 1px gray/100 border above it.
    • Expected: size="small" and a top border using --pgn-color-gray-100.
Image
  1. The gap between the search field and the "Start Date" button is 16px.
    • Design: the gap is 8px.
    • Expected: gap={2} on the toolbar Stack instead of gap={3}.
Image

  1. Several styles in src/taxonomy/competency-management/course-search/CourseSearchBrowse.scss are hard-coded, although Paragon has tokens with exactly the same values. Replacing them doesn't change how the page looks, but keeps the page in sync if the theme changes.

    Where Current value Paragon token
    $block-shadow (line 23), used by the course and section cards (&__group, line 160) and the subsection card (&__subsection, line 204) 0 0 4px rgb(0 0 0 / .15), 0 0 2px rgb(0 0 0 / .15) var(--pgn-elevation-box-shadow-centered-1) (the design uses the "Elevation Level 1 (Centered)" style)
    &__toolbar .pgn__searchfield: border-radius (line 59) and --pgn-size-search-field-border-radius (line 62) 6px var(--pgn-size-border-radius-base)
    &__section-label (line 101) and &__associations-label (line 115) padding: 4px 8px var(--pgn-spacing-spacer-1) var(--pgn-spacing-spacer-2)
    &__toolbar (line 52) padding: 24px 0 var(--pgn-spacing-spacer-4) 0
    $container-padding-x (line 11), used by &__container (line 89) and &__associations (line 129) 16px var(--pgn-spacing-spacer-3)
主要言語
Python
スター
10
フォーク
33
平均マージ
2日 5時間
マージ済み PR（30日）
10

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

openedx/openedx-core のほかの issue

openedx/openedx-core の issue をすべて見る

似ている issue

Python の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。