Commit Graph

23 Commits

Author SHA1 Message Date
dependabot[bot]
9e4a72945c
Build(deps-dev): Bump the types group (#24068)
Bumps the types group in /app/assets/javascripts with 1 update: [@types/jquery](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jquery).

- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jquery)

---
updated-dependencies:
- dependency-name: "@types/jquery"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-10-23 23:29:40 +02:00
Joffrey JAFFEUX
043b4a4187
FIX: replaces data-tooltip usage by <DTooltip /> (#24062)
As much as possible I would like us to avoid having to go the with a global event listener on click/mouseover. For now I have removed all cases of `data-tooltip`, if we clearly identify a use case of a global event listener we might reconsider this.

The following changes are also included:
- by default tooltips won't attempt to focus first focusable element anymore
- tooltip will now use `cursor: pointer` by default
- a new service has been introduced: `InternalTooltip` which is responsible to track the current instance displayed by a `<DTooltip />`. Portal elements when replaced are not properly cleaned and I couldn't figure out a way to have a proper hook to ensure the previous `DTooltipInstance` is properly set as not expanded; this problem was very visible when using a tooltip as interactive and hovering another tooltip, which would replace the interactive tooltip as not closed.
2023-10-23 21:09:02 +02:00
Joffrey JAFFEUX
552cf56afe
DEV: toasts improvements (#24046)
- more subtle animation when showing a toast
- resumes auto close when removing the mouse from the toast
- correctly follows reduced motion
- uses output with role status as element: https://web.dev/articles/building/a-toast-component
- shows toasts inside a section element
- prevents toast to all have the same width
- fixes a bug on mobile where we would limit the width and the close button wouldn't show correctly aligned

I would prefer to have tests for this, but the conjunction of css/animations and our helper changing `discourseLater` to 0 in tests is making it quite challenging for a rather low value. We have system specs using  toasts ensuring they show when they should.
2023-10-23 15:23:10 +02:00
Jarek Radosz
c84fe69e10
DEV: Use @discourse/lint-configs (#24038) 2023-10-23 12:08:35 +02:00
Mark VanLandingham
cfbe16f9cc
DEV: Add option to float-kit toast to force auto-close (#24022) 2023-10-19 10:14:49 -05:00
dependabot[bot]
67594f8d74
Build(deps-dev): Bump the types group (#23994)
Bumps the types group in /app/assets/javascripts with 12 updates:

| Package | From | To |
| --- | --- | --- |
| [@types/ember](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember) | `4.0.7` | `4.0.8` |
| [@types/ember__application](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember__application) | `4.0.8` | `4.0.9` |
| [@types/ember__array](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember__array) | `4.0.6` | `4.0.7` |
| [@types/ember__component](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember__component) | `4.0.18` | `4.0.19` |
| [@types/ember__engine](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember__engine) | `4.0.7` | `4.0.8` |
| [@types/ember__object](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember__object) | `4.0.8` | `4.0.9` |
| [@types/ember__routing](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember__routing) | `4.0.16` | `4.0.17` |
| [@types/ember__runloop](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember__runloop) | `4.0.6` | `4.0.7` |
| [@types/ember__test](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/ember__test) | `4.0.3` | `4.0.4` |
| [@types/jquery](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jquery) | `3.5.23` | `3.5.24` |
| [@types/qunit](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/qunit) | `2.19.6` | `2.19.7` |
| [@types/rsvp](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/rsvp) | `4.0.5` | `4.0.6` |


Updates `@types/ember` from 4.0.7 to 4.0.8
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember)

Updates `@types/ember__application` from 4.0.8 to 4.0.9
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember__application)

Updates `@types/ember__array` from 4.0.6 to 4.0.7
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember__array)

Updates `@types/ember__component` from 4.0.18 to 4.0.19
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember__component)

Updates `@types/ember__engine` from 4.0.7 to 4.0.8
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember__engine)

Updates `@types/ember__object` from 4.0.8 to 4.0.9
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember__object)

Updates `@types/ember__routing` from 4.0.16 to 4.0.17
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Changelog](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/ember__routing/history-location.d.ts)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember__routing)

Updates `@types/ember__runloop` from 4.0.6 to 4.0.7
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember__runloop)

Updates `@types/ember__test` from 4.0.3 to 4.0.4
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/ember__test)

Updates `@types/jquery` from 3.5.23 to 3.5.24
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jquery)

Updates `@types/qunit` from 2.19.6 to 2.19.7
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/qunit)

Updates `@types/rsvp` from 4.0.5 to 4.0.6
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/rsvp)

---
updated-dependencies:
- dependency-name: "@types/ember"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/ember__application"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/ember__array"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/ember__component"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/ember__engine"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/ember__object"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/ember__routing"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/ember__runloop"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/ember__test"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/jquery"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/qunit"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
- dependency-name: "@types/rsvp"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: types
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-10-19 00:22:30 +02:00
dependabot[bot]
c3bde99cd0
Build(deps): Bump ember-template-imports from 3.4.2 to 4.0.0 in /app/assets/javascripts (#23970)
* Build(deps): Bump ember-template-imports in /app/assets/javascripts

Bumps [ember-template-imports](https://github.com/ember-template-imports/ember-template-imports) from 3.4.2 to 4.0.0.
- [Release notes](https://github.com/ember-template-imports/ember-template-imports/releases)
- [Changelog](https://github.com/ember-template-imports/ember-template-imports/blob/master/CHANGELOG.md)
- [Commits](https://github.com/ember-template-imports/ember-template-imports/compare/v3.4.2...v4.0.0)

---
updated-dependencies:
- dependency-name: ember-template-imports
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* Remove legacy decorators from gjs file

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
2023-10-18 12:42:26 +01:00
David Taylor
93c67eeb4f
DEV: Consolidate and update jsconfig, and add types packages (#23824)
These updates significantly improve IDE tooling for imports across the Discourse core codebase, and also for framework packages. The `@types/ember-*` packages are a temporary solution until we get onto Ember 5, which ships its types in the main package.

The previous approach of having jsconfig files in each package directory did work, but once you start adding all the possible interlinks between them, we hit the file count limit of VSCode's tooling (because it counts every file for every jsconfig its referenced in). Having one file at the root means that a single file can apply to all core packages and plugins.

Long-term, to get the same functionality for all themes/plugins, we may need to look at building/publishing a Discourse types package which can be added to theme/plugin package.json files for development purposes.
2023-10-18 12:13:20 +01:00
dependabot[bot]
a21a6dbd4d
Build(deps-dev): Bump webpack in /app/assets/javascripts (#23939)
Bumps [webpack](https://github.com/webpack/webpack) from 5.88.2 to 5.89.0.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](https://github.com/webpack/webpack/compare/v5.88.2...v5.89.0)

---
updated-dependencies:
- dependency-name: webpack
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-10-16 11:23:00 +02:00
dependabot[bot]
1fac13b405
Build(deps-dev): Bump the babel group (#23919)
Bumps the babel group in /app/assets/javascripts with 1 update: [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core).

- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/@babel/core@7.23.2/packages/babel-core)

---
updated-dependencies:
- dependency-name: "@babel/core"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: babel
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-10-13 00:08:07 +02:00
dependabot[bot]
775c7d427b
Build(deps): Bump ember-cli-babel in /app/assets/javascripts (#23890)
Bumps [ember-cli-babel](https://github.com/babel/ember-cli-babel) from 8.1.0 to 8.2.0.
- [Release notes](https://github.com/babel/ember-cli-babel/releases)
- [Changelog](https://github.com/babel/ember-cli-babel/blob/master/CHANGELOG.md)
- [Commits](https://github.com/babel/ember-cli-babel/compare/v8.1.0...v8.2.0)

---
updated-dependencies:
- dependency-name: ember-cli-babel
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-10-11 00:18:58 +02:00
David Taylor
48193767bf DEV: Sort imports
Automatically generated by `eslint --fix` to satisfy the updated configuration
2023-10-10 21:46:54 +01:00
David Taylor
ee0fef489f DEV: Move gjs <template> to bottom of class definitions
To satisfy updated eslint configuration
2023-10-10 21:46:54 +01:00
Joffrey JAFFEUX
42801c950f
UI: redesigned settings/members (#23804)
This PR is a first step towards private groups. It redesigns settings/members area of a channel and also drops the "about" page which is now mixed into settings.

This commit is also:
- introducing chat-form, a small DSL to create forms, ideally I would want something in core for this
- introducing a DToggleSwitch page object component to simplify testing toggles
- migrating various components to gjs
2023-10-09 14:11:16 +02:00
Joffrey JAFFEUX
35d2426b42
FIX: ensures close arg from d-menu/:content works (#23773) 2023-10-04 19:58:17 +02:00
dependabot[bot]
5f3265fe01
Build(deps-dev): Bump the embroider group (#23728)
Bumps the embroider group in /app/assets/javascripts with 4 updates: [@embroider/test-setup](https://github.com/embroider-build/embroider/tree/HEAD/packages/test-setup), [@embroider/compat](https://github.com/embroider-build/embroider/tree/HEAD/packages/compat), [@embroider/core](https://github.com/embroider-build/embroider/tree/HEAD/packages/core) and [@embroider/webpack](https://github.com/embroider-build/embroider/tree/HEAD/packages/webpack).


Updates `@embroider/test-setup` from 3.0.1 to 3.0.2
- [Release notes](https://github.com/embroider-build/embroider/releases)
- [Changelog](https://github.com/embroider-build/embroider/blob/main/CHANGELOG.md)
- [Commits](https://github.com/embroider-build/embroider/commits/HEAD/packages/test-setup)

Updates `@embroider/compat` from 3.2.1 to 3.2.2
- [Release notes](https://github.com/embroider-build/embroider/releases)
- [Changelog](https://github.com/embroider-build/embroider/blob/main/CHANGELOG.md)
- [Commits](https://github.com/embroider-build/embroider/commits/HEAD/packages/compat)

Updates `@embroider/core` from 3.2.1 to 3.3.0
- [Release notes](https://github.com/embroider-build/embroider/releases)
- [Changelog](https://github.com/embroider-build/embroider/blob/main/CHANGELOG.md)
- [Commits](https://github.com/embroider-build/embroider/commits/HEAD/packages/core)

Updates `@embroider/webpack` from 3.1.5 to 3.2.0
- [Release notes](https://github.com/embroider-build/embroider/releases)
- [Changelog](https://github.com/embroider-build/embroider/blob/main/CHANGELOG.md)
- [Commits](https://github.com/embroider-build/embroider/commits/HEAD/packages/webpack)

---
updated-dependencies:
- dependency-name: "@embroider/test-setup"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: embroider
- dependency-name: "@embroider/compat"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: embroider
- dependency-name: "@embroider/core"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: embroider
- dependency-name: "@embroider/webpack"
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: embroider
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-09-29 18:00:33 +01:00
dependabot[bot]
53a211b77e
Build(deps): Bump ember-cli-babel in /app/assets/javascripts (#23667)
Bumps [ember-cli-babel](https://github.com/babel/ember-cli-babel) from 7.26.11 to 8.1.0.
- [Release notes](https://github.com/babel/ember-cli-babel/releases)
- [Changelog](https://github.com/babel/ember-cli-babel/blob/master/CHANGELOG.md)
- [Commits](https://github.com/babel/ember-cli-babel/compare/v7.26.11...v8.1.0)

---
updated-dependencies:
- dependency-name: ember-cli-babel
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-09-26 17:52:08 +02:00
David Taylor
8958b4f76a
DEV: Rename custom getOwner to getOwnerWithFallback (#23437)
Our custom implementation of `getOwner` includes a fallback which returns an owner, even if the passed object does not have one set. This is confusing and creates a false sense of security. Generally if the fallback is used, it means there is a problem with the patterns being used.

This commit renames our custom implementation to `getOwnerWithFallback`, while maintaining the old `getOwner` export with a deprecation notice. Core code is updated to use the official `@ember/application` implementation, or the new `getOwnerWithFallback` function.

This commit updates all core uses of `{ getOwner } from discourse-common/lib/get-owner` to use `getOwnerWithFallback`. Future commits will work through and convert many of these to use the official `@ember/application` implementation
2023-09-26 14:30:52 +01:00
Joffrey JAFFEUX
2a10ea0e3f
DEV: FloatKit (#23650)
This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast


## Tooltips
### Component

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip 
  @Label={{i18n "foo.bar"}}
  @ICON="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

### Service

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

## Menus

Menus are very similar to tooltips and provide the same kind of APIs:

### Component

```hbs
<DMenu @ICON="plus" @Label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

### Service

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```


## Toasts

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-26 13:39:52 +02:00
Joffrey JAFFEUX
85fddf58bc
Revert "DEV: FloatKit (#23541)" (#23549)
This reverts commits

0623ac684a
408e71e437
a32fa3b947

User tips were running into some issues.
2023-09-12 13:55:12 -04:00
Joffrey JAFFEUX
0623ac684a
DEV: FloatKit (#23541)
Second iteration of https://github.com/discourse/discourse/pull/23312 with a fix for embroider not resolving an export file using .gjs extension.

---

This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast


## Tooltips
### Component

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip 
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

### Service

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

## Menus

Menus are very similar to tooltips and provide the same kind of APIs:

### Component

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

### Service

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```


## Toasts

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:50:26 +02:00
Joffrey JAFFEUX
b8cc1072cc
Revert "DEV: FloatKit (#23312)" (#23540)
This reverts commit abcdd8d367.
2023-09-12 15:37:16 +02:00
Joffrey JAFFEUX
abcdd8d367
DEV: FloatKit (#23312)
This PR introduces three new UI elements to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Menus are very similar to tooltips and provide the same kind of APIs:

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:06:51 +02:00