ec-europa / europa-component-library Goto Github PK
View Code? Open in Web Editor NEWECL - Europa Component Library
Home Page: https://ec.europa.eu/component-library
License: European Union Public License 1.1
ECL - Europa Component Library
Home Page: https://ec.europa.eu/component-library
License: European Union Public License 1.1
Hi, when rendering a spring checkbox, its color won't change when clicking it. Spring checkbox are rendered in html not the same as the checkbox from the demo, that is:
<label class="ecl-form-label ecl-checkbox">
<input id="runmacroSimulation" name="runMacroSimulation" class="ecl-checkbox__input ecl-u-sr-only macroSimulationCheckbox" type="checkbox" value="true">
<input type="hidden" name="_runMacroSimulation" value="on">
<span class="ecl-checkbox__label ecl-u-fs-xs run-micro-simulation-message checkbox-micro-
simulation">Run medium-term macro impact</span>
</label>
The structure expected, and the one used in the demo is this one:
<label class="ecl-form-label ecl-checkbox">
<input class="ecl-checkbox__input ecl-u-sr-only" type="checkbox" id="example-checkbox-id-1" value="some value" name="example-checkbox-name-1">
<span class="ecl-checkbox__label">Normal checkbox</span>
</label>
The reason is a too strict CSS, that only selects the span right after the first input, not taking into account that spring renders a hidden input in between:
.ecl-checkbox__input:checked+.ecl-checkbox__label:before {
background-image: url(../images/checkbox-checked--blue.svg);
}
Please bear in mind that when working with frameworks like Spring the structure of the HTML is not always rendered as plain HTML, and that there can be in between elements that make CSS not work.
The accordion component demo should validate correctly in the W3C validator (https://validator.w3.org).
The following errors appear when trying to validate the demo:
(same behaviour for EU and EC component versions)
Hello
I've found this problem with my code, but I checked that it also happens in the demo. The test was done with Google Chrome 62
When you access an inpage navigation using a mobile device, a sticky select-item should appear, letting you navigate through the different headers. I understand this is the expected behaviour, because as I explain later, I've been able to see this behaviour at some points.
Right now if you access the demo from a mobile device, the select-item doesn't appear.
The demo only shows this select-item if you access the page from a normal browser, and then change the page's size, for example using the development tools of Google Chrome
Case 1:
Case 2:
Thank you very much
The specs only show 1 radio button with its associated label. IMHO the radio button only makes sense if it is part of a group, and this group has a label/heading itself.
The radio group can have:
invalid
(boolean)The radio heading contains:
Each radio button comes with:
label
(mixed): only text in most cases but may be more complex than just text (icons, figures, etc.)disabled
(boolean)checked
(boolean)name
(string)id
(string)value
(string)required
(boolean)The JSX code showing the big picture:
<RadioGroup invalid>
<RadioHeading>Heading for the radio group</RadioHeading>
<RadioButton name="group1" id="radio1" value="value1" checked>My radio button</RadioButton>
<RadioButton name="group1" id="radio2" value="value2">My other radio button</RadioButton>
<RadioButton name="group1" id="radio3" value="value3" disabled>My disabled radio button</RadioButton>
</RadioGroup>
<RadioGroup>
being a <fieldset>
, <RadioHeading>
a <legend>
.
<RadioButton>
can be a <label>
enclosing the <input>
and everything that's needed for the label, or an <input>
with an ID followed by a <label>
with for
.
HTML overview:
<fieldset>
<legend>Heading for the radio group</legend>
<ul>
<li>
<input type="radio" name="group1" id="radio1" value="value1" checked />
<label for="radio1">My radio button</label>
</li>
<li>
<input type="radio" name="group1" id="radio2" value="value2" />
<label for="radio2">My other radio button</label>
</li>
<li>
<input type="radio" name="group1" id="radio3" value="value3" disabled />
<label for="radio3">My disabled radio button</label>
</li>
</ul>
</fieldset>
About this proposal: <input>
s and <label>
s are encapsulated in list items. It gives us isolation between each radio button which can be good and bad. IMHO it also makes the code more readable.
Another possible implementation, as stated earlier, is achieved by putting the <input>
element inside the <label>
. This way, can spare some headaches with IDs but we can't style the <label>
depending on the <input>
's attributes. We could still encapsulate the "body" of the <label>
within a span to achieve the same result, e.g. <label><input type="radio"...><span>My label styled depending on the input</span></label>
.
Other implementations:
<fieldset>
<legend>Heading for the radio group</legend>
<ul>
<li>
<label>
<input type="radio" name="group1" value="value1" checked />
My radio button
</label>
</li>
<li>
<label>
<input type="radio" name="group1" value="value2" />
My other radio button
</label>
</li>
<li>
<label>
<input type="radio" name="group1" value="value3" disabled />
My disabled radio button
</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Heading for the radio group</legend>
<label>
<input type="radio" name="group1" value="value1" checked />
My radio button
</label>
<label>
<input type="radio" name="group1" value="value2" />
My other radio button
</label>
<label>
<input type="radio" name="group1" value="value3" disabled />
My disabled radio button
</label>
</fieldset>
<fieldset>
<legend>Heading for the radio group</legend>
<div>
<label>
<input type="radio" name="group1" value="value1" checked />
My radio button
</label>
<label>
<input type="radio" name="group1" value="value2" />
My other radio button
</label>
<label>
<input type="radio" name="group1" value="value3" disabled />
My disabled radio button
</label>
</div>
</fieldset>
etc.
<input /><label />
or <label><input /></label>
?Radio button groups should always be grouped using
<fieldset>
.
<label><input /></label>
<input /><label />
<input /><label />
<input /><label />
<label><input /></label>
<input /><label />
<label><input /></label>
<label><input /></label>
<label><input /></label>
<label><input /></label>
<input /><label />
<input /><label />
<label><input /></label>
<input /><label />
Counts:
<label><input /></label>
: 7<input /><label />
: 7We are currently using the inpage navigation for one of our clients and if we add dynamic content to the page, the scrollspy component does not show the correct headers highlighted anymore. I'm suspecting the positions do not get recomputed dynamically. We are using the following to initialize the component:
ECL.navigationInpages();
When adding dynamic content to a page containing an inpage navigation with scrollspy
Then scrollspy still displays the correct links highlighted when I am scrolling up or down the different sections of my page
When adding dynamic content to a page containing an inpage navigation with scrollspy
Then scrollspy does not show the correct links highlighted when I am scrolling up or down the different sections of my page
Create a inpage navigation as presented here https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-inpage-navigation
Add dynamic elements to the page (you can do this through the console for instance)
Scroll spy will not show the correct link highlighted anymore.
After choosing a language and closing the overlay language select panel the "language label" visible to the user in the header should change too.
(Eg. From English to Spanish > User should see in the header the spanish label)
(.ecl-lang-select-sites__label)
At moment when changing language the english label remain active both in the overlay panel and in the header visible to user
I've tried top integrate the ECL v2.11.0 but the language overlay is still not working and when I click on the language (in the site header), the normal behavior of the href is fired (no language overlay is opened).
Is there something to add to get it working? I see that in the playground it is working, but when I copy paste, then it is not.
Thank you
Dear All,
I've noticed that in the ECL v2 the menus are missing (like the light blue menu bar available in the ECL v1 - https://v1--europa-component-library.netlify.com/ec/components/detail/ec-component-navigation-menu).
Are you planning to add it also to the ECL v2?
Is there a way with the current version to create a menu like the one mentioned above?
Get the component page on github
404 page
Click on any component
This is a RFC an on Improvement Proposal.
IMHO more attributes should be used on the download links in the file component. The current implementation for the main Download link looks like this:
<a href="/path/to/file.pdf" class="[...]">
<span class="[...]">Download</span>
<svg focusable="false" aria-hidden="true" class="[...]">
<use xlink:href="/static/media/icons.cbfd6efe.svg#ui--download"></use>
</svg>
</a>
And the links to the translations (with the label) look like that:
<div class="[...]">
<div class="[...]">espaรฑol</div>
<div class="[...]">(15.8 MB - PDF)</div>
</div>
<a href="/path/to/file.pdf" class="[...]">
<span class="[...]">Download</span>
<svg focusable="false" aria-hidden="true" class="[...]">
<use xlink:href="/static/media/icons.cbfd6efe.svg#ui--download"></use>
</svg>
</a>
https://v2--europa-component-library.netlify.com/ec/components/file/code/
Here are the attributes we could use:
On the links:
download
: to make the browser download the file (instead of opening it)The download attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. The attribute may have a value; the value, if any, specifies the default file name that the author recommends for use in labeling the resource in a local file system. There are no restrictions on allowed values, but authors are cautioned that most file systems have limitations with regard to what punctuation is supported in file names, and user agents are likely to adjust file names accordingly.
โ https://www.w3.org/TR/2017/REC-html52-20171214/links.html#element-attrdef-a-download
hreflang
: to tell the browser in which language the document will beThe hreflang attribute on a elements that create hyperlinks, if present, gives the language of the linked resource. It is purely advisory. The value must be a valid BCP 47 language tag. [BCP47] User agents must not consider this attribute authoritative โ upon fetching the resource, user agents must use only language information associated with the resource to determine its language, not metadata included in the link to the resource.
โ https://www.w3.org/TR/2017/REC-html52-20171214/links.html#element-attrdef-a-hreflang
On the label:
lang
: to specify the language used in the div, e.g. espaรฑol
is written in spanish โ https://www.w3schools.com/tags/att_global_lang.aspHere are the 2 HTML snippets from before, improved:
<a href="/path/to/file.pdf" class="[...]" download>
<span class="[...]">Download</span>
<svg focusable="false" aria-hidden="true" class="[...]">
<use xlink:href="/static/media/icons.cbfd6efe.svg#ui--download"></use>
</svg>
</a>
<div class="[...]">
<div class="[...]" lang="es">espaรฑol</div>
<div class="[...]">(15.8 MB - PDF)</div>
</div>
<a href="/path/to/file-es.pdf" hreflang="es" class="[...]" download>
<span class="[...]">Download</span>
<svg focusable="false" aria-hidden="true" class="[...]">
<use xlink:href="/static/media/icons.cbfd6efe.svg#ui--download"></use>
</svg>
</a>
v1.x (latest: 1.12.1)
Settings: navigation menu and inpage navigation on same page.
When a navigation menu item is expanded, it must not "overlap with" the inpage navigation items.
When a navigation menu item is expanded, it "overlaps with" the inpage navigation items (see image).
The expanded menu item has z-index: 1
, while the inpage navigation is wrapped by a div
with class ecl-u-z-navigation
(i.e., z-index: 10
).
Put navigation menu and inpage navigation on same page; see attached zip where the "Page with menu" demo is combined with the "Inpage navigations" demo (where the dark grey "Example row" is removed to emphasize the issue).
Thanks!!!
What is the full browsers support of the ECL?
Which version of Chrome?Opera?
Has it been tested on Android, IOS, Linux or others?
ECL is tested on Firefox54, IE 11, Safari 11
I am able to close messages on the website with their "Close this message" button, regardles of whether the language selector is present on the page.
When you do not have the language selector present on the page. You can not close messages with their close button. The following error message appears in the console:
drupal.js?v=8.8.1:13 Uncaught TypeError: Cannot read property 'addEventListener' of null
at l.e.init (ecl-ec-preset-legacy-website.js?q54l8r:2)
at Function.l.autoInit (ecl-ec-preset-legacy-website.js?q54l8r:2)
at ecl-ec-preset-legacy-website.js?q54l8r:2
at Array.forEach (<anonymous>)
at Object.e.autoInit (ecl-ec-preset-legacy-website.js?q54l8r:2)
at Object.attach (ecl_auto_init.js?q54l8r:8)
at drupal.js?v=8.8.1:25
at Array.forEach (<anonymous>)
at Object.Drupal.attachBehaviors (drupal.js?v=8.8.1:22)
at drupal.init.js?v=8.8.1:28
I know that the language selector element is mandatory on the header as described here:
https://ec.europa.eu/component-library/ec/core-template/site-header/usage/
Yet that is no reason not to check for it if it is present in the javascript before trying to add an eventlistener to the element. These look to be the lines in question:
If there is official documentation on what to do when you only have one language on your site I would like to see it. As the link in this issue #690 is not functioning any longer.
The Default File Download Component creates an area which describes the assets and renders a button at the right side.
The button is created with the use of the Button Component which is ready to accept an href
property. In this case the button is rendered as a link to this target.
If we make the href
target available to the Default File Component we could forward it to the Button Component.
This will extend the functionality of the Default File Download and it could be used as a drop-in replacement for the download links of Drupal.
Currently when no variant
is defined for the the File Component the Default File Download
component is rendered which renders a button element.
Hi, in the ECL documentation about header, it says
Mandatory components
European Commission logo (mute version)*
Language selector
Search bar
The only language available in my application is english, is it needed to have that as well?
Thank you
Hi, I'm using ecl with angular and noticed that when trying to use a release, eg, eu-preset-website, the logotypebelow svg's are missing.
Hi folks,
We have started to use v1.3.0 @ecl/ec-preset-website within a react single page application. When using the navigation menu component (https://v1--europa-component-library.netlify.com/ec/components/detail/ec-component-navigation-menu) we see behavior that is more in common with a traditional multi-page application.
Menu closes on clicking a menu item
Menu stays open
We can work around this, but it raises some questions for us.
many thanks for your help
In our current implementation, links look like this:
<a href="/example#language_ga" class="ecl-language-list__link ecl-link ecl-link--standalone">Gaeilge</a>
Obviously, 2 attributes are missing:
lang
: because "Gaeilge" is not in English (the language of the document)hreflang
: because the link points to a page which is not in EnglishOne third attribute can be discussed:
rel="alternate"
:When used in combination with the
hreflang
attribute (with a value other than that of the document itself), rel="alternate" means a link to a version of the current document, but in the language indicated by the hreflang attribute.
โ http://microformats.org/wiki/rel-alternate
To me, we should use this attribute in the "overlay language list", where links point to the same page in another language.
It should not be used in the "splash page language list", where links point to a completely different document than the current one. It seems to me that https://ec.europa.eu/info/ misuses the rel="alternate"
attribute.
Dear all,
I am looking for the "Site switchers" (the one with the links "Commission and its priorities" and "Policies, information and services") top bar that are available in the current EC websites and in the ECL V1. Is it available for the ECL V2?
v1.x (latest 1.14)
Consistent appearance (as far as possible) of ECL carousel's previous and next buttons across mobile OSs/browsers.
The carousel's previous and next buttons look "significantly" different on different mobile OSs/browsers.
![]() |
![]() |
![]() |
---|---|---|
Android | iOS Safari | iOS Chrome |
As you can see from the screenshots, I would say that the buttons "look ok" on Android, while on browsers running on iOS the buttons "become very large" partially hiding the images. I didn't test any other mobile browser or OS beyond those reported in the screenshots.
I'm not providing here the details about the exact mobile phones, OS and browser versions used for the screenshots, but I can provide additional info if needed.
Open the ECL Carousel demo page on mobile devices running different OSs/browsers.
Important: The reported behavior seems to be observable only with real devices (with "Responsive design mode" and similar tools the buttons "look ok"; I didn't check with iOS simulators/emulators).
I'm not sure this can be qualified as a real issue, but I would appreciate if you can provide your opinion/advice on this.
Many thanks!
v1.x (latest: 1.8.0)
On small screens (< 480px
), it should be possible to scroll through the list of languages that appears when clicking the language selector (site level) in the header.
The list of languages that appears in the dialog cannot be scrolled (overflow: auto
on .ecl-dialog--wide
is present only when min-width: 480px
).
From the site header demo page, with a viewport width < 480px, click on the language selector and try to scroll down through the language list.
Thanks for your support!
When accidentally forgetting to use <p>
tags or when not using <p>
tags on purpose you should still receive the same font-family and font-size on the text.
Right now for me the only formatting on text outside of a paragraph is the line-height. The font-family differs from text within paragraphs.
Visit any of these drupal core pages: https://github.com/drupal/drupal/blob/646584b3f718897179589f4f014531e3d9365331/core/modules/system/src/Controller/Http4xxController.php#L10
Dear ECL team,
Thank you in advance
It is supposed to click on the checkbox to activate/deactivate
If you click anywhere on the line of the checkbox (not only in the box) it activate/deactivate
https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-form-checkbox
Until yesterday, this link was accessible: https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-listing
Now this page is no longer working. We need documentation about ECL v1 in order to maintain our web applications that are using it.
In ECL v1 there was a call to action button with a right pointing arrow. It's common practice because it clearly indicates to users that the button points to a page when clicked.
Currently there is no possibility to add such an icon on a button anymore.
I noticed this while playing with the button Icon (sample) knob here: https://ecl-twig.netlify.com/ec/?path=/story/components-button--call-to-action
This icon would be a good addition to the list of existing icons and definitely make a difference on call-to-action buttons.
We are currently using the inpage navigation but also implemented smooth scroll as it is requested by our client. To do so we override the click event of ecl-inpage-navigation__link
as follows:
document.activeElement.blur();
var sectionTop = $('#section' + sectionNumber).offset().top;
if (/Edge/.test(navigator.userAgent)) { // Edge has trouble with animated scroll
$(window).scrollTop(sectionTop);
} else {
$('html').animate({
scrollTop: sectionTop
}, 1000);
}
I have noticed that inpage navigation component uses gumshoe.js
and that it is compatible with smoothscroll.js
of the same developer.
I believe adding that behaviour is quite straigthforward in component \src\generic\generic-component-inpage-navigation\generic-component-inpage-navigation.js
but I am not sure how this feature could be activated/deactivadted
When I click on ecl-inpage-navigation__link
with href #section-1
and smooth scroll is activated
Then I navigate to to block with id section-1
smoothly
When I click on ecl-inpage-navigation__link
with href #section-1
Then I jump to to block with id section-1
Go to inpage navigation and clik on any link.
Applying css classes to table I get ecl styling.
It's missing css style for table header.
Creating a table using ecl classes:
https://ec.europa.eu/component-library/ec/components/table/code/
Expected to find all the European Commission logo available in all languages (only checked with the ec-preset-website)
Only the english logo is present
Hello
I've found this problem working with the Menu component in the same page as In page navigation component. The test was done with Google Chrome 62
Menu component should work alongside any other component.
The component Menu is not working right along the inpage navigation component. When the menu has second level options, and we add an inpage navigation, the menu stops opening.
The moment the function "initExpandables" is called, the menu stops working. It doesn't work either if you call "megamenu" at the last position.
The only way I've found to prevent this problem is calling ECL.megamenu() again after loading the expandables and the inpage navigation, loading it twice.
I attach a test case of this problem
Test.zip
Thank you
Dear ECL v2 team,
We are developing web application using the ECL v2.11. The application is almost ready to be deployed.
Now we discovered that in this new release (v.2.12) the header and in particular footer changed a lot from v.2.11.
We would like to know what should we do. Do we need to adapt our application to the new footer and header?
Should we need to expect other major changes in the look and feel of the UI?
Thank you in advance
Is it possible to improve the table by adding a search box and the possibility to order the columns?
v1.13.0
As a consequence of #1319, ecl-icon--facebook
and ecl-icon--gear
both correspond to the facebook icon
See ecl-icon--facebook
and ecl-icon--gear
in the icons demo page
Thanks for your support!!!
The documentation for the custom footer states "never add the site map". However, the provided example/demo includes a "site map" link in the custom footer.
We are currently developing a web application for an EC's DG and we would like to understand how we have to deal with it in order to be compliant with the general guidelines.
Dear ECL v2 team,
I've noticed that in the ECL v.2.12 the all templates changed the look and feel of the header.
Is the "class name" grey bar the new place for the breadcrumbs?
I was searching for the breadcrumbs in the components and I found that they are following the v.2.11 layout/look and feel.
How should we have to implement the breadcrumbs in v.2.12 (compared to v.2.11)
Thank you in advance
In ECL v1 (latest 1.4.0), the width of the label (ecl-field__label
) of the field component should be limited to 20% when @media (min-width: 768px)
only (in line with the other rules that define the appearance of ecl-field
and ecl-field__label
).
The width of the label is always limited to 20%.
On small screens, when the label text exceeds this width, the text unnecessarily wraps (in my opinion).
"Quick-and-dirty" way:
Thanks!!!
Hi, I have been doing the revamping of a website and have needed some css from other files in order to make my site look like the demo, this is the css I have needed to add.
/** generic-component-link.scss, see https://ec-europa.github.io/europa-component-library/node_modules/@ecl/generic-component-link/generic-component-link.scss */
.ecl-link--external::after {
display: inline-block;
font-family: 'EuropaIcons';
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
margin-left: 4px;
speak: none;
text-decoration: none;
text-transform: none;
content: '\e825';
font-size: 75%;
margin-left: 0.4em;
margin-right: 0.2em;
}
@media (min-width: 768px){
.ecl-table thead tr:first-child th {
border-bottom: 1px solid #CECECE;
}
}
/** Added from ecl-ec-preset-website.scss, it was not present in ecl-ec-preset-website.css **/
.ecl-button--caret-right:after {
content: "\e828";
}
.ecl-button--caret-right:after, .ecl-button--caret-up:after {
display: inline-block;
font-family: EuropaIcons;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
margin-left: 4px;
speak: none;
text-decoration: none;
text-transform: none;
font-size: .875rem;
margin-left: .66rem;
}
/** Added from ecl-ec-preset-website.scss, it was not present in ecl-ec-preset-website.css **/
.ecl-breadcrumb__segment--last span{
font-weight:700;
}
.ecl-breadcrumb__segment--last {
color: #bfd0e4;
}
Can you please explain me if I am missing something? I am currently using the 1.0.0 release.
I am trying to adapt our IS to use ECL v2 by adapting our menu with the armonised site header, see link:
https://ec.europa.eu/component-library/ec/harmonised-templates/site-header/group1/
When going to playroom and clicking on any of the items of the menu I won't see the children items, but will get redirected, see: https://ec.europa.eu/component-library/playground/ec/?path=/story/components-site-headers-harmonised--group-1
I have seen that menu component is about to disappear: https://ec.europa.eu/component-library/playground/ec/?path=/story/components-navigation-menu-legacy--default
and tried using Expandable component but saw that it neither serves the purpose of the menu nor has the same structure, so my question is:
How can I make menu expandable items work for my harmonised site header?
Thanks
Hello
I'm not sure about the compatibily matrix, but as IE10 is still used by a lot of users, I think all the components should work with this browser.
The components should look the same with different browsers.
The "date" component is shown in a different way when IE10 is used. The labels are shown horizontally instead of vertically.
I've found the same problem with other components that use the property "display: flex", but I can't reproduce this other problems within the demo.
Open https://ec-europa.github.io/europa-component-library/components/preview/ecl-list-items#list-item-3 with IE10
Open the development tools and select IE10 to render the page
The date component should change and show the labels horizontally
The only way I've found to fix this has been adding the next code, but I understand maybe it's not the right solution:
.ecl-date-block__body span {
display: block;
text-align: center;
}
Thank you very much
Dear All,
I am trying to initialize a basic HTML with the ECL v2.10.1 but I cannot find any documentation on how to initialize the "Language list overlay" page structure element.
The element is correctly working in the template > standard example but I can't find how to initialize it on my html (created following the guidelines at https://ec.europa.eu/component-library/ec/getting-started/).
Can you give some advice?
Thank you in advance
Don't know exactly if this is an issue, or me not able to understand the svg stuff...
We're experiencing some problems when it comes to refer to your .svg icons from within the markup, maybe cause we're rookies with .svgs.
We've copied the whole dist folder within our project and tried to adjust the html markup links to refer the proper svgs... but still we don't know where to find, for instance, the icon called "icons.865a18d2.svg#ui--corner-arrow".
Here is the markup form the ECL playgroud at https://ec.europa.eu/component-library/playground/ec/?path=/story/components-site-headers-harmonised--group-1
<a href="/example" class="ecl-menu__link" data-ecl-menu-link="true">Item 2 <svg focusable="false" aria-hidden="true" class="ecl-menu__link-icon ecl-icon ecl-icon--xs ecl-icon--rotate-180"> <use xlink:href="dist/images/icons.865a18d2.svg#ui--corner-arrow"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="ui--corner-arrow"> <path d="M20.623 19.5L12 9.83 3.377 19.5 1 16.835 12 4.5l11 12.335z"></path> </svg> </use> </svg> </a>
There is no icon called icons.865a18d2.svg in the dist folder, could you please explain how to refer sgvs properly.
Many thanks for helping
PR - #1368
All values of attributes should be escaped
Attributes' values are not escaped
Drupal uses special attributes to handle js on the forms. As a result some of attributes can contain json, which should be escaped in order to be handled correctly
For example:
{"disabled":{":input[name='override_permissions'":{"value":1}}}
Dear ECL v2 team,
While browsing the components/templates/pages of the ECL v.2.12 there are a lot of errors "404 page not found",
Can you please check?
select
, text-area
, text-input
, radio
)ecl-form-label
ecl-help-block
ecl-feedback-message
select
, text-area
and text-input
are wrapped into a ecl-form-group
, radio
is wrapped into a ecl-radio__group
(see below why)radio
is the first one with the new design.Note: search-form
component has been excluded from the analysis as it is not intended to be used along other form elements
There are mainly two issues here:
As every ECL component, form components allows to add extra classes and attributes.
But for select
, text-area
and text-input
these extra classes are put on the form element itself, and not on the wrapper.
Pseudo code:
<wrapper>
<label>Label</label>
<formElement class="extra-class" />
</wrapper>
React:
As a consequence, it isn't possible for instance to add extra margin before or after a form component; margin would be added to the form element (so between the form element and the label in the pseudo code ahead)
The main role of ecl-form-group
is to add extra margin inside a form component (between label and form element for instance).
The issue is that it comes with high specificity rule that may override component's rules (see below)
That's the reason why it hasn't been used in radio group (spacing between elements isn't always the same). Spacing have been added directly into the component.
Still concerning ecl-form-group, there are also some inconsitencies in class names:
Some forms classes are prefixed with form
(ecl-form-group, ecl-form-label), some other are not (ecl-help-block, ecl-feedback-message).
As far as I know, all these classes are used only in forms (component ecl-message
do not use ecl-feedback-message
for instance)
Option A1: Add an additional parameter at group level
So integrators would have the possibility to add extra classes around the component, or on the form elment itself
<wrapper class="extra-class-wrapper">
<label>Label</label>
<formElement class="extra-class" />
</wrapper>
Option A2: Move custom classes to group level
As the form component is nested inside the group, having a class at top level isenough to apply any required styling on the form element
<wrapper class="extra-class">
<label>Label</label>
<formElement />
</wrapper>
Option B1: Get rid of these common form classes and define what we need into components (as done in radio
)
It would probably induce some (small) duplicate in the code, but would give us more flexibility.
Option B2: Update the common classes to make them less intrusive and more consistent
It may make sense for instance to have the invalid display in it too (the red border), as it should be the same for every form components
Hi, do you know if there is or will be a way to consume ECL components in a Java project using Spring MVC? Any documentation on this? The only reference I found so far was:
https://fractal.build/guide/integration/including
Thank you.
Dear all,
Could you please advise on what ECL component(s) to use for designing a staff member page?
For EuroHPC website we need to be able to display staff pages similar to this one: https://www.ecsel.eu/team/bert-de-colvenaer. We need to be able to display: name, photo, CV file, position and some bio text.
I wasn't able to identify any component combination that could render this information in a structured way. Sure, we could easily combine an image with a text paragraph, but then the user experience will be less than optimal.
Thanks for your help
When I try this example https://ec-europa.github.io/europa-component-library/ec/components/detail/ec-component-dropdown in my code it does not work, when I click on one dropdown it opens and closes inmediately.
This is the structure of my html:
<div class="ecl-dropdown">
<button id="news-expandable-button" class="ecl-button ecl-button--default ecl-expandable__button" aria-controls="example-button-dropdown" aria-expanded="false">Actions</button>
<div class="ecl-link-block ecl-dropdown__body" id="example-button-dropdown" aria-labelledby="news-expandable-button" aria-hidden="true">
<ul class="ecl-link-block__list">
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href=".">Edit</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href=".">Delete</a>
</li>
</ul>
</div>
</div>
<div class="ecl-dropdown">
<button id="news-expandable-button" class="ecl-button ecl-button--default ecl-expandable__button" aria-controls="example-button-dropdown" aria-expanded="false">Actions</button>
<div class="ecl-link-block ecl-dropdown__body" id="example-button-dropdown" aria-labelledby="news-expandable-button" aria-hidden="true">
<ul class="ecl-link-block__list">
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href=".">Edit</a>
</li>
<li class="ecl-link-block__item">
<a class="ecl-link ecl-link--standalone ecl-link-block__link" href=".">Delete</a>
</li>
</ul>
</div>
</div>
This is my js for calling the dropdown functions:
ECL.initExpandables('#news-expandable-button');
ECL.dropdown('.ecl-dropdown');
This is the piece of code where my dropdown gets closed (ecl-ec-preset-website.js (Release 1.0.0))
e.dropdown = function(e) {
var t = Array.prototype.slice.call(document.querySelectorAll(e));
document.addEventListener("click", function(n) {
t.forEach(function(t) {
var i, o;
if (i = t,
o = n.target,
!(i === o || 16 & i.compareDocumentPosition(o))) {
var r = document.querySelector(e + " > [aria-expanded=true]")
, a = document.querySelector(e + " > [aria-hidden=false]");
a && (r.setAttribute("aria-expanded", !1),
a.setAttribute("aria-hidden", !0))
}
})
})
If that forEach finds a dropdown that is not containing the button I clicked (it happens if I have more than one dropdown), it closes every dropdown, including the one I want to open.
Thank you.
Dear All,
We are trying to integrate the new ECL in our website.
When we copy/paste the html from the guide available here:
we notice some problems with the icon margin. In the example available here https://ec.europa.eu/component-library/playground/ec/iframe.html?id=templates-pages--campaign the icons have the space before/after the text. But in the HTML rendered by exactly copy-pasting the code from the guide, the space are missing:
Can you please help us with this issue?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.