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: add CountryFlag component #4181

Merged
merged 1 commit into from
Oct 30, 2024
Merged

feat: add CountryFlag component #4181

merged 1 commit into from
Oct 30, 2024

Conversation

tujoworker
Copy link
Member

@tujoworker tujoworker commented Oct 25, 2024 •
edited
Loading

The solution:

  • Use the same source as UX in their designs.
  • Provide a background-image so the browser only downloads SVGs which are rendered/displayed.
  • Only support 1x1 versions.
  • Compilers still needs to "move" the SVG defined in the CSS, but much less as we don't add support for the 4:3 versions.
  • That's the reason why devs need to import the extra CSS file.

Usage

import { CountryFlag } from '@dnb/eufemia'

// Import the flag icons as CSS
import '@dnb/eufemia/components/country-flag/style/dnb-country-flag-icons.min.css'

// ... or as SASS
import '@dnb/eufemia/components/country-flag/style/dnb-country-flag-icons.scss'

render(<CountryFlag />)

Sizes

For now the sizes are the same as the Avatar component, except that here we have a x-small version as well. I think that's needed here, in order to use flags in a 16x16px format.

When it comes to the other sizes, should we align them really? Should other sizes be supported?

Example

PR Preview: https://eufemia-git-feat-country-flag-eufemia.vercel.app/uilib/components/country-flag/
Devbox: https://codesandbox.io/p/devbox/2h549y?migrateFrom=x36wyd

@vercel Vercel
Copy link

vercel bot commented Oct 25, 2024 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
eufemia ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 30, 2024 5:54am

@codesandbox-ci CodeSandbox CI
Copy link

codesandbox-ci bot commented Oct 25, 2024 •
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.

@boyum
Copy link
Contributor

boyum commented Oct 28, 2024

Will this affect output sizes?

@boyum
Copy link
Contributor

boyum commented Oct 28, 2024

Have we considered extracting country names and flags into a separate package? Changes to country names and flags happen and we sometimes want to fetch the newest country information but not care about breaking changes to other components.

@tujoworker
Copy link
Member Author

tujoworker commented Oct 29, 2024 •
edited
Loading

Meeting notes:

  • Default size should be like Icon component.
  • Should work in places where the Icon component work.

@tujoworker
Copy link
Member Author

tujoworker commented Oct 29, 2024 •
edited
Loading

Will this affect output sizes?

Yes and no.

  • Not as long as you don't include/import this file dnb-country-flag-icons.min.css
  • When it is imported, the bundler, like Webpack, will move the SVG files to your bundle assets.
  • But they will not be a part of your application bundle.
  • The browser will lazy load rendered/visible flags as SVG files.
  • This technique does not work in a classical Codesandbox, but does work in a Devbox.

@tujoworker
Copy link
Member Author

Have we considered extracting country names and flags into a separate package? Changes to country names and flags happen and we sometimes want to fetch the newest country information but not care about breaking changes to other components.

It would not necessarily mean less work for all parties. Also, we already have the SelectCountry field. In general, having found the correct list of county names etc. means we should not need to change this list too often anymore.

@tujoworker tujoworker force-pushed the feat/country-flag branch 4 times, most recently from 7699636 to 93fd495 Compare October 29, 2024 21:47
@tujoworker tujoworker requested a review from langz October 30, 2024 08:24
langz
langz approved these changes Oct 30, 2024
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.

I've tested it, and I think it works great 🚀

@tujoworker tujoworker merged commit 76a0c47 into main Oct 30, 2024
10 checks passed
@tujoworker tujoworker deleted the feat/country-flag branch October 30, 2024 11:40
tujoworker pushed a commit that referenced this pull request Oct 30, 2024
@semantic-release-bot
chore(release): 10.54.0 [skip ci]
e0f3ba2 
## [10.54.0](v10.53.0...v10.54.0) (2024-10-30)

### 📝 Documentation

* add documentation about `emptyValue` ([#4174](#4174)) ([52457ba](52457ba)), closes [#4070](#4070)

### 🐛 Bug Fixes

* **Field.Number:** `decimalLimit={0}` when `currency` should work ([#4167](#4167)) ([68123ea](68123ea))
* **Forms:** correct alignment of Wizard status message (error, warning, info) ([#4185](#4185)) ([a307cda](a307cda))
* **Forms:** ensure autocomplete="off" when autoComplete on Form.Handler is false ([#4184](#4184)) ([6795b9f](6795b9f))
* **Forms:** ensure correct sorting in Field.SelectCountry ([#4196](#4196)) ([8db7720](8db7720)), closes [#4195](#4195)
* **Forms:** fix schema validation for required paths with matching name ([#4189](#4189)) ([04caf61](04caf61)), closes [#4179](#4179)
* **Forms:** only run onBlurValidator when no other errors are present ([#4172](#4172)) ([d2797f1](d2797f1)), closes [#4074](#4074)
* **Forms:** render multiple (combined) Ajv errors with translated messages ([#4176](#4176)) ([2b62ef7](2b62ef7)), closes [#4052](#4052)
* **Forms:** updates country names in SelectCountry ([#4187](#4187)) ([bb1b67c](bb1b67c))
* **NumberFormat:** should not throw exception when providing an invalid currency ([#4192](#4192)) ([a0700cd](a0700cd))
* **Table:** fix visible hidden rows for additional expandable table rows ([#4188](#4188)) ([16b6101](16b6101))

### ✨ Features

* add CountryFlag component ([#4181](#4181)) ([76a0c47](76a0c47))
* **Dialog:** add `verticalAlignment` property with `top` alignment support ([#4190](#4190)) ([3ace8b0](3ace8b0))
* **Forms:** add `onDone`, `onCancel` and `onEdit` to Form.Section containers ([#4199](#4199)) ([2f27ad0](2f27ad0))
* **Forms:** add `transformData` to the onSubmit event of Form.Handler ([#4183](#4183)) ([748b604](748b604))
* **Forms:** deprecate `useErrorMessage` hook for when creating your own fields ([#4177](#4177)) ([2ae86f2](2ae86f2)), closes [#4162](#4162)
* **Forms:** deprecate Ajv `validationRule` in FormError and deprecate `errorMessages` keys like `pattern` in favor of Eufemia translation keys like `Field.errorPattern` ([#4162](#4162)) ([b50387a](b50387a))
* **Keyboard navigation:** add support for `key` property (useful for fire events like {ArrowDown} during tests) ([#4182](#4182)) ([cc1ffa8](cc1ffa8))
* **Upload:** `text` and `title` is possible to remove ([#4163](#4163)) ([b6db4a4](b6db4a4))
* **Upload:** removes subtitle displaying file extension ([#4156](#4156)) ([9bf9b9e](9bf9b9e))
* **Upload:** updates drag and drop texts in Norwegian ([#4170](#4170)) ([ad5bbec](ad5bbec))
@tujoworker
Copy link
Member Author

🎉 This PR is included in version 10.54.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
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.
3 participants
@tujoworker @boyum @langz