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

Hds 2393 core scss v4 for breadcrumbs #1369

Open
wants to merge 104 commits into
base: release-4.0.0
Choose a base branch
from

Conversation

timwessman
Copy link
Contributor

@timwessman timwessman commented Sep 26, 2024

Description

  • Convert the CSS of the Breadcrumb component to SCSS.
  • Documentation added

Something to think

  • In react/src/components/breadcrumb/Breadcrumb.module.scss I keeped composes: from -notation to split elements from css selectors. It is actually quite clean to do it this way, but its not the same logic that I used in the Button -component. So which one is better? or something else?

Related Issue

Closes HDS-2393

How Has This Been Tested?

  • visual tests
  • e2e tests

Add to changelog

  • Added needed line to changelog

mrTuomoK and others added 30 commits September 5, 2024 13:07
…pe to add CommonHTMLAttributes as data-* to props.
The arrow icon takes now space. Therefore it needed a background color and container and aligner elements.
…date

The old command has rimraf which removes all images.
Include showArrow and information -props to the component props
…from Table

Heading id is created when needed
Table id was for checkbox and it is also created when needed.

Updated docs, tests and snapshot.
Better usage of core css.

Cannot use compose in core, so not-so-inconvenient "helper-text-gap" was added.
…exists

Short HelperText stays on same line as ErrorText
Flexbox change requires label + tooltip combination to be wrapped.

Made external components or otherwise focus would be lost from tooltip button on re-render, if anonymous functions were used.
NikoHelle and others added 11 commits September 12, 2024 13:00
Release-4.0.0: (HDS-2421) Storybook files typescript checking
…ts, add body spacing to helper for body-overflowing pages
…ight-test-separate-running

Release-4.0.0 HDS-2423 enable playwright test separate running and write instructions
…-native-attributes

release-4.0.0 HDS-2388 icon template native attributes
…ft-right-to-start-end

Release-4.0.0 (HDS-2420) Dialog, Header and StatusLabel icon-props renamed
Release-4.0.0 HDS-2272 fix koros examples, remova old and add new visual tests
Copy link

Preview found from hds-demo docs/preview_1369

Demos

Docs
Core Storybook
React Storybook

Copy link

github-actions bot commented Sep 26, 2024

Test Results

 1 files  22 suites   3m 45s ⏱️
11 tests 11 ✅ 0 💤 0 ❌
22 runs  22 ✅ 0 💤 0 ❌

Results for commit 3000a39.

♻️ This comment has been updated with latest results.

}
}

@media (min-width: 768px) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if some variable is available (breakpoint?) for these?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sure, fixed

Copy link
Contributor

Choose a reason for hiding this comment

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

Also make sure that the old loki-screenshots are deleted and add to loki config to skip breadcrumb testing (this should always be done when creating new e2e test for components until all loki tests are replaced)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

@timwessman timwessman force-pushed the hds-2393-core-scss-v4-for-breadcrumbs branch from cc5d630 to b5a87f2 Compare October 3, 2024 06:35
@timwessman timwessman force-pushed the hds-2393-core-scss-v4-for-breadcrumbs branch from b5a87f2 to 35277ce Compare October 3, 2024 06:38
@timwessman
Copy link
Contributor Author

Hups, this is broken now (it renders only the last item of the Breadcrumb), I'll fix it.

@timwessman
Copy link
Contributor Author

Found out that you can't use css variables on media query declarations, so I reverted breakpoints back to numerical values. There have to be some trick, maybe from scss, but I think it's not on scope of this pr.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants