feat(ui5-product-switch): initial implementation #971
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BREAKING CHANGE: @ui5/webcomponents/dist/Icon.js The src property was renamed to name and accepts icon name (such as "add") instead of icon src (such as "sap-icon://add"). Note: the src property will continue to work until the next release due to the impact of the change, but will produce a warning in the console. @ui5/webcomponents/dist/Card.js The avatar property was removed. Use the avatar slot instead - pass an icon(<ui5-icon) or an image(<img). Before: <ui5-card avatar="sap-icon://add"></ui5-card> After: <ui5-card><ui5-icon name="add" slot="avatar"></ui5-icon></ui5-card> and respectively: <ui5-card avatar="http://url/to/my/image"></ui5-card> becomes: <ui5-card><img src="http://url/to/my/image" slot="avatar"/></ui5-card> @ui5/webcomponents-fiori/dist/ShellBarItem.js The src property was renamed to icon and accepts icon name (such as "add") instead of icon src (such as "sap-icon://add")
It turns out that in IE, the SVG is always getting focused upon TAB. By setting focusable="false", the SVG is no longer focusable.
- compress the size of animated coPilot SVG from more than 18k to 8.1k - unused CSS class `svg-box-content` removed - correctly fallback to non-animated SVG if the feature is not imported (there use to be a bug - throws JS error)
vladitasev
requested changes
Nov 25, 2019
packages/fiori/src/ProductSwitch.js
Outdated
| * @class | ||
| * <h3 class="comment-api-title">Overview</h3> | ||
| * | ||
| * The <code>ui5-product-switch</code> is a Fiori specific control that is used in <code>ui5-shellbar</code> |
packages/fiori/src/ProductSwitch.js
Outdated
| * The <code>ui5-product-switch</code> is a Fiori specific control that is used in <code>ui5-shellbar</code> | ||
| * <br><br> | ||
| * <h3>ES6 Module Import</h3> | ||
| * <code>import "@ui5/webcomponents-fiori/dist/ProductSwitch";</code> |
There was a problem hiding this comment.
better end the import with .js
packages/fiori/src/ProductSwitch.js
Outdated
| * | ||
| * @constructor | ||
| * @author SAP SE | ||
| * @alias sap.ui.webcomponents.main.ProductSwitch |
| onEnterDOM() { | ||
| this._handleResizeBound = this._handleResize.bind(this); | ||
|
|
||
| ResizeHandler.register(document.body, this._handleResizeBound); |
packages/fiori/src/ProductSwitch.js
Outdated
| constructor() { | ||
| super(); | ||
|
|
||
| this.ROW_MIN_WIDTH = { |
There was a problem hiding this comment.
This isn't per component, should be on the constructor function
| * <br><br> | ||
| * Example: | ||
| * <br> | ||
| * <pre>ui5-product-switch-item icon="sap-icon://palette"</pre> |
There was a problem hiding this comment.
sap-icon:// should not be written by users any more, we deprecated it
| * | ||
| * @constructor | ||
| * @author SAP SE | ||
| * @alias sap.ui.webcomponents.main.ProductSwitchItem |
There was a problem hiding this comment.
fiori, not main.
Overall: please scan all the files for the word "main" to make sure there aren't any other leftovers
ilhan007
reviewed
Nov 25, 2019
| @@ -0,0 +1,30 @@ | |||
| :host { | |||
| font-family: var(--sapUiFontFamily); | |||
There was a problem hiding this comment.
Usually, we write css regarding the html native 'hidden' attribute, so the user can hide our components, using it.
!-- from Button.css --!
:host(:not([hidden])) {
display: inline-block;
}
vladitasev
approved these changes
Nov 25, 2019
xtatica
reviewed
Nov 26, 2019
| /** | ||
| * @class | ||
| * <h3 class="comment-api-title">Overview</h3> | ||
| * The <code>ui5-product-switch-item</code> represents the items displayed in the <code>ui5-product-switch</code> web component |
There was a problem hiding this comment.
missing a full stop at the end
xtatica
reviewed
Nov 26, 2019
| * @class | ||
| * <h3 class="comment-api-title">Overview</h3> | ||
| * | ||
| * The <code>ui5-product-switch</code> is a Fiori specific web component that is used in <code>ui5-shellbar</code> and allows the user easy switching between products. |
There was a problem hiding this comment.
The ui5-product-switch is an SAP Fiori specific web component that is used in ui5-shellbar and allows the user to easily switch between products.
plamenivanov91
pushed a commit
to plamenivanov91/ui5-webcomponents
that referenced
this pull request
Nov 27, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
FIXES: #857