All css variables are postfixed with ; - this must be removed as this is throwing an error when used as inline style

Describe the bug
fiori3.production.min.js cause to import all language message files, so the final bundle js is about 8.2m.

To Reproduce
Steps to reproduce the behavior:

1. create react application
   2 following the example: import { ContentDensity, ThemeProvider, Themes } from '@fiori-for-react/fiori3';
   3 npm run build

the bundle size will be larger than 8m. when you look into the bundle, lots of language.json file inside.

I know I could import single component from /lib folder. But as a components libs, the size is too huge, suppose language should not go into final bundle.

Screenshots

If applicable, add screenshots to help explain your problem.

Describe the bug
With SideNavigationOpenState.Condensed property the SideNavigation is not rendering correctly, as the screenshot bellow.

To Reproduce
Render element SideNavigation element

Expected behavior
Component to be rendered without a dent (width difference between the icon button and the rest of the element)

Screenshots

Desktop (please complete the following information):

• Windows
• Chrome

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Currently we have our own implementation with own hex codes for SAP styling parameters.
This is causing inconsistencies with the UI5 Web Components styling.

Describe the solution you'd like
A clear and concise description of what you want to happen.
We should reuse the UI5 Web Components Theming Parameters.
SAP/ui5-webcomponents#410

Describe the bug
When Using an Input inside of a Popover, the suggestionItems will not show, eventhough the dom contains the

Update to the latest web components version.

https://github.com/SAP/ui5-webcomponents/releases/tag/v1.0.0-rc.1

Describe the bug
onLogoClick prop is not working for ShellBar

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome

The styles and the utils package are requiring each other, so we duplicate code inside at the moment. Moving forward we want to use the styles from the ui5-webcomponents, so there is no need to keep those packages separate.
--> Merge the styles and the utils package into a new package base.

ToDos:

• Move Packages into new package base
• Adjust Readme
• Adjust npm release scripts
• Deprecate styles and utils on npm
• Delete old styles sap_belize, sap_belize_plus and sap_belize_hcb

The core package is not longer required because there is only the fiori3 package.

• Move members to fiori3 or utils
• Check imports
• Remove from build
• Remove from ci scripts

https://github.com/SAP/ui5-webcomponents/releases/tag/v0.12.0

Describe the bug
When trying to use the showPlageIndicator false and move the arrow placement into the content area the footer area is still shown.

To Reproduce

Also reproducible in the storybook page https://sap.github.io/ui5-webcomponents-react/?path=/story/components-carousel--default

Expected behavior
Footer area to be hidden

In below UI5 Object Page examples, the header image can be positioned on the left of the header title.
https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageOnJSON
https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageHeaderContentPriorities

However, as far as I knew, ObjectPage component in UI5-webcomponents-react doesn't support this feature. (The header image is always displayed beneath the title.) Could it be added?

Current:

Expected:

Description
We have a use case that needs a menu with an overlay. (Please, follow references)

But we also need to keep the behavior Condensed of openState.

References:
atlaskit
Youtube displaying video
Material UI

ui5

Hover on the transparent button, there is a blue border:

ui5 react web components

no border when hovering on the button

Reference:

Guideline: https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2025039257#Button(Fiori3)-TertiaryTransparentHighlightButton
UI5 Sample: https://sapui5.hana.ondemand.com/#/entity/sap.m.Button/sample/sap.m.sample.Button

Is your feature request related to a problem? Please describe.
When ShellBar is implemented there is no option to add a side navigation menu icon as described in the Fiori Guideline. There is only the option to add Icon property, but the icon is not aligned correctly.

Describe the solution you'd like
ShellBar would have a React component property SideNavigationMenuIcon that activates the menu icon.

Additional context
Fiori Guidelines references:

• Tool Header
• Side Navigation

Describe the bug
The spinner component as has prop type styles, but these styles are not accepted in the component.

To Reproduce
Steps to reproduce the behavior:

<Spinner style={{ marginTop: '1rem' }} />

Expected behavior
Style should be accepted.

