Current section
48 Versions
Jump to
Current section
48 Versions
Compare versions
19
files changed
+1369
additions
-164
deletions
| @@ -1,8 +1,51 @@ | |
| 1 1 | # Changelog |
| 2 2 | |
| 3 | + ## 0.2.0 |
| 4 | + |
| 5 | + ### Rework of form controls |
| 6 | + |
| 7 | + The rework includes styles from [Primer ViewComponents](https://primer.style/view-components/). The form styles from this flavor of Primer is more mature than the generally used Primer CSS. |
| 8 | + |
| 9 | + Updated components: |
| 10 | + - `text_input`: |
| 11 | + - Added attr `is_monospace` |
| 12 | + - Added slots `leading_visual` and `trailing_action` |
| 13 | + - Added attr `is_trailing_action_divider` |
| 14 | + - Inputs inside a form group no longer have a background color by default; use `is_contrast` to set it explicitly |
| 15 | + - Removed validation message for hidden inputs |
| 16 | + - `textarea`: |
| 17 | + - Added attr `is_monospace` |
| 18 | + - Use `is_contrast` to explicitly set a contrasting background color |
| 19 | + - `checkbox` and `radio_button` |
| 20 | + - Have a clearer (more colorful) appearance |
| 21 | + - Changed the HTML structure |
| 22 | + - `radio_group` |
| 23 | + - For consistency, added input styling from Primer ViewComponents radio button (keeping the initial size) |
| 24 | + - `select`: |
| 25 | + - Added wrapper HTML element |
| 26 | + - Added attr `is_monospace` |
| 27 | + - Added attr `is_large` |
| 28 | + - Added attr `is_short` |
| 29 | + - Added attr `is_shorter` |
| 30 | + - Added attr `is_full_width` |
| 31 | + - Improved styling for multiple select |
| 32 | + - `subnav` with search field: |
| 33 | + - Added attr `is_wrap` to wrap child elements |
| 34 | + - Improved CSS for small screens |
| 35 | + |
| 36 | + Added component: |
| 37 | + - `input_validation_message` - can be used as standalone message component for inputs where the position of the validation feedback is not so obvious, for example lists of checkboxes or radio buttons |
| 38 | + |
| 39 | + Additional: |
| 40 | + - Added styling for input elements inside a disabled fieldset |
| 41 | + |
| 42 | + ### Integration of npm dependencies |
| 43 | + |
| 44 | + JavaScript and CSS dependencies (from npm library `primer-live`) are now incorporated in the Elixir package. The installation instructions are slightly simplified (see the documentation) and are recommended for a fresh setup. The previous installation method works just fine for existing projects. |
| 45 | + |
| 3 46 | ## 0.1.16 |
| 4 47 | |
| 5 | - Added anchor link attributes to `button`. |
| 48 | + Added anchor link attributes to `button` to create a link that looks like a button. |
| 6 49 | |
| 7 50 | ## 0.1.15 |
| @@ -1,4 +1,4 @@ | |
| 1 | - Copyright 2022 Arthur Clemens |
| 1 | + Copyright Arthur Clemens |
| 2 2 | |
| 3 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: |
| @@ -2,8 +2,10 @@ | |
| 2 2 | |
| 3 3 | PrimerLive is a collection of function components that implements <a href="https://primer.style/" target="_blank">GitHub's Primer Design System</a>. It is intended for usage in <a href="https://github.com/phoenixframework/phoenix_live_view" target="_blank">Phoenix LiveView pages</a> and regular (non-LiveView) views in Phoenix applications. |
| 4 4 | |
| 5 | - Since this implementation closely adheres to the <a href="https://primer.style/css/" target="_blank">Primer CSS documentation</a>, extending components with <a href="https://primer.style/css/utilities" target="blank">Primer's utility classes</a> should be simple. |
| 5 | + PrimerLive components can be used in Phoenix LiveView pages and regular (non-LiveView) views in Phoenix applications. |
| 6 | + |
| 7 | + The Primer Design System provides a strong base for creating data driven applications such as rich CRUD applications with interactive forms. |
| 6 8 | |
| 7 9 | - [Documentation at Hexdocs](https://hexdocs.pm/primer_live/) |
| 8 10 | - [Storybook and examples](https://primer-live.org/) |
| 9 | - |
| 11 | + - [Source code](https://github.com/ArthurClemens/primer_live) |
| @@ -11,7 +11,13 @@ | |
| 11 11 | <<"lib/helpers/test_helpers.ex">>,<<"lib/helpers/component_helpers.ex">>, |
| 12 12 | <<"lib/ui_icons.ex">>,<<"lib/octicons.ex">>,<<".formatter.exs">>, |
| 13 13 | <<"mix.exs">>,<<"README.md">>,<<"LICENSE.md">>, |
| 14 | - <<"priv/octicon_builder/build.exs">>,<<"CHANGELOG.md">>]}. |
| 14 | + <<"priv/octicon_builder/build.exs">>,<<"priv/static">>, |
| 15 | + <<"priv/static/primer-live.cjs.js.map">>,<<"priv/static/primer-live.css">>, |
| 16 | + <<"priv/static/session.d.ts">>,<<"priv/static/primer-live.esm.js">>, |
| 17 | + <<"priv/static/primer-live.cjs.js">>,<<"priv/static/primer-live.min.css">>, |
| 18 | + <<"priv/static/primer-live.min.js">>,<<"priv/static/primer-live.js">>, |
| 19 | + <<"priv/static/index.d.ts">>,<<"priv/static/primer-live.esm.js.map">>, |
| 20 | + <<"CHANGELOG.md">>]}. |
| 15 21 | {<<"licenses">>,[<<"MIT">>]}. |
| 16 22 | {<<"links">>, |
| 17 23 | [{<<"GitHub">>,<<"https://github.com/ArthurClemens/primer_live">>}]}. |
| @@ -37,4 +43,4 @@ | |
| 37 43 | {<<"optional">>,false}, |
| 38 44 | {<<"repository">>,<<"hexpm">>}, |
| 39 45 | {<<"requirement">>,<<"~> 1.0">>}]]}. |
| 40 | - {<<"version">>,<<"0.1.16">>}. |
| 46 | + {<<"version">>,<<"0.2.0">>}. |
unknownlib/component.ex
File is too large to be displayed (100 KB limit).
Loading more files…