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(Layout): release Layout component #2628

Merged
merged 25 commits into from
Sep 21, 2023
Merged

feat(Layout): release Layout component #2628

merged 25 commits into from
Sep 21, 2023

Conversation

tujoworker
Copy link
Member

@tujoworker tujoworker commented Sep 8, 2023 •
edited
Loading

  • Lift out Layout to be a part of core components.
  • Move ButtonRow to be a part of Form (Form.ButtonRow).
  • Align layout tests.
  • Add size property to FlexItem + media query support.
  • Rename Row and Column components (and props) to Horizontal and Vertical for easier understanding the alias thinking.
  • Rename section to stack for easier understanding the purpose.
  • Use same gap spacing technique for horizontal flex (instead of row-gap).
  • Move the width logic into form. Provide plain classes and a "wrapper" that can be used in element props.
  • Use div in the flex components.
  • Always use section on card and stack.

Example of how to use the new size prop:

      <Layout.FlexContainer>
        <Layout.FlexItem size={6}>uses 50% in width</Layout.FlexItem>
        <Layout.FlexItem size={6}>uses 50% in width</Layout.FlexItem>
      </Layout.FlexContainer>

I think, it would be very interesting to later release also Layout.Grid as a part of this new Layout component.

@vercel
Copy link

vercel bot commented Sep 8, 2023 •
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 Sep 21, 2023 10:14am

@tujoworker tujoworker changed the title feat(Layout): release new Layout component feat(Layout): release Layout component Sep 8, 2023
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from 75357aa to 1d15a5f Compare September 9, 2023 09:48
@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 9, 2023 •
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 6bab944:

Sandbox Source
eufemia-starter Configuration

@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from 1d15a5f to f7f8bee Compare September 11, 2023 06:50
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch 2 times, most recently from 8478e82 to 2bb17cf Compare September 11, 2023 07:29
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from 2bb17cf to 6ef9de9 Compare September 11, 2023 09:19
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from 6ef9de9 to 848a8f6 Compare September 13, 2023 18:23
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from 848a8f6 to bbea58a Compare September 13, 2023 19:31
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from bbea58a to b5eae8c Compare September 13, 2023 19:53
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from 64c966f to 19077cb Compare September 15, 2023 18:51
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from 19077cb to 67d4d0d Compare September 15, 2023 20:04
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from 67d4d0d to f23e27f Compare September 15, 2023 20:11
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch 2 times, most recently from a52359d to a12feac Compare September 15, 2023 20:33
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from a12feac to a8688b2 Compare September 15, 2023 21:01
@tujoworker
Remove width prop
ec398ea
@tujoworker
Correct docs about width
0178220
@tujoworker
feat(FieldBlock): add support for HTML attributes
4174457
@tujoworker
Add width handling to FieldBlock
7d770f6
@tujoworker
Add visual test for responsive FlexItem size and refactor size logic
c6960ae
@tujoworker
Add visual test for Card
9d0519d
@tujoworker
Avoid unnecessary columns style
048ba1d
@tujoworker
chore: remove unnececery jest-dom import
92b2ea6
@tujoworker
chore: add tests for StepsLayout
09eaa69
@tujoworker
Expose Layout.Vertical and Layout.Horizontal in the main list
e090abf
@tujoworker
Use class names like dnb-layout-card naming, instead of `dnb-layout…
008b2fd 
…__card`
@tujoworker
Change default direction of FlexContainer from vertical to horizontal
71321a2
@tujoworker
Cleanup FlexContainer examples
3e42a2a
@tujoworker
Rename columns to sizeCount – and use the term parts instad of columns
c3c5a66
@tujoworker
Expose all FlexContainer and FlexItems props to Card and Stack
3b38ed2
@tujoworker
Refactor Main- and SubHeading + add visual tests
26bac84
@tujoworker
Rename visual tests to ts only
ebd6d4d
@tujoworker
Make layout helper links easier to read in docs
1a82974
@tujoworker
Remove unnecessary horizontal direction from FlexContainer
7fc8c05
@tujoworker
Make docs more correct about FlexItem size
42f8df2
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from e3955f9 to ba194e9 Compare September 21, 2023 08:27
@tujoworker tujoworker force-pushed the feat/add-layout-from-forms branch from ba194e9 to 6bab944 Compare September 21, 2023 10:08
@tujoworker tujoworker merged commit 47f0018 into main Sep 21, 2023
@tujoworker tujoworker deleted the feat/add-layout-from-forms branch September 21, 2023 10:36
tujoworker pushed a commit that referenced this pull request Oct 19, 2023
@semantic-release-bot
chore(release): 10.10.0 [skip ci]
2c278d9 
## [10.10.0](v10.9.0...v10.10.0) (2023-10-19)

### 📝 Documentation

* add info about how to find out what Eufemia version is used ([#2722](#2722)) ([0740b4c](0740b4c))
* **ArraySelection:** removes redundant/circular link ([94ca03a](94ca03a))
* **ArraySelection:** removes redundant/circular link ([#2735](#2735)) ([800589f](800589f))
* formats value prop as code ([#2692](#2692)) ([7c3b81e](7c3b81e))
* **Intro:** add breadcrumb for mitigate lack of orientation ([#2709](#2709)) ([69c3f16](69c3f16))
* **Layout:** fix import of ux-layout-spacing.png ([53db314](53db314))
* **Layout:** fix import of ux-layout-spacing.png ([#2733](#2733)) ([60067b7](60067b7))
* **Layout:** move layout (spacing and media query) docs to layout component docs ([#2724](#2724)) ([3f1f809](3f1f809))
* **Pagination:** Updated links to GitHub examples ([#2732](#2732)) ([3ced434](3ced434))
* **PaymentCard:** adds docs for formatCardNumber function ([c271cb6](c271cb6))
* **PaymentCard:** adds docs for formatCardNumber function ([#2702](#2702)) ([976c19f](976c19f))
* **PhoneNumber:** updates Component-specific props docs ([0265689](0265689))
* **PhoneNumber:** updates Component-specific props docs ([#2688](#2688)) ([751c5b2](751c5b2))
* **Portal:** add View Transition ([#2675](#2675)) ([4636276](4636276))
* **Portal:** fix anchor hash highlighting ([#2705](#2705)) ([9c6299e](9c6299e))
* update docs about `gatsby-plugin-eufemia-theme-handler` ([#2740](#2740)) ([61074a7](61074a7))

### ✨ Features

* **Anchor:** add correct icon padding + embed target blank icon for Sbanken compatibility ([#2770](#2770)) ([24cb49d](24cb49d))
* **Anchor:** fix no-style and no-hover ([#2739](#2739)) ([3965e3c](3965e3c))
* **Anchor:** hide anchor protocol icon ([#2749](#2749)) ([7472265](7472265))
* **Card:** add new Card component (beta) ([#2744](#2744)) ([cf0d5b6](cf0d5b6))
* deprecate FormRow and FormSet in favor of Flex layout and Forms Extension ([#2753](#2753)) ([6e392f9](6e392f9))
* **Dialog:** sbanken theme ([#2626](#2626)) ([f1781c1](f1781c1))
* **Dropdown:** add support for numeric values by using selectedKey or object based data entries ([#2666](#2666)) ([06281e4](06281e4))
* **Dropdown:** provide React refs support with the innerRef and buttonRef props ([#2665](#2665)) ([1d8d206](1d8d206))
* **fieldset:** add SASS mix-in `fieldsetReset` ([#2759](#2759)) ([c16be9b](c16be9b))
* **Flex:** add new Flex layout component ([#2748](#2748)) ([def1ad1](def1ad1))
* **Form.Handler:** call reset on form submit ([#2765](#2765)) ([4356b0f](4356b0f))
* **FormLabel and FieldBlock:** add heading typography size prop ([#2758](#2758)) ([3916fc2](3916fc2))
* **Forms:** add innerRef to Field.String for React.ref support ([#2679](#2679)) ([930b89d](930b89d))
* **Forms:** alignSelf on Flex components ([#2662](#2662)) ([0c46e36](0c46e36))
* **Forms:** enable tree-shaking compatibility ([#2713](#2713)) ([711bde7](711bde7))
* **forms:** Session storage on Provider and add defaultData prop ([62413f0](62413f0))
* **Layout:** add css Grid component ([#2731](#2731)) ([25ffbf8](25ffbf8))
* **Layout:** release Layout component ([#2628](#2628)) ([47f0018](47f0018))
* **Slider:** Sbanken styling ([#2716](#2716)) ([b8751bd](b8751bd))
* **Tabs:** Sbanken styling ([#2682](#2682)) ([68da886](68da886)), closes [#2640](#2640) [#2631](#2631) [#2622](#2622)
* **Theme:** generate all properties in javascript file ([#2658](#2658)) ([6c70c63](6c70c63))
* **Theming:** refactor the internal structure + align DNB Eiendom theme and Anchor styles ([#2653](#2653)) ([c46caed](c46caed))
* **Upload:** Sbanken styling ([#2693](#2693)) ([992e10c](992e10c))
* **useMedia:** add new props: queries and breakpoints ([#2661](#2661)) ([a59633f](a59633f))

### 🐛 Bug Fixes

* **Anchor:** add --anchor-background-gutter ([#2721](#2721)) ([48a6084](48a6084))
* **Autocomplete:** fix rehydration disturbance ([#2761](#2761)) ([9ac6a4d](9ac6a4d))
* **Breadcrumb:** allow Button props on Breadcrumb.Item ([#2676](#2676)) ([ed95f6b](ed95f6b))
* **Breadcrumb:** avoid React warning about duplication of key ([#2687](#2687)) ([1e7d100](1e7d100))
* **DrawerList:** ensure links do wrap to new line ([#2700](#2700)) ([c994df4](c994df4)), closes [#2698](#2698)
* **FieldBlock:** automate label in label detection ([#2668](#2668)) ([5902824](5902824))
* **Forms:** ensure error shows correct border and text colors ([#2717](#2717)) ([f1bc34d](f1bc34d))
* **forms:** Handle error display when no focus and blur events is called ([#2737](#2737)) ([63f6e87](63f6e87))
* **forms:** Phone number merged with country code, bugfixes ([#2755](#2755)) ([5e13b6c](5e13b6c))
* **Forms:** precede children over title in Selection ([#2664](#2664)) ([52e8d49](52e8d49))
* **GlobalStatus:** error state not applied on prop change ([#2768](#2768)) ([8864c4c](8864c4c))
* **Lead:** can now accept className prop without losing styling ([#2741](#2741)) ([3d68caa](3d68caa))
* **PaymentCard:** correctly export type for getCardData function ([cfaacdb](cfaacdb))
* **PaymentCard:** correctly export type for getCardData function ([#2704](#2704)) ([288de11](288de11))
* **PaymentCard:** removes excess space when formatting card number ([f079fa6](f079fa6))
* **PaymentCard:** removes excess space when formatting card number ([#2703](#2703)) ([4e35d27](4e35d27))
* **Slider:** allow negative values ([#2697](#2697)) ([380bb51](380bb51))
* **Slider:** make key navigation work when swapping position ([#2729](#2729)) ([b19a41e](b19a41e))
* **StepIndicator:** react on changes to `is_current` data property ([#2757](#2757)) ([b3a1a0f](b3a1a0f))
@tujoworker
Copy link
Member Author

🎉 This PR is included in version 10.10.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

@henit henit henit approved these changes

@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 @langz @henit