Describe the bug
The Title of the first SubSection don't hide if the first element inside the ObjectPage is not a SubSection.

To Reproduce
Steps to reproduce the behavior:
Just add an element like a Dialog in front of the first SubSection.

Expected behavior
First Title of a SubSection should always hide. (Double Information see Screenshot)

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser: chrome
• Version: 22

• Package.json
• Readme
• Docs
• Samples
• Deprecate old packages on npm

In ui5-webcomponents, there is a "Configure Compact/Cozy setting". How to use it in ui5-webcomponents-react?

I have tried this in my header, but not working:

<style data-ui5-webcomponents-theme-properties></style>
<script data-ui5-config type="application/json">
{
    "compactSize": true
}
</script>

Hello,
You can't rerender the number input. Because of this it's very hard to build a validation. For example, that you can't go below zero.

To Reproduce
`
const [value, setValue] = useState(1);

const eventHandler = (e: Event) => {
const value = +e.parameters.value;
if(value < 1) setValue(1);
}

return(
<Input
type={InputType.Number}
onChange={eventHandler}
onInput={eventHandler}
value={value}
valueState={error ? ValueState.Error : undefined}
/>
);
`

Expected behavior
If you input a number below 1 it should be changed to 1

What happens
Nothing. You can input negative numbers.

Describe the bug
In typescript projects, the typings cannot be resolved

To Reproduce
Create a project via create react app with typescript and install @fiori-for-react/fiori3. The module cannot be resolved/ imports do not work.

Expected behavior
Imports should be resolved correctly.

Desktop (please complete the following information):

• OS: Macos

Additional context
The problem seems to be that all typings are located at node_modules/@fiori-for-react/fiori3/fiori3/src. But the package.json of @fiori-for-react/fiori3 points to node_modules/@fiori-for-react/fiori3.

Describe the bug
In the SegmentedButtonItem Component the visible props seems not have an effect.
When setting visible={false}, the Segment still will be shown

To Reproduce
Steps to reproduce the behavior:
Render Segmented Button, create 2 SegmentedButtonItem and set prop visible to false for one of them. Both will be shown.

Expected behavior
Only SegmentedButtonItem with visible={true}, shorthanded visible (= default) should be shown.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MAC OS
• Browser Chrome

Additional context

Describe the bug
A clear and concise description of what the bug is.
The declarations of the charts package contain charts and main. This needs to be fixed so that the index.d.ts will be available on the npm module root again.

Is your feature request related to a problem? Please describe.
On the SideNavigation component the callback event triggered by onItemSelect is called only once.

Describe the solution you'd like
I would like to be able to handle the the click event on the SideNavigation component more than once, perhaps would be good to add a onItemClick property to handle the click event and keep the onItemSelect as it is.

Describe the bug
Documentation page is not working. Storybook Radiobutton.

Thanks,
Jens

Describe the bug

We are trying to build an application that must support UIs with a right to left direction (e.g. Hebrew language), but when we activate this option, the components aren't placed right. We already tried to change the application language, but nothing happened.

Expected behavior

Right to left support.

Screenshots

Shell bar:

The profile picture should be on the left side.

Segmented Button:

It's inverted.

Card:

The title should be on the right, and also the subtitles and texts.

Desktop (please complete the following information):

• Chrome

Describe the issue
I have an ejected react app by using create-react-app. When I try to setup the unit test, I got error

TypeError: WebComponent.getMetadata is not a function

at ../../../node_modules/@ui5/webcomponents-react/cjs/main.development.js:250:38
      at renderWithHooks (../../../node_modules/react-dom/cjs/react-dom.development.js:12938:18)
      at updateForwardRef (../../../node_modules/react-dom/cjs/react-dom.development.js:14457:20)
      at beginWork (../../../node_modules/react-dom/cjs/react-dom.development.js:15661:16)
      at performUnitOfWork (../../../node_modules/react-dom/cjs/react-dom.development.js:19312:12)
      at workLoop (../../../node_modules/react-dom/cjs/react-dom.development.js:19352:24)
      at renderRoot (../../../node_modules/react-dom/cjs/react-dom.development.js:19435:7)
      at performWorkOnRoot (../../../node_modules/react-dom/cjs/react-dom.development.js:20342:7)
      at requestWork (../../../node_modules/react-dom/cjs/react-dom.development.js:20090:7)
      at scheduleWork (../../../node_modules/react-dom/cjs/react-dom.development.js:19911:5)
      at scheduleRootUpdate (../../../node_modules/react-dom/cjs/react-dom.development.js:20572:3)
      at updateContainerAtExpirationTime (../../../node_modules/react-dom/cjs/react-dom.development.js:20600:10)
      at updateContainer (../../../node_modules/react-dom/cjs/react-dom.development.js:20657:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (../../../node_modules/react-dom/cjs/react-dom.development.js:20953:3)
      at ../../../node_modules/react-dom/cjs/react-dom.development.js:21090:14
      at unbatchedUpdates (../../../node_modules/react-dom/cjs/react-dom.development.js:20454:14)
      at legacyRenderSubtreeIntoContainer (../../../node_modules/react-dom/cjs/react-dom.development.js:21086:5)
      at Object.render (../../../node_modules/react-dom/cjs/react-dom.development.js:21155:12)

If I modified the code in node_modules/@UI5 like this:

WebComponent.default.getMetadata()

Similarly, in node_modules/@ui5/webcomponents/webcomponents-react/cjs/main.development.js, I change boot().then(...) to boot.default().then(...). After these two changes, my unit test runs successfully.

I think my jest config is not correct so that I run into this problem that is related to:

https://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default

But I am not able to figure out the correct configuration to pass this error. Could you suggest how can I fix this issue?

To Reproduce

The github repository is in corporate github. I can send you the repository url by email.

Is your feature request related to a problem? Please describe.
There is no Side Navigation and Breadcrumb components, such as presented in the Fiori guidelines. Many modern applications have these components nowadays.

Describe the solution you'd like
I would like to have a Side Navigation and Breadcrumb components. There are these components in the Fiori Fundamentals. Side Navigation and Breadcrumb.

Describe alternatives you've considered
For the Side Navigation, I think about creating a component using the List component.
For the Breadcrumb, I think about creating a component using the Link component.

When the header is collapsed, the image provided should be visible next to the title on the left hand size with a smaller scale.

Requested by #97
Requested by #92

Is your feature request related to a problem? Please describe.
I want to show a avatar with initials on the object page header, but the object page only accepts image url for header image.

Describe the solution you'd like
ObjectPage accepts initials and renders a avatar with initials in the header

Additional context
Expected:

In sap.uxap.ObjectPageLayout,
When the user scrolls down or clicking another ObjectPageSection inside anchor navigation,
the header will be minimized with only smaller profile picture and title.
Behavior in sap.uxap.ObjectPageLayout

But ObjectPage of ui5-webcomponent, only showHideHeaderButton function is provided.
ObjectPage Component, showHideHeaderButton

Will the hidden header behavior be enhanced?

Describe the bug
It's not possible to change the icon color within the StandardListItem component. The StandardListItem component accepts an icon prop, which is of the string type, so it's not possible to pass an Icon component as prop. The same is true for the children prop. Using JavaScript is possible to do this, as you can see in the following link, but with TypeScript is possible to do this only if it's used a @ts-ignore comment, as you can see in the following link.

To Reproduce
JavaScript link.
TypeScript link.

Expected behavior
A way to change the icon color within the StandardListItem component.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 76

Update our UI5 Web Components dependency to the latest released version.

Describe the bug
As mentioned in issue (#127), the release 0.5.1-rc.16 implemented Side Navigation. The component SideNavigationListItem has a property called tooltip, but when applied nothing happend.
The interface SideNavigationListItemProps extends CommonProps, that has tooltip property.

Is the tooltip implementation for this component planned?

Expected behavior
When property tooltip is added, in mouse is over the menu item, should appear a tooltip with the string message.

Describe the bug
A Zero 0 is being rendered with the component

To Reproduce
Steps to reproduce the behavior:

1. render a SideNavigation

Screenshots

Desktop (please complete the following information):

• Windows
• chrome
• Version 77.0.3865.90

Describe the bug
For accessibility need to be able to access the left and right via keyboard and have some visual indicators on mouse over and focus

To Reproduce

Try tabbing to the icon arrows

Expected behavior
The navigations icon arrows should behave like the button component

Required for ShellBar notifications

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Bundlephobia is great tool for analyzing the "cost" of an npm module.
https://bundlephobia.com/[email protected]

Currently, @ui5/webcomponents-react is not parseable.

We are currently running on a beta, we should upgrade at least to the release candidate.
https://github.com/storybookjs/storybook/releases/tag/v5.2.0-rc.0

It should be possible to make Spinner appear after a certain delay to avoid showing Spinners for split seconds.

Describe the bug
It is not possible to get the list item data by clicking on it using the onItemClick event from the <List>. The onItemClick event fires a callback function, which receives an event as parameter. Using this event, I can't get the list item data. In my example, I have a list of product objects, which have the properties id and name. In the <StandardListItem> I just use the name property. How can I get the product object from the list of product objects when I click on the list item? Also, I'm using TypeScript, what don't allow me to use a React Element as a children of the <StandardListItem> (in the codesandbox bellow I'm using JavaScript, which allows me to do that).

To Reproduce
https://codesandbox.io/s/intelligent-waterfall-gggot

Steps to reproduce the behavior:

1. Click on any list item from the first list.
2. See on the log console the logged event.
3. Click on any list item from the second list.
4. See on the log console the logged product id.

Expected behavior
I think each <StandardListItem> should have its own onClick method. A good example is the <ListItem> component from the Material-UI library, which accepts an onClick method.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 76

Columns should be resizable by drag and drop like in the old version of the AnalyticalTable

Most of our components are still using the legacy ref api.
As we are requiring react@^16.8.0, we should drop the support for this and use the RefObject<T> API.

Describe the documentation issue

• Documentation is unclear
• Documentation is incorrect
• Documentation is missing
• Other

Description of the issue
I haven't found in the documentation a way to use the CSS variables to stylize my React components. I've seen something related to styles in this file, but it's not clear how to use it. Besides that, would you recommend using JSS or CSS to stylize the React components? I've been thinking about using the SAP Fundamentals SCSS to stylize my React components.

Describe the bug
Icons within the SegmentedButton are always black, even on Selection.

Describe the bug
When adding e.g. the <Select> with <Option> jest tests fail with

    /Users/<redacted>/test-app/node_modules/@ui5/webcomponents/dist/Popover.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
                                                                                                    ^^^^^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (node_modules/@ui5/webcomponents-react/cjs/main.development.js:7:18)

  console.info node_modules/@ui5/webcomponents-react-base/cjs/base.development.js:1934
    2019-09-10 11:07:33 Device API logging initialized -

  console.info node_modules/@ui5/webcomponents-react-base/cjs/base.development.js:1934
    2019-09-10 11:07:33 OS detection returned no result - DEVICE

To Reproduce
Steps to reproduce the behavior:

• yarn create react-app test-app --typescript
• yarn add @ui5/webcomponents-react
• yarn test (test passes)
• add to App.tsx:

        <Select disabled={false}>
          <Option selected icon="sap-icon://add">
            Test 1
          </Option>
          <Option icon="sap-icon://add">
            Test 2
          </Option>
          <Option icon="sap-icon://add">
            Test 3
          </Option>
          <Option icon="sap-icon://add">
            Test 4
          </Option>
          <Option icon="sap-icon://add">
            Test 5
          </Option>
        </Select>

• yarn start (verifying that the app works as expected)
• yarn test (test fails on import)

Expected behavior
Test passing

Desktop (please complete the following information):

• OS: MacOS

Required for grouping notifications

Describe the bug
The Spinner Component isn't spinning anymore

To Reproduce
Steps to reproduce the behavior:

1. Open the Spinner Demo

Expected behavior
A clear and concise description of what you expected to happen.
Should spin