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

feat(popover): max-width and border-size css properties are added #483

Merged
merged 21 commits into from
May 9, 2023

Conversation

ozkersemih
Copy link
Contributor

@ozkersemih ozkersemih commented Mar 15, 2023

This PR contains:

  • Tooltip starts using popover component internally.
  • Popover component has 2 additional CSS properties: --bl-popover-border-size and --bl-popover-max-width
  • Some optimizations and fixes done on positioning arrow in popover.
  • UglifyCSS which is used internally by lit-css plugin that we use to minify our styles breaks the code by replacing all 0px values to 0. This was causing problem about using this value in CSS calc, and not a safe thing at all. Since UglifyCSS project is not maintained anymore I manually replaced its functionality with clean-css library in build script. (I created an issue to replace uglifycss with something better in lit-css plugin as well)

Closes #478

src/components/tooltip/bl-tooltip.css Outdated Show resolved Hide resolved
src/components/tooltip/bl-tooltip.css Outdated Show resolved Hide resolved
src/components/tooltip/bl-tooltip.css Outdated Show resolved Hide resolved
src/components/tooltip/bl-tooltip.test.ts Outdated Show resolved Hide resolved
@muratcorlu muratcorlu changed the title feat(tooltip): integrate popover into tooltip refactor(tooltip): integrate popover into tooltip Apr 26, 2023
@muratcorlu
Copy link
Contributor

@ozkersemih After fixing failing test, I noticed some UI issues regarding to the border size addition comparing to current tooltip design. Also max-width of tooltip was not working properly. To keep design aligned, I added some extra css variables to popover.

@muratcorlu muratcorlu changed the title refactor(tooltip): integrate popover into tooltip feat(popover): max-width and border-size css properties are added May 4, 2023
@muratcorlu muratcorlu requested a review from buseselvi May 5, 2023 14:19
muratcorlu added 3 commits May 5, 2023 17:11
uglifycss which is used internally by lit-css plugin that we use to minify our styles
breaks the code by replacing all 0px values to 0. this was causing problem, and
not a safe thing at all. since uglifycss project is not maintained anymore I manually
replaced its functionality with clean-css library.
@buseselvi
Copy link
Contributor

Radio Group selected option seems wrong:

image

image

And I didn't understand why secondary and tertiary button hovers changed in the UI tests with this implementation, storybook looks ok (unchanged) but in chromatic, hover states look the same as the default state. @muratcorlu @ozkersemih

@muratcorlu muratcorlu merged commit c0f5fc2 into next May 9, 2023
@muratcorlu muratcorlu deleted the tooltip-popover-integrate branch May 9, 2023 08:13
@github-actions
Copy link

github-actions bot commented May 9, 2023

🎉 This PR is included in version 2.1.0-beta.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

@muratcorlu muratcorlu mentioned this pull request May 10, 2023
muratcorlu added a commit that referenced this pull request May 12, 2023
This PR includes the features/fixes for the release of v2.1.0

## Features

* **Switch**: CSS property to set custom color for `off` state (#527)
* **Popover**: CSS properties to set `max-width` and `border-size` (#483)

## Fixes

* **Dropdown**: Close dropdown when an item is clicked (#533) 
* **Popover**: Prevent exiting fullscreen with popover close (#551)
* **Dialog**: Prevent exiting fullscreen with dialog close (#548)
* **Select**: Select item separator is back (#552) 
* React wrapper types (#532) 
* Set package type as module (#570)

Thanks to our contributors for this version 🚀 :

@muratcorlu @ogunb @abugraokkali @AykutSarac @ozkersemih
@github-actions
Copy link

🎉 This PR is included in version 2.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Successfully merging this pull request may close these issues.

Using popover component in Tooltip
3 participants