Bug description

We tried to use setAssetPath in this sandbox app, but to no avail. Currently our workaround here is to configure webpack, so that it copies all assets to the public/assets/ folder, served under /assets/, where the stencil components look for them by default. However, this only works for components used on the base path (/) of the application. If we navigate to a different path, the assets are fetched relatively to that path and we end up 404s.
We tried to use import { setAssetPath } from 'our-lib/dist/components' and use the function to change the default behaviour, but it didn't seem to have any effect.

Steps to reproduce the behavior

1. Clone https://github.com/emdgroup-liquid/liquid-sandbox-next-tailwind
2. Try to use setAssetPath

Expected behavior

setAssetPath sets the path to the desired assets folder.

Actual behavior

setAssetPath (if imported from '@emdgroup-liquid/liquid/dist/components') has no effect.

Additional context

This is an upstream issue for ionic-team/stencil-ds-output-targets#186 in the stencil-ds-output-targets project.

Bug description

Component props being forwarded using the cloneAttributes helper function do not update, if these props are changed in a later component lifecycle, but only if these props are not explicitly defined in the component using the Prop() decorator.

Steps to reproduce the behavior

1. Go to the ld-button docs
2. Open the developer tools and search for an ld-button component
3. Add a type="button" prop to that component.
4. The inner button element does not update.
5. Add a disabled prop to the ld-button component.
6. The inner button element updates, as disabled is explicitly defined as a prop of ld-button.

Expected behavior

No matter what manipulations of props happen on any ld-* web component, the props get updated on the internally used HTML element, as well (if wildcard props forwarding is implemented for that specific component).

Actual behavior

Only changes on explicitly defined props trigger a rerendering of the component's shadow DOM.

Additional context

Browser used: Google Chrome version 91.0.4472.77

Describe the bug
ld-select not opening up on mobile safari (the real one; in the Simulator everything works fine) when inside ld-label in production.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://emdgroup-liquid.github.io/liquid/components/ld-select/
2. Click on the select component

Expected behavior
The select popper opens up.

Actual behavior
The popper is not visible.

Reproducable on:

• OS: iOS
• Browser: mobile safari
• Version: current

Additional context

• I have the suspicion that ld-label might be the cause of the problem as only selects which are contained by an ld-label component are not working as expected.
• I also noticed that this is only happening on the docs page while the ld-select components used in our sandbox apps work fine even in combination with an ld-label (for instance here https://g5w7w.sse.codesandbox.io). This indicates that it might be something other than the label. Maybe it has something to do with the overall height / content size of the page?

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1084%3A6895

Depends on #132

If a component is to be removed (or replaced, e.g. re-rendered because of a change in its "key"-prop) that is a direct child of a Web Component, React produces a DOMException, stating: "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."

This may be connected to (deeply nested?) slots inside the Stencil component.

Requires a config object for eleventy example shortcode.

React warnings occur, e.g. "Invalid DOM property fill-rule. Did you mean fillRule?"

Bug description

ld-icon used to support colorisation via currentColor. Since the refactoring to shadow DOM this seems to have broken. We had no tests and so this one slipped through.

Steps to reproduce the behavior

1. Go to https://emdgroup-liquid.github.io/liquid/components/ld-icon/#color

Expected behavior

The icons should be colored.

Actual behavior

The icons are black.

Screenshots

Is your feature request related to a problem? Please describe.
Notifications of the type info are always rich blue regardless the theme while I was expecting that these should be themeable.

Describe the solution you'd like
The info notification should adapt to the current theme while warning and alert should stay yellow and red.

Describe alternatives you've considered
Alternatively a notification could accept a color property to create full flexibility but this could cause undesired design results.

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1084%3A906

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1084%3A45

Describe the bug
The loading indicator on the loading buttons overflows the parent. This is visible because the rounded corners become rectangular.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://emdgroup-liquid.github.io/liquid/components/ld-button/

Expected behavior
Button remains rounded while loading

Screenshots

Desktop (please complete the following information):

• OS: MacOS Big Sur
• Browser: Safari
• Version 14.1.22

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1384%3A1

Is your feature request related to a problem? Please describe.
In some cases I need a Button on Brand color which does not show a white border as the Secondary on Brand Button mode.

Describe the solution you'd like
Add a new button mode for ghost-on-brand-color which does not show a border.

Evaluate using Liquid with something like Capacitor. Capacitor looks promising and should work well with Stencil based libraries as it comes from the same company. Offer documentation and maybe some sort of sandbox app or skeleton to get started quickly to developers.

Bug description
When using LD Input and Button components, the onSubmit method is not triggered when pressing the enter key from Input.

Steps to reproduce the behavior
Go to: https://codesandbox.io/s/liquid-oxygen-form-onsubmit-9cpf2
Focus on the First name/ Last name input field in LIQUID OXYGEN FORM.
Hit enter.

Expected behavior
The form should be submitted & the onSubmit method should be triggred.
The Expected behavior example is added in the codesandbox.

Actual behavior
The onSubmit method is not triggered.

Bug description

When integrating the ld-input component with the form validation library react-hook-form, it gets clear that it does not behave the same way as a native input element does.

For example, the form state does not properly update on blur or while the user is typing, if only the register function of react-hook-form is used.

Another example is that the first "invalid" input automatically gets focus when the form is submitted - which works for native inputs, but not ld-input.

I assume that this points to the ld-input component not properly emitting onInput/onChange/onBlur/etc events.

Expected behavior

The ld-input integrates with form validation libraries just as good as native input elements do.

Actual behavior

Integration works partly, but not as seamless as it could. Not all events seem to be emitted properly (or forwarded properly from the component's internal native input element).

Additional context

The issues can be reproduced when removing the custom onInput and onBlur handlers in this sandbox.

Suggestion:

npm install @emdgroup-liquid/liquid

import { defineCustomElements } from '@emdgroup-liquid/liquid'
import '@emdgroup-liquid/liquid/dist/css/liquid.css'

defineCustomElements()

For more details on which bundles are available etc. etc. see...

Bug description
Cannot toggle disabled state using the LdInput component in react.

Steps to reproduce the behavior
Add disabled property to a LdInput component and set to "false"

Expected behavior
Setting LdInput component to "false" should keep the component enabled.

Actual behavior
Once disabled attribute is added there is no way to toggle between disabled and enabled state anymore... or at least not a clean way of doing so.

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

aria-disabled: works, but some documentation would be cool , similar to https://emdgroup-liquid.github.io/liquid/components/ld-input/#disabled

mode="large" should be size="lg", so that we stay consistent with other components (see https://emdgroup-liquid.github.io/liquid/components/ld-button/#size for example)

There is a difference at https://emdgroup-liquid.github.io/liquid/components/ld-toggle/#with-label between the Web Component example and the CSS Component example. Please remove the required attribute on the CSS component, so that both examples show the same result. 

Bug description

Web components like <ld-button>, <ld-checkbox> and <ld-input> not working since v1.0.0-rc.10.

Steps to reproduce the behavior

1. Create a file named app.ts with the following content

import { defineCustomElements } from '@emdgroup-liquid/liquid'

defineCustomElements()

2. Install esbuild
3. Generate the bundle: npx esbuild app.ts --bundle --outfile=app.js
4. Open an HTML that loads app.js and contains the web components.

Expected behavior

The web components should work.

Actual behavior

They are not even rendered, this error appears in the console when using v1.0.0-rc.10:

DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.

And this one when using v1.0.0-rc.20:

DOMException: Failed to execute 'setAttribute' on 'Element': '-e-l-e-m-e-n-t_-n-o-d-e' is not a valid attribute name.

Screenshots

Details about device, OS, browser (including versions)

• Device: Macbook Pro M1 2020
• OS: macOS Big Sur v11.6
• Browser: Chrome v96

Additional context

All components work when using v1.0.0-rc.9, but I only manage to make <ld-select> work in the newer versions.

This might be my own incompetence, but I just spent half an hour trying to find out the names under which liquid defines its theme colours.

Maybe add a section in the https://emdgroup-liquid.github.io/liquid/introduction/tailwindcss-integration/ docs.

Proposal:

Accessing Colours

The Liquid Tailwind presets adds the liquid colour palettes to your tailwind colour configuration.

Accessing the current theme

Your selected theme is available with the thmprefix. This will reference the global css variables (https://emdgroup-liquid.github.io/liquid/global/theming/)

Examples:

/* Primary colour */
.bg-thm-primary 
.bg-thm-primary-hover
.bg-thm-primary-active
.bg-thm-primary-focus
.bg-thm-primary-highlight

/* Secondary colour */
.bg-thm-secondary 

/* Others */

.bg-thm-success
.bg-thm-warning
.bg-thm-error

Accessing other themes

Other themes can be accessed by their name directly:

Example:

.bg-ocean-primary

Accessing liquid colors

Colors can be accessed by their short names:

.bg-rb /* Rich blue */
.bg-rg /* Rich green */
.bg-rp /* Rich purple */
.bg-rr /* Rich red */

.bg-vg /* Vibrant green */
.bg-vc /* Vibrant cyan */
.bg-vy /* Vibrant yellow */
.bg-vm /* Vibrant magenta */

.bg-sg /* Sensitive green */
.bg-sy /* Sensitive yellow */ 
.bg-sb /* Sensitive blue */
.bg-sp /* Sensitive purple */

Cheers!

To Reproduce
Steps to reproduce the behavior:

1. In Safari go to https://emdgroup-liquid.github.io/liquid/components/ld-tabs/#with-icons

Expected behavior
Icons are visible.

Actual behavior
Icons are not visible.

Reproducable in:

• OS: Mac OSX
• Browser: Safari
• Version: 15.1 (17612.2.9.1.20)

Additional context
Seems like the icons have a width of 0.

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1084%3A14286

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1084%3A25

Design: https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1084%3A790

Acceptance criteria:

• 3 modes:
  • horizontal numbers (default)
  • horizontal dots
  • dropdown (with numbers)
• transition between states
  • active border moves to new selection
  • numbers slide in/out of the visible area (maybe fading in/out)
  • dots expand/collapse as needed (maybe fading in/out)
• option to always show the first/last page (optional feature)
• trigger custom change event on click
• possibility to control state via props
• non-composable component
• prop to define a page type label ("Slide", "Page", etc. - default: "Page")

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1316%3A1

Make sure no color vars are used which are not available as across token sets (currently code highlighting is using vibrant and rich color variables...).

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1082%3A377

Bug description

When passing the disabled prop to the LdButton component (in React) it is always disabled even when passing disabled={false}

Steps to reproduce the behavior

 <LdButton disabled={false}>
Test
</LdButton>

Expected behavior

Disabled false should mean enabled

Actual behavior

Button is disabled

Screenshots

Details about device, OS, browser (including versions)

• Device: MacBook
• OS: macOS Monterey 12.1
• Browser: Safari 15.2
• Version: "@emdgroup-liquid/liquid": "^1.0.0-rc.2"

Is your feature request related to a problem? Please describe.

Under Icons>Modifiers, there is an "Add" icon with a "+" (plus). However, there is nothing like a "Remove" icon with a "-" (minus). It would be great if such an icon could be added to complement the "Add" icon.

Describe the bug

I set up a Nextjs application in accordance with the documentation on the website using setAssetPath() as well as the other recommended settings. Most of the elements are coming nicely, but can't get the icons to work. We're using basePath so the app is served under localhost:<port>/<package-name>, but it still tries to access the icons from localhost:<port>/placeholder.svg (the basePath is omitted). For images, the basePath must be passed as well (e.g src="project1/placeholder.svg"), not sure how/if that'd work with the icons.

To Reproduce
Steps to reproduce the behavior:

1. Setup a next app according to docs
2. Set a base path according to https://nextjs.org/docs/api-reference/next.config.js/basepath
3. Try to render an ld-icon component

Expected behavior
The icon is visible.

Actual behavior

GET http://localhost:3000/assets/placeholder.svg 404 (Not Found)

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=2359%3A28680

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1084%3A907

Depends on #127

Acceptance criteria:

• It can be attached to the left side and the right side of its container
• It is positioned fix
• It is vertically scrollable and shows or hides scroll container boundaries on scroll
• It indicates visually which nav item is currently active
• It is accessible (supports keyboard navigation etc.)
• It allows for an optional fixed slot at the top for arbitrary content (such as a search input field)
• It allows for an optional fixed slot at the bottom for arbitrary content (such as a user profile section) sticky group headings
• Allows for arbitrary child elements
• Can be composed using nav-item, accordion, group heading and separator component, etc.
• Accordion sections in the sidenav use transitions when opening or closing
• On larger viewports
  • it is collapsible via click to the side in a way, that labeled nav items are reduced to icon only nav items when collapsed
  • when collapsed it saves the state of the currently selected sub-nav (if applicable) and only shows icon nav-items; if no icon nav-items exist, it collapses to a narrower version with no nav-items visible; icon nav-items move to the top when collapsed
• On smaller viewports
  • it is hidden initially and can be toggled “from the outside” (i.e. via an event) it stretches to full width of the screen

Updating a text node as direct child of a web component causes the internal markup of the component to be removed. This may be related to slot handling in Stencil. Other technologies don't cause these problems, though.

Workaround: Add "key"-Attribute to the component that equals to the text node, for react to know when to re-render the whole component.

Bug description
The background of the disabled input should be grey.

Steps to reproduce the behavior
Add disabled property to a LdInput component.

Expected behavior
The background of the input should be grey.

Actual behavior
The background of the input is white.

Additional context
https://emdgroup-liquid.github.io/liquid/components/ld-input/#disabled
https://codesandbox.io/s/liquid-oxygen-input-disabled-96bkj?file=/src/App.tsx:233-240

Bug description
While using React Input component, the onChange method is not triggered.

Steps to reproduce the behavior
Use a React Input component & pass a function to the onChange property. Change the value of the Input component.

Expected behavior
onChange function should be triggered.

Actual behavior
onChange function is not triggered.

Additional context
https://codesandbox.io/s/liquid-oxygen-input-0ikq1

Bug description

When using React Bindings, as soon as I want to add a prop that is not explicitly defined in the component class, a TS error is raised stating, for example:

TypeScript error in /dev/project/src/components/Component/Component.tsx(335,61):
Type '{ children: string; onClick: MouseEventHandler<HTMLLdButtonElement>; mode: "secondary"; type: string; }' is not assignable to type 'IntrinsicAttributes & Pick<LdButton & Omit<HTMLAttributes<HTMLLdButtonElement>, "style"> & StyleReactProps, "title" | ... 260 more ... | "justifyContent"> & RefAttributes<...>'.
  Property 'type' does not exist on type 'IntrinsicAttributes & Pick<LdButton & Omit<HTMLAttributes<HTMLLdButtonElement>, "style"> & StyleReactProps, "title" | ... 260 more ... | "justifyContent"> & RefAttributes<...>'.  TS2322

This happens, even though we allow for unknown properties and forward them to the inner element in many cases.

Expected behavior

A TypeScript definition is used that allows all known props of the element that the props are forwarded to. So for example, if props are forwarded to a button element used inside the ld-button component, I want to be able to pass all browser-supported props of a button element to the ld-button. This works for web components as well as for React components.

Actual behavior

Props need to be explicitly defined via the Prop() decorator in a component in order to pass them to a React component.

Additional context

Using

• [email protected]
• [email protected]

with TS strict mode, in an app developed using create-react-app and craco.

Bug description
"setAssetPath" is missing in @emdgroup-liquid/[email protected]

Steps to reproduce the behavior
npm i @emdgroup-liquid/liquid;
import { setAssetPath } from "@emdgroup-liquid/liquid";

Expected behavior
setAssetPath should be a function.

Actual behavior
setAssetPath is undefined.

Additional context
https://codesandbox.io/s/recursing-ully-ceihb?file=/src/App.tsx:61-116

Bug description
When controlling the Tab component through the selected & onTabSelect properties, the initial rendered content is incorrect.

Steps to reproduce the behavior
https://codesandbox.io/s/liquid-oxygen-tab-e14r2?file=/src/App.tsx

Expected behavior
The selected tab value is "Q1" & therefore "Q1"'s panel content should be displayed.

Actual behavior
The selected tab value is "Q1" but it's showing "Q4"'s panel content. Even if we change the selected tab value to "Q2", it always displays "Q4"'s content on the initial render.

TODO: add more detail / context

See https://www.sarasoueidan.com/blog/focus-indicators/

Bug description

I need to prevent the user from resizing the textarea created by ld-input so I set the css to resize: none on ld-input. Unfortunately this css prop is then not reflected in the textarea.

Steps to reproduce the behavior

This is a react example (regarding style) but i think you get the point.

<ld-input placeholder="Tell us your story..." multiline style={{ resize: 'none' }}></ld-input>

Expected behavior

The textarea should inherit the css property for resizing.

Actual behavior

The resize behavior cannot be changed

Details about device, OS, browser (including versions)

• Device: Macbook
• OS: Mac OS
• Browser: Chrome / Safari
• Version: x

See https://www.figma.com/file/JcDMeUwec9e185HfBgT9XE/Liquid-Oxygen?node-id=1082%3A301