uzh-bf · sjschlapbach · Oct 5, 2024 · Oct 5, 2024
diff --git a/apps/auth/package.json b/apps/auth/package.json
@@ -8,7 +8,7 @@
     "@klicker-uzh/prisma": "workspace:*",
     "@klicker-uzh/shared-components": "workspace:*",
     "@next-auth/prisma-adapter": "1.0.7",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "axios": "1.4.0",
     "bcryptjs": "2.4.3",
     "js-cookie": "3.0.5",

diff --git a/apps/backend-docker/package.json b/apps/backend-docker/package.json
@@ -57,7 +57,7 @@
     "@types/passport-jwt": "^3.0.6",
     "@types/ramda": "^0.29.3",
     "@types/ws": "^8.5.9",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "axios": "1.4.0",
     "cross-env": "7.0.3",
     "dotenv": "16.4.5",

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -22,7 +22,7 @@
     "@mdx-js/react": "3.0.1",
     "@tailwindcss/typography": "0.5.9",
     "@tsconfig/docusaurus": "1.0.5",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "autoprefixer": "10.4.14",
     "cross-env": "7.0.3",
     "nodemon": "3.0.1",

diff --git a/apps/frontend-control/package.json b/apps/frontend-control/package.json
@@ -18,7 +18,7 @@
     "@sentry/nextjs": "7.61.1",
     "@socialgouv/matomo-next": "1.6.1",
     "@types/js-cookie": "^3.0.3",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "body-parser": "1.20.2",
     "cross-env": "7.0.3",
     "dayjs": "1.11.12",

diff --git a/apps/frontend-control/src/components/layout/Header.tsx b/apps/frontend-control/src/components/layout/Header.tsx
@@ -19,6 +19,7 @@ function Header({ title }: HeaderProps) {
       <div className="line-clamp-1 text-lg font-bold">{title}</div>
       <div className="flex flex-row gap-4">
         <Select
+          basic
           value={router.locale}
           items={[
             { value: 'de', label: 'DE', data: { cy: 'language-de' } },
@@ -30,17 +31,14 @@ function Header({ title }: HeaderProps) {
             })
           }
           className={{
-            trigger:
-              'rounded-none border-b border-solid p-0.5 pb-0 text-white hover:bg-transparent hover:text-white',
+            trigger: 'h-max w-max text-white',
           }}
           data={{ cy: 'language-select' }}
-          basic
         />
         <Button
           basic
           onClick={async () => {
             const userIdLogout = await logoutUser()
-            // TODO: proper error handling
             userIdLogout.data?.logoutUser
               ? router.push('https://www.klicker.uzh.ch')
               : console.log('Logout failed')

diff --git a/apps/frontend-manage/package.json b/apps/frontend-manage/package.json
@@ -19,7 +19,7 @@
     "@klicker-uzh/shared-components": "workspace:*",
     "@socialgouv/matomo-next": "1.6.1",
     "@tanstack/react-table": "8.20.5",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "d3": "7.8.4",
     "dayjs": "1.11.12",
     "deepmerge": "4.3.1",

diff --git a/apps/frontend-manage/src/components/evaluation/EvaluationFooter.tsx b/apps/frontend-manage/src/components/evaluation/EvaluationFooter.tsx
@@ -94,7 +94,7 @@ function EvaluationFooter({
             <Select
               contentPosition="popper"
               className={{
-                trigger: 'border-slate-400',
+                trigger: 'w-36 border-slate-400',
               }}
               items={ACTIVE_CHART_TYPES[currentInstance.type].map((item) => {
                 return {
@@ -104,7 +104,7 @@ function EvaluationFooter({
                 }
               })}
               value={chartType}
-              onChange={(newValue: ChartType) => setChartType(newValue)}
+              onChange={(newValue) => setChartType(newValue as ChartType)}
               data={{ cy: 'change-chart-type' }}
             />
           </div>

diff --git a/apps/frontend-manage/src/components/evaluation/navigation/InstanceNavigation.tsx b/apps/frontend-manage/src/components/evaluation/navigation/InstanceNavigation.tsx
@@ -69,7 +69,7 @@ function InstanceNavigation({
         }}
         className={{
           root: 'z-20 h-[2.65rem]',
-          trigger: 'm-0 h-full rounded-none border-none shadow-none',
+          trigger: 'm-0 h-full w-max rounded-none border-none shadow-none',
         }}
         value={String(activeInstance)}
         data={{ cy: 'evaluate-question-select' }}

diff --git a/apps/frontend-manage/src/components/interaction/feedbacks/FeedbackSearchAndFilters.tsx b/apps/frontend-manage/src/components/interaction/feedbacks/FeedbackSearchAndFilters.tsx
@@ -165,7 +165,7 @@ function FeedbackSearchAndFilters({
         )}
       </div>
 
-      <div className="flex flex-row">
+      <div className="flex flex-row items-center">
         {!hidden?.print && (
           <Button
             basic
@@ -179,9 +179,7 @@ function FeedbackSearchAndFilters({
             disabled={disabled?.print}
             data={{ cy: 'print-feedback-channel-button' }}
           >
-            <Button.Icon>
-              <FontAwesomeIcon icon={faPrint} />
-            </Button.Icon>
+            <FontAwesomeIcon icon={faPrint} />
           </Button>
         )}
 

diff --git a/apps/frontend-manage/src/components/questions/QuestionEditModal.tsx b/apps/frontend-manage/src/components/questions/QuestionEditModal.tsx
@@ -703,6 +703,7 @@ function QuestionEditModal({
                       placeholder={t('manage.questionForms.selectQuestionType')}
                       items={QUESTION_TYPE_OPTIONS}
                       data={{ cy: 'select-question-type' }}
+                      className={{ select: { trigger: 'h-8 w-max' } }}
                     />
 
                     <FormikSelectField
@@ -714,6 +715,7 @@ function QuestionEditModal({
                       )}
                       items={STATUS_OPTIONS}
                       data={{ cy: 'select-question-status' }}
+                      className={{ select: { trigger: 'h-8 w-32' } }}
                     />
                   </div>
 
@@ -893,6 +895,7 @@ function QuestionEditModal({
                     )}
                     {[ElementType.Sc, ElementType.Mc].includes(values.type) && (
                       <FormikSelectField
+                        contentPosition="popper"
                         name="options.displayMode"
                         items={Object.values(ElementDisplayMode).map(
                           (mode) => ({
@@ -906,6 +909,7 @@ function QuestionEditModal({
                           })
                         )}
                         data={{ cy: 'select-display-mode' }}
+                        className={{ select: { trigger: 'h-8 w-48' } }}
                       />
                     )}
                   </div>

diff --git a/apps/frontend-manage/src/components/sessions/creation/MultiplierSelector.tsx b/apps/frontend-manage/src/components/sessions/creation/MultiplierSelector.tsx
@@ -53,7 +53,11 @@ function MultiplierSelector({
         },
       ]}
       data={{ cy: 'select-multiplier' }}
-      className={{ ...className, tooltip: 'z-20' }}
+      className={{
+        ...className,
+        tooltip: 'z-20',
+        select: { trigger: 'h-10 w-max' },
+      }}
     />
   )
 }

diff --git a/apps/frontend-manage/src/components/sessions/evaluation/EvaluationControlBar.tsx b/apps/frontend-manage/src/components/sessions/evaluation/EvaluationControlBar.tsx
@@ -87,8 +87,8 @@ function EvaluationControlBar({
             ? `${question?.name.substring(0, 120)}...`
             : question?.name,
         shortLabel:
-          question?.name.length > 20
-            ? `${question?.name.substring(0, 20)}...`
+          question?.name.length > 40
+            ? `${question?.name.substring(0, 40)}...`
             : undefined,
         value: String(question?.ix),
         data: { cy: `evaluate-question-${question?.ix}` },
@@ -145,7 +145,8 @@ function EvaluationControlBar({
               }}
               className={{
                 root: 'z-20 h-[2.65rem]',
-                trigger: 'm-0 h-full rounded-none border-none shadow-none',
+                trigger:
+                  'm-0 h-full w-max rounded-none border-none shadow-none',
               }}
               value={String(selectedInstanceIndex)}
               data={{ cy: 'evaluate-question-select' }}

diff --git a/apps/frontend-manage/src/components/user/DelegatedAccessSettings.tsx b/apps/frontend-manage/src/components/user/DelegatedAccessSettings.tsx
@@ -248,7 +248,9 @@ function DelegatedAccessSettings({ shortname }: DelegatedAccessSettingsProps) {
                       }))}
                       label={t('manage.settings.scope')}
                       labelType="large"
-                      className={{ root: 'md:w-1/2' }}
+                      className={{
+                        root: 'md:w-1/2',
+                      }}
                       data={{ cy: 'delegated-login-scope' }}
                       required
                     />

diff --git a/apps/frontend-manage/src/components/user/LanguageSetting.tsx b/apps/frontend-manage/src/components/user/LanguageSetting.tsx
@@ -49,7 +49,7 @@ function LanguageSetting({ user }: LanguageSettingProps) {
         ]}
         className={{
           content: 'font-normal text-black',
-          trigger: 'font-normal text-black',
+          trigger: 'h-9 w-max font-normal text-black',
         }}
         data={{ cy: 'language-select' }}
       />

diff --git a/apps/frontend-manage/src/components/user/SuspendedFirstLoginModal.tsx b/apps/frontend-manage/src/components/user/SuspendedFirstLoginModal.tsx
@@ -145,7 +145,10 @@ function SuspendedFirstLoginModal() {
                     { label: t('shared.generic.english'), value: 'en' },
                     { label: t('shared.generic.german'), value: 'de' },
                   ]}
-                  className={{ root: 'w-full md:w-max' }}
+                  className={{
+                    root: 'w-full md:w-max',
+                    select: { trigger: 'w-40' },
+                  }}
                   required
                 />
                 <FormikSwitchField

diff --git a/apps/frontend-manage/src/pages/index.tsx b/apps/frontend-manage/src/pages/index.tsx
@@ -292,6 +292,7 @@ function Index() {
                       className={{
                         root: 'min-w-30',
                         trigger: 'h-10',
+                        item: 'text-sm',
                       }}
                       placeholder={t('manage.general.sortBy')}
                       items={[
@@ -316,6 +317,7 @@ function Index() {
                         handleSortByChange(newSortBy as SortyByType)
                       }}
                       data={{ cy: 'sort-by-question-pool' }}
+                      contentPosition="popper"
                     />
                   </div>
 

diff --git a/apps/frontend-manage/src/pages/sessions/[id]/evaluation.tsx b/apps/frontend-manage/src/pages/sessions/[id]/evaluation.tsx
@@ -378,7 +378,7 @@ function Evaluation() {
                   <Select
                     contentPosition="popper"
                     className={{
-                      trigger: 'border-slate-400',
+                      trigger: 'w-36 border-slate-400',
                     }}
                     items={ACTIVE_CHART_TYPES[
                       currentInstance.questionData.type

diff --git a/apps/frontend-pwa/package.json b/apps/frontend-pwa/package.json
@@ -25,7 +25,7 @@
     "@radix-ui/react-tabs": "1.0.3",
     "@socialgouv/matomo-next": "1.6.1",
     "@uidotdev/usehooks": "2.4.1",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "body-parser": "1.20.2",
     "dayjs": "1.11.12",
     "deepmerge": "4.3.1",

diff --git a/apps/frontend-pwa/src/components/common/Header.tsx b/apps/frontend-pwa/src/components/common/Header.tsx
@@ -87,11 +87,11 @@ function Header({
               })
             }}
             className={{
-              trigger:
-                'rounded-none border-b border-solid p-0.5 pb-0 text-white hover:bg-transparent hover:text-white',
+              trigger: 'p-0 px-1 text-white focus:ring-0',
             }}
             data={{ cy: 'language-select' }}
             basic
+            contentPosition="popper"
           />
         </div>
         {/* {hasSeenSurvey === 'false' && (

diff --git a/apps/frontend-pwa/src/components/forms/AvatarUpdateForm.tsx b/apps/frontend-pwa/src/components/forms/AvatarUpdateForm.tsx
@@ -138,7 +138,9 @@ function AvatarUpdateForm({
                           label: 'text-md',
                           select: {
                             root: 'md:w-38 w-full',
-                            trigger: 'w-full justify-between md:p-1 md:px-3',
+                            trigger:
+                              'h-max w-full justify-between text-sm md:p-1 md:px-3',
+                            item: 'text-sm',
                           },
                         }}
                         key={key}

diff --git a/apps/func-incoming-responses/package.json b/apps/func-incoming-responses/package.json
@@ -18,7 +18,7 @@
     "@tsconfig/recommended": "^1.0.2",
     "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^20.16.1",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "azure-functions-core-tools": "4.0.5801",
     "cross-env": "7.0.3",
     "dotenv": "16.4.5",

diff --git a/apps/func-response-processor/package.json b/apps/func-response-processor/package.json
@@ -21,7 +21,7 @@
     "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^20.16.1",
     "@types/ramda": "^0.29.3",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "azure-functions-core-tools": "4.0.5801",
     "cross-env": "7.0.3",
     "dotenv": "16.4.5",

diff --git a/apps/office-addin/package.json b/apps/office-addin/package.json
@@ -3,7 +3,7 @@
   "version": "3.2.0-rc.1",
   "license": "AGPL-3.0",
   "dependencies": {
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "core-js": "3.30.2",
     "es6-promise": "4.2.8",
     "formik": "2.4.6",

diff --git a/packages/markdown/package.json b/packages/markdown/package.json
@@ -40,7 +40,7 @@
     "@fortawesome/free-regular-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "next": "14.2.7",
     "react": "18.3.1",
     "react-dom": "18.3.1",

diff --git a/packages/shared-components/dist/utilities.css b/packages/shared-components/dist/utilities.css
@@ -168,6 +168,11 @@
   height: calc(100% - 4rem)
 }
 
+.h-max {
+  height: -moz-max-content;
+  height: max-content
+}
+
 .min-h-\[2\.5rem\] {
   min-height: 2.5rem
 }
@@ -196,6 +201,19 @@
   width: 100%
 }
 
+.w-20 {
+  width: 5rem
+}
+
+.w-16 {
+  width: 4rem
+}
+
+.w-max {
+  width: -moz-max-content;
+  width: max-content
+}
+
 .min-w-max {
   min-width: -moz-max-content;
   min-width: max-content

diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
@@ -33,7 +33,7 @@
     "@fortawesome/free-regular-svg-icons": "6.6.0",
     "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "@klicker-uzh/graphql": "workspace:*",
     "@klicker-uzh/markdown": "workspace:*",
     "dayjs": "1.11.12",

diff --git a/packages/shared-components/src/LanguageChanger.tsx b/packages/shared-components/src/LanguageChanger.tsx
@@ -4,11 +4,9 @@ import React from 'react'
 function LanguageChanger({
   value,
   onChange,
-  className,
 }: {
   value: string
   onChange: (locale: string) => void
-  className?: string
 }) {
   return (
     <Select
@@ -19,11 +17,9 @@ function LanguageChanger({
       ]}
       onChange={onChange}
       className={{
-        root: className,
-        trigger: 'border bg-slate-100 hover:shadow',
+        trigger: 'w-max',
       }}
       data={{ cy: 'select-value-language-changer' }}
-      basic
     />
   )
 }

diff --git a/packages/transactional/package.json b/packages/transactional/package.json
@@ -18,7 +18,7 @@
     "@react-email/components": "0.0.22",
     "@types/node": "^20.16.1",
     "@types/react": "^18.3.4",
-    "@uzh-bf/design-system": "3.0.0-alpha.30",
+    "@uzh-bf/design-system": "3.0.0-alpha.31",
     "react": "18.3.1",
     "react-email": "2.1.6",
     "tsx": "4.9.1",