Merge pull request #109 from orgenic/release/v0.4.3

Release/v0.4.3
orgenic · Dec 6, 2019 · 34bc77f · 34bc77f
2 parents 7f3b043 + c0b27be
commit 34bc77f
Show file tree

Hide file tree

Showing 12 changed files with 603 additions and 395 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,21 @@
+# [0.4.3](https://github.com/orgenic/orgenic-ui/compare/v0.4.2...v0.4.3) (2019-12-06)
+
+### Enhancements
+* fix: og-combobox flyout behavior
+* feat: new styling options for og-combobox
+* feat: new css vars for og-button
+* feat: prevent text wrap by default for og-button
+* fix: multi-select for og-list
+* chore: security updates
+
 # [0.4.2](https://github.com/orgenic/orgenic-ui/compare/v0.4.1...v0.4.2) (2019-10-30)
 
 ### Features
 * new button type "outline"
 * multi-select for og-list
 
 ### Enhancements
-* feat: new variable fpr text-transform in og-input
+* feat: new variable for text-transform in og-input
 * feat: shorten text of og-list-items
 * fix: handling dropdown event
 * fix: combobox flyout position
@@ -21,7 +31,7 @@
 * fix: hide empty footer  …
 * fix: card size depends on parent
 * fix: og-card header and sizing
-* fix: improve browser scroll behaviour
+* fix: improve browser scroll behavior
 
 # [0.4.0](https://github.com/orgenic/orgenic-ui/compare/v0.3.1...v0.4.0) (2019-06-28)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@orgenic/orgenic-ui",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "ORGENIC UI",
   "author": {
     "name": "MAXIMAGO GmbH",
@@ -37,6 +37,7 @@
     "build.watch": "stencil build --docs --watch",
     "start": "stencil build --dev --watch --serve --config stencil.run.config.ts",
     "test": "stencil test --spec --e2e",
+    "test.spec": "stencil test --spec",
     "test.ci": "stencil test --spec --e2e --ci",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "check-licenseheader": "node ./.scripts/check-licenseheaders.js"

diff --git a/src/components/og-button/og-button.scss b/src/components/og-button/og-button.scss
@@ -26,9 +26,13 @@
   // All Component Variables
   // Map Variables to Properties
   --Display: inline-block;
-  --Width: auto;
-  --MaxWidth: inherit;
   --Height: auto;
+
+  /**
+   * @prop --MinWidth:
+   * Minimum width of the Button.
+   */
+  --MinWidth: NULL;
   --MaxHeight: inherit;
   --Padding: var(--PADDING, 0.75rem 1.5rem);    // TODO: use --OG-PADDING
   --BorderWidth: 0;
@@ -53,16 +57,28 @@
 
   --og-button-FontWeight: var(--OG-FONT-WEIGHT--MEDIUM, 500);
 
+  /**
+   * @prop --og-button-WhiteSpace:
+   * White Space behavior of the Button text. Used to truncate overflowing text.
+   */
+  --og-button-WhiteSpace: NULL;
+
+  /**
+   * @prop --og-button-WhiteSpace:
+   * Text Overflow behavior. Used to truncate overflowing text.
+   */
+    --og-button-TextOverflow: NULL;
+
+
   --BoxShadow: var(--og-button-BoxShadow);
   --FontFamily: var(--og-button-FontFamily, inherit);
   --FontSize: var(--og-button-FontSize, inherit);
   --Outline: none;
   --TextTransform: uppercase;
 
   display: var(--Display);
-  width: var(--Width);
   min-width: var(--MinWidth);
-  max-width: var(--MaxWidth);
+  max-width: 100%;
   height: var(--Height);
   max-height: var(--maxHeight);
 
@@ -76,6 +92,13 @@
   *, *::before, *::after { box-sizing: inherit; }
 }
 
+:host(:not(.og-button--text-wrap)) {
+    --MinWidth: 0;
+    --og-button-WhiteSpace: nowrap;
+    --og-button-TextOverflow: ellipsis;
+}
+
+
 
 :host([data-context~='workflow']) {
     --og-button-Background: var(--OG-COLOR-PRIMARY--100, #{$og-color-primary--100});
@@ -118,30 +141,26 @@
 
 // Native <button> element
 .og-button {
-  display: block;
-  width: 100%;
-  max-width: inherit;
-  height: 100%;
-  max-height: inherit;
-  padding: var(--Padding);
-
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-
   background: var(--og-button-Background);
-
   border: var(--BorderWidth) var(--BorderStyle) var(--og-button-BorderColor);
   border-radius: var(--og-button-BorderRadius);
-
   color: var(--og-button-Color);
-
+  display: block;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  height: 100%;
+  max-height: inherit;
+  max-width: inherit;
+  overflow: hidden;
+  padding: var(--Padding);
+  text-overflow: var(--og-button-TextOverflow);
   text-transform: var(--TextTransform);
-
-  // Transitions
   transition-duration: 150ms;
   transition-property: background-color;
   transition-timing-function: ease-in-out;
+  width: 100%;
+  white-space: var(--og-button-WhiteSpace);
 
   // 'Focus' state
   &:focus {

diff --git a/src/components/og-button/readme.md b/src/components/og-button/readme.md
@@ -22,21 +22,23 @@
 
 ## CSS Custom Properties
 
-| Name                                | Description                                  |
-| ----------------------------------- | -------------------------------------------- |
-| `--og-button-Background`            | Main background color of the button          |
-| `--og-button-Background--active`    | Background color when the button is clicked  |
-| `--og-button-Background--disabled`  | Background color when the button is disabled |
-| `--og-button-Background--hover`     | Background color when the button is hovered  |
-| `--og-button-BorderColor`           | Main border color of the button              |
-| `--og-button-BorderColor--active`   | Border color when the button is clicked      |
-| `--og-button-BorderColor--disabled` | Border color when the button is disabled     |
-| `--og-button-BorderColor--hover`    | Border color when the button is hovered      |
-| `--og-button-BorderRadius`          | Border radius of the button                  |
-| `--og-button-Color`                 | Text color of the button label               |
-| `--og-button-Color--active`         | Text color when the button is clicked        |
-| `--og-button-Color--disabled`       | Text color when the button is disabled       |
-| `--og-button-Color--hover`          | Text color when the button is hovered        |
+| Name                                | Description                                                                 |
+| ----------------------------------- | --------------------------------------------------------------------------- |
+| `--MinWidth`                        | Minimum width of the Button.                                                |
+| `--og-button-Background`            | Main background color of the button                                         |
+| `--og-button-Background--active`    | Background color when the button is clicked                                 |
+| `--og-button-Background--disabled`  | Background color when the button is disabled                                |
+| `--og-button-Background--hover`     | Background color when the button is hovered                                 |
+| `--og-button-BorderColor`           | Main border color of the button                                             |
+| `--og-button-BorderColor--active`   | Border color when the button is clicked                                     |
+| `--og-button-BorderColor--disabled` | Border color when the button is disabled                                    |
+| `--og-button-BorderColor--hover`    | Border color when the button is hovered                                     |
+| `--og-button-BorderRadius`          | Border radius of the button                                                 |
+| `--og-button-Color`                 | Text color of the button label                                              |
+| `--og-button-Color--active`         | Text color when the button is clicked                                       |
+| `--og-button-Color--disabled`       | Text color when the button is disabled                                      |
+| `--og-button-Color--hover`          | Text color when the button is hovered                                       |
+| `--og-button-WhiteSpace`            | White Space behavior of the Button text. Used to truncate overflowing text. |
 
 
 ## Dependencies