Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(HelpText): css alignments #2438

Merged
merged 16 commits into from
Sep 20, 2024
Merged

fix(HelpText): css alignments #2438

merged 16 commits into from
Sep 20, 2024

Conversation

eirikbacker
Copy link
Contributor

Part of #2295

@eirikbacker eirikbacker self-assigned this Sep 17, 2024
Copy link

changeset-bot bot commented Sep 17, 2024

🦋 Changeset detected

Latest commit: 4964ec7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@digdir/designsystemet-css Patch
@digdir/designsystemet-react Patch
@digdir/designsystemet Patch
@digdir/designsystemet-theme Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Sep 17, 2024

Preview deployments for this pull request:

Storybook - 20. Sep 2024 - 09:51

Theme - 18. Sep 2024 - 13:15

Copy link
Contributor

github-actions bot commented Sep 17, 2024

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 62.09% 4276 / 6886
🔵 Statements 62.09% 4276 / 6886
🔵 Functions 86.08% 167 / 194
🔵 Branches 75.16% 566 / 753
File Coverage
File Stmts % Branch % Funcs % Lines Uncovered Lines
Changed Files
packages/react/src/components/HelpText/HelpText.tsx 100% 100% 100% 100%
Generated in workflow #532

@eirikbacker eirikbacker requested a review from Barsnes September 17, 2024 14:18
Copy link
Member

@Barsnes Barsnes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

small and large icons don't render correctly:
image

@eirikbacker
Copy link
Contributor Author

small and large icons don't render correctly: image

shit, bra sett - det er fikset nuh 💪

@eirikbacker eirikbacker requested a review from Barsnes September 18, 2024 07:51
Copy link
Member

@Barsnes Barsnes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something is still off with the icon. It looks like it changes size and position when I open the helptext. This might just look like it since both colors are changing 🤔

EDIT: I tested by holding my cursors over the top of the icon between states, and it does change.

This is medium:
image
image

small:
image
image

The hover state should also look the same as when it is active, as per the Figma design:
image

@Febakke
Copy link
Member

Febakke commented Sep 19, 2024

I like the new behaviour where there is a dedicated hover state before the active state. 👏 I will replicate this in Figma
Sizes look great 👌 I can see that the components in Figma is not connected to our tokens, I will fix this.

As @Barsnes pointed out I also see some issues with the "?" icon between default and active state. To me it looks like the container gets larger in som way and that changes what the 70% size of the icon means. But im not sure. ideally the "?" should have the same size in all states.

@eirikbacker
Copy link
Contributor Author

@Febakke @Barsnes the icon size change was an attempt to fix a half-pixel rendering issue, but found another workaround ensuring the icons is always consistent in size now ☺️ also adjusted the size to 65% as we talked about over Figma-huddle @Febakke , so this should be ready for review again now 🙌
Thanks for feedback and pingpong 🫶

@eirikbacker eirikbacker requested a review from Barsnes September 19, 2024 17:35
@Febakke
Copy link
Member

Febakke commented Sep 20, 2024

LGTM 🙌
Everything is fixed in Figma as well 🤝

@Barsnes
Copy link
Member

Barsnes commented Sep 20, 2024

Out of the scope of this PR, but should HelpText also expose the open prop 🤔

@eirikbacker
Copy link
Contributor Author

Out of the scope of this PR, but should HelpText also expose the open prop 🤔

Was thinking about it too, but I would maybe dare to suggest "no" when we launch, as it is easier to add than to remove, and HelpText is in the first place a component we want people to not use unless really needing to hide content, so using it but having it default open would be kind of antipattern? Though, I see there can be scenarios where people would like the ability to have open. It's at least very easy to add now ☺️

@eirikbacker eirikbacker merged commit 0e4faee into next Sep 20, 2024
5 checks passed
@eirikbacker eirikbacker deleted the fix/helptext-css-api branch September 20, 2024 07:49
@Barsnes
Copy link
Member

Barsnes commented Sep 20, 2024

Out of the scope of this PR, but should HelpText also expose the open prop 🤔

Was thinking about it too, but I would maybe dare to suggest "no" when we launch, as it is easier to add than to remove, and HelpText is in the first place a component we want people to not use unless really needing to hide content, so using it but having it default open would be kind of antipattern? Though, I see there can be scenarios where people would like the ability to have open. It's at least very easy to add now ☺️

I agree. I was thinking the open prop could be used to make it controlled, which I could see why some people would want.
If it is a good pattern is a different discussion... 😅

mimarz pushed a commit that referenced this pull request Sep 20, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to next, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`next` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `next`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @digdir/[email protected]

### Patch Changes

- Textarea: Use `field-sizing: content`
([#2463](#2463))

- ErrorSummary: Rename ErrorSummary.Root to ErrorSummary
([#2437](#2437))

-   Tabs: ([#2448](#2448))

    -   Renames `Tabs.Root` to `Tabs`
    -   Renames `Tabs.Content` to `Tabs.Panel`

- Rename classes from `ds-error-message*` to `ds-validation-message*`
([#2473](#2473))

- Modal: css changes
([#2418](#2418))

- DropdownMenu:
([#2432](#2432))

    -   Rename from `DropdownMenu` to `Dropdown`
    -   Change API and structure
    -   Rename `.Root` to `.Context`
    -   Rename `.Content` to `Dropdown`

- Tabs: css changes
([#2431](#2431))

- ToggleGroup: Rename ToggleGroup.Root to ToggleGroup
([#2424](#2424))

- Badge: Only use single DOM element for rendering
([#2422](#2422))

- Skeleton: Replace Skeleton.Text, Skeleton.Circle and
Skeleton.Rectangle with <Skeleton variant="">
([#2435](#2435))

- Breadcrumbs: Rename `Breadcrumbs.Root` to `Breadcrumbs` and remove
`Breadcrumbs.Nav`
([#2428](#2428))

- HelpText:
([#2438](#2438))

    -   Use Popover API
    -   Remove `portal` prop
    -   Render icon with pseudo element and require aria-label

- Fieldset: Style using css attributes
([#2447](#2447))

## @digdir/[email protected]

### Patch Changes

- Correctly mark dependencies as external. This ensures Accordion works
when consumers have enabled tree-shaking.
([#2479](#2479))

- Button: Remove `type` when `asChild={true}`
([#2472](#2472))

- ErrorSummary: Rename ErrorSummary.Root to ErrorSummary
([#2437](#2437))

-   Tabs: ([#2448](#2448))

    -   Renames `Tabs.Root` to `Tabs`
    -   Renames `Tabs.Content` to `Tabs.Panel`

- Modal: css changes
([#2418](#2418))

- Rename `ErrorMessage` to `ValidationMessage`
([#2473](#2473))

- DropdownMenu:
([#2432](#2432))

    -   Rename from `DropdownMenu` to `Dropdown`
    -   Change API and structure
    -   Rename `.Root` to `.Context`
    -   Rename `.Content` to `Dropdown`

- Tabs: css changes
([#2431](#2431))

- ToggleGroup: Rename ToggleGroup.Root to ToggleGroup
([#2424](#2424))

- Badge: Only use single DOM element for rendering
([#2422](#2422))

- Skeleton: Replace Skeleton.Text, Skeleton.Circle and
Skeleton.Rectangle with <Skeleton variant="">
([#2435](#2435))

- Breadcrumbs: Rename `Breadcrumbs.Root` to `Breadcrumbs` and remove
`Breadcrumbs.Nav`
([#2428](#2428))

- HelpText:
([#2438](#2438))

    -   Use Popover API
    -   Remove `portal` prop
    -   Render icon with pseudo element and require aria-label

- Fieldset: Style using css attributes
([#2447](#2447))

## @digdir/[email protected]



## @digdir/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: ✅ Done
Development

Successfully merging this pull request may close these issues.

3 participants