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.

Sign up for GitHub

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

Jump to bottom

feat(Spacing): add calc helper #1845

Merged
merged 1 commit into from
Dec 21, 2022
Merged

feat(Spacing): add calc helper #1845

merged 1 commit into from
Dec 21, 2022

Conversation

tujoworker
Copy link
Member

@tujoworker tujoworker commented Dec 21, 2022 •
edited
Loading

With some refactoring (mostly to correct Typescript types) and the addition of 9 lines of code, we get the calc function that outputs CSS calc/var based summary of given types.

import { calc } from '@dnb/eufemia/components/space/SpacingUtils'

// With Styled Components
const StyledDiv = styled.div`
  margin-top: ${calc('medium large')};
  margin-top: ${calc('medium', 'large')};
  margin-top: ${calc('1.5rem', '2rem')};
  margin-top: ${calc('24px', '32px')};
`

All of the examples do output: calc(var(--spacing-medium) + var(--spacing-large))

Invalid values will be corrected to its nearest spacing type (e.g. 17px to var(--spacing-small)).

@tujoworker tujoworker requested a review from langz December 21, 2022 08:52
langz
langz approved these changes Dec 21, 2022
View reviewed changes
Copy link
Contributor

@langz langz left a comment

Choose a reason for hiding this comment

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

Fancy fancy 💇‍♂️

packages/dnb-eufemia/src/components/space/__tests__/SpacingUtils.test.tsx Outdated Show resolved Hide resolved
@gatsby-cloud
Copy link

gatsby-cloud bot commented Dec 21, 2022 •
edited
Loading

✅ DNB Eufemia Portal deploy preview ready

@tujoworker tujoworker force-pushed the feat/spacing-helper branch 2 times, most recently from 172433e to b008eac Compare December 21, 2022 09:25
@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 21, 2022 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cb1e6c2:

Sandbox Source
eufemia-starter Configuration

@tujoworker tujoworker merged commit 0e7f99e into main Dec 21, 2022
@tujoworker tujoworker deleted the feat/spacing-helper branch December 21, 2022 12:27
tujoworker pushed a commit that referenced this pull request Dec 21, 2022
@semantic-release-bot
chore(release): 9.45.0 [skip ci]
5ed34ce 
# [9.45.0](v9.44.0...v9.45.0) (2022-12-21)

### Bug Fixes

* **Anchor:** use text-decoration instead of box-shadow for chromium breaking underline support ([#1841](#1841)) ([eba73da](eba73da))

### Features

* **Spacing:** add calc helper ([#1845](#1845)) ([0e7f99e](0e7f99e))
@tujoworker
Copy link
Member Author

🎉 This PR is included in version 9.45.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

joakbjerk pushed a commit that referenced this pull request Mar 27, 2023
@tujoworker @joakbjerk
feat(Spacing): add calc helper (#1845)
f6ae0a9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@langz langz langz approved these changes

Assignees
No one assigned
Labels
released
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@tujoworker @langz