Expose styling of facet headers in FilterGroup #321
Conversation
|
Current unit coverage is 88.53211009174312% |
|
could you resolve the merge conflict? |
tatimblin
force-pushed
the
dev/filtergroup-css
branch
2 times, most recently
from
25d4334 to
4786e9f
Compare
tatimblin
force-pushed
the
dev/filtergroup-css
branch
from
4786e9f to
fd80547
Compare
src/components/FilterGroup.tsx
Outdated
| @@ -75,11 +79,21 @@ export function FilterGroup({ | |||
| }; | |||
| }, [customCssClasses]); | |||
|
|
|||
| const replicateCollapsibleLabelCssClasses = useMemo(() => { | |||
There was a problem hiding this comment.
We shouldn't need two useMemo usages here, I think we can combine them if we change the replicateCollapsibleLabelCssClasses usage below to collapsibleLabelCssClasses.label?
There was a problem hiding this comment.
Ok I am now doing the merge directly on the className
src/components/FilterGroup.tsx
Outdated
| @@ -75,11 +79,21 @@ export function FilterGroup({ | |||
| }; | |||
| }, [customCssClasses]); | |||
|
|
|||
| const replicateCollapsibleLabelCssClasses = useMemo(() => { | |||
| return twMerge('mb-4', builtInCollapsibleLabelCssClasses.label, cssClasses.titleLabel); | |||
There was a problem hiding this comment.
Is it necessary to pass builtInCollapsibleLabelCssClasses here? CollapsibleLabel calls useComposedCssClasses with it's own buitlInCssClasses which I think would handle this?
There was a problem hiding this comment.
builtInCollapsibleLabelCssClasses is needed because that is an export from CollapsibleLabel. This helps replicate the title labels style wether collapsible or not
| : (title && | ||
| <div className='text-neutral-dark text-sm font-medium text-left mb-4'> | ||
| <div className={twMerge('mb-4', builtInCollapsibleLabelCssClasses.label, collapsibleLabelCssClasses.label)}> |
There was a problem hiding this comment.
I was thinking we could put this in the useMemo like label: twMerge('mb-4', builtInCollapsibleLabelCssClasses.label, collapsibleLabelCssClasses.label) and then have this be className={collapsiblelabelCssClasses.label} but it's ok
There was a problem hiding this comment.
builtInCollapsibleLabelCssClasses comes from CollapsibleLabel so I don't want to merge it back into collapsibleLabelCssClasses because then it'll merge in twice
### Features - Default behavior of `FilterSearch` was changed to better support Locators and Doctor Finders. Additionally, a new `onSelect` prop was added to the Component. The `searchOnSelect` prop is now deprecated. (#323, #343, #333) - A new CSS bundle without the Tailwind resets is exported. (#322) - We've added a `MapboxMap` Component, powered by v2 of their JavaScript API. (#332) ### Changes - Assorted updates to improve our GH Actions. - Styling of Facet Headers is now exposed in `FilterGroupCssClasses`. (#321) ### Bug Fixes - Vulnerabilities were addressed for the repo and its test-site. - Fixed the Dropdown Component to invoke `preventDefault` only when it is active. (#307) - Corrected a small error in the generation of SSR Hydration IDs. (#315)
add env to gitignore
J=SLAP-2428
TEST=auto,manual
served site with custom label class added. toggled collapsible