Skip to content
This repository was archived by the owner on Aug 7, 2020. It is now read-only.

feat(oui-message): add dismissable attribute #259

Merged
merged 1 commit into from
Sep 7, 2018
Merged

feat(oui-message): add dismissable attribute #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 12 additions & 13 deletions packages/oui-message/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,26 @@

## Usage

### Information
### Basic

```html:preview
<oui-message type="info">Message</oui-message>
```

### Success

```html:preview
<oui-message type="success">Message</oui-message>
<oui-message type="warning">Message</oui-message>
<oui-message type="error">Message</oui-message>
```

### Warning
**Note**: Messages of type `info` and `success` are dismissable by default.

```html:preview
<oui-message type="warning">Message</oui-message>
```
### Dismissable

### Error
You can force the dismissable state by adding `dismissable` attribute.

```html:preview
<oui-message type="error">Message</oui-message>
<oui-message type="info" dismissable="false">Message</oui-message>
<oui-message type="success" dismissable="false">Message</oui-message>
<oui-message type="warning" dismissable>Message</oui-message>
<oui-message type="error" dismissable>Message</oui-message>
```

### Accessibility
Expand All @@ -39,5 +37,6 @@
| Attribute | Type | Binding | One-time binding | Values | Default | Description
| ---- | ---- | ---- | ---- | ---- | ---- | ----
| `type` | string | @ | yes | `info`, `success`, `warning`, `error` | n/a | message type
| `aria-close-button-label` | function | @? | yes | n/a | n/a | accessibility label for close button
| `aria-close-button-label` | string | @? | yes | n/a | n/a | accessibility label for close button
| `dismissable` | boolean | <? | yes | `true`, `false` | n/a | dismissable flag for close button
| `on-dismissed` | function | &? | no | n/a | n/a | dismissed handler
2 changes: 1 addition & 1 deletion packages/oui-message/src/message.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default {
type: "@",
ariaCloseButtonLabel: "@?",
dismissable: "<?",
onDismissed: "&?"
onDismissed: "&"
},
transclude: true
};
9 changes: 4 additions & 5 deletions packages/oui-message/src/message.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { addBooleanParameter } from "@oui-angular/common/component-utils";
import { addBooleanParameter, addDefaultParameter } from "@oui-angular/common/component-utils";

export default class {
constructor ($attrs) {
Expand All @@ -8,14 +8,13 @@ export default class {
}

$onInit () {
// Guidelines default value for dismissable attribute
addDefaultParameter(this, "dismissable", this.type === "info" || this.type === "success");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could have an array of types that are dissimisable by default

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's your proposition ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

message.constants.js

angular
	.module("moduleName")
	.constant("MESSAGE_CONSTANTS", () => {
		TYPES: {
			info: {
				dismissableByDefault: true
			},
			...
		}
})

message.controller.js

addDefaultParameter(this, "dismissable", this.MESSAGE_CONSTANTS.TYPES[this.type].isDismissableByDefault

The constants could contain more data about types and would make it easier to add new types, if the need ever rise.

I would understand if you considered it over-engineering 😄

addBooleanParameter(this, "dismissable");
}

dismiss () {
this.dismissed = true;

if (this.onDismissed) {
this.onDismissed();
}
this.onDismissed();
}
}
2 changes: 1 addition & 1 deletion packages/oui-message/src/message.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div ng-if="!$ctrl.dismissed" ng-class=":: 'oui-message oui-message_' + $ctrl.type" role="alert">
<span class="oui-icon oui-icon_bicolor" ng-class=":: 'oui-icon-' + $ctrl.type + '_circle'" aria-hidden="true"></span>
<div class="oui-message__body" ng-class=":: 'oui-message__body_' + $ctrl.type" ng-transclude></div>
<button ng-if=":: $ctrl.type === 'info' || $ctrl.type === 'success' || $ctrl.dismissable"
<button ng-if="::$ctrl.dismissable"
class="oui-icon oui-icon-close oui-message__close-button"
type="button"
ng-click="$ctrl.dismiss()"
Expand Down