refactor: add more detailed comments to visibleOptions of Select

HCRC-178

Author: nikomakela

apps/events-helsinki/src/domain/search/eventSearch/advancedSearch/AdvancedSearchForm.tsx

@@ -202,7 +202,9 @@ export const AdvancedSearchForm: React.FC<AdvancedSearchFormProps> = ({
                 value={selectedCategories}
                 icon={<IconRead aria-hidden />}
                 noTags
-                visibleOptions={5.97} // use decimal to make scrollable content visible
+                // Show next option partially to indicate more is available.
+                // See more: (https://hds.hel.fi/components/select/code/#component-properties)
+                visibleOptions={5.97}
                 theme={{
                   '--checkbox-background-selected': 'var(--color-input-dark)',
                   '--checkbox-background-hover': 'var(--color-input-dark)',

apps/hobbies-helsinki/src/domain/search/eventSearch/advancedSearch/AdvancedSearchForm.tsx

@@ -193,7 +193,9 @@ export const AdvancedSearchForm: React.FC<AdvancedSearchFormProps> = ({
                 value={selectedCategories}
                 icon={<IconRead aria-hidden />}
                 noTags
-                visibleOptions={5.97} // use decimal to make scrollable content visible
+                // Show next option partially to indicate more is available.
+                // See more: (https://hds.hel.fi/components/select/code/#component-properties)
+                visibleOptions={5.97}
                 theme={{
                   '--checkbox-background-selected': 'var(--color-input-dark)',
                   '--checkbox-background-hover': 'var(--color-input-dark)',

apps/sports-helsinki/src/domain/search/combinedSearch/SearchForm.tsx

@@ -127,7 +127,9 @@ export const SimpleSearchForm: React.FC<SearchComponentType> = ({
                     )
                   }
                   options={sportsCategories}
-                  visibleOptions={5.97} // use decimal to make scrollable content visible
+                  // Show next option partially to indicate more is available.
+                  // See more: (https://hds.hel.fi/components/select/code/#component-properties)
+                  visibleOptions={5.97}
                   texts={{
                     placeholder: t('search.titleDropdownSportsCategory'),
                   }}
@@ -151,7 +153,9 @@ export const SimpleSearchForm: React.FC<SearchComponentType> = ({
                     icon={<IconGroup aria-hidden />}
                     id="targetGroup"
                     options={targetGroups}
-                    visibleOptions={5.97} // use decimal to make scrollable content visible
+                    // Show next option partially to indicate more is available.
+                    // See more: (https://hds.hel.fi/components/select/code/#component-properties)
+                    visibleOptions={5.97}
                     texts={{
                       placeholder: t('search.titleDropdownTargetGroup'),
                     }}
@@ -186,7 +190,9 @@ export const SimpleSearchForm: React.FC<SearchComponentType> = ({
                     ),
                   }}
                   options={accessibilityProfiles}
-                  visibleOptions={5.97} // use decimal to make scrollable content visible
+                  // Show next option partially to indicate more is available.
+                  // See more: (https://hds.hel.fi/components/select/code/#component-properties)
+                  visibleOptions={5.97}
                   value={selectedAccessibilityProfile ?? undefined}
                   onChange={handleAccessibilityProfileOnChange}
                   icon={<IconPersonWheelchair aria-hidden />}

apps/sports-helsinki/src/domain/search/combinedSearch/searchTabs/SearchTabs.tsx

@@ -121,7 +121,9 @@ function SearchTabListMobile({ data }: SearchTabListMobileProps) {
         value={activeTab}
         onChange={handleSearchTabChange}
         options={options}
-        visibleOptions={5.97} // use decimal to make scrollable content visible
+        // Show next option partially to indicate more is available.
+        // See more: (https://hds.hel.fi/components/select/code/#component-properties)
+        visibleOptions={5.97}
       />
     </div>
   );