Commit Graph

104 Commits

Author SHA1 Message Date
Isaac Janzen
6aae60a212
FIX: Tooltip styleguide triggers not rendering options (#29926)
Tooltips have different triggers / untriggers by device type (mobile / desktop) and this PR provides the correct options in the styleguide based on device type. 

# Before
<img width="787" alt="Screenshot 2024-11-25 at 3 31 56 PM" src="https://github.com/user-attachments/assets/f18f3003-e887-42c5-8f42-24af87cadf56">

# After
<img width="800" alt="Screenshot 2024-11-25 at 3 30 48 PM" src="https://github.com/user-attachments/assets/6113eff3-7b1f-4782-aea3-c8bee5e9842a">
2024-11-25 16:00:52 -06:00
Jarek Radosz
2589545623
DEV: Detect hbr topic list customizations (#29793) 2024-11-21 16:00:49 +01:00
David Taylor
32665cf9dd
DEV: Consolidate i18n import paths (#29804)
Enables our new eslint rules which enforce consistent i18n imports. For more info, see 0d58b40cd7
2024-11-19 20:45:18 +00:00
Sérgio Saquetim
91ce470fce
FIX: Styleguide errors and add smoke test for component pages (#29747) 2024-11-14 15:07:05 -03:00
Joffrey JAFFEUX
b24c8a41ac
FIX: remove header-icons from styleguide (#29670)
Recent changes in header makes it complicated to show multiple standalone headers with different state.
2024-11-09 21:58:48 +09:00
Joffrey JAFFEUX
0669830a5b
FIX: broken post in styleguide (#29669)
The base `transformedPost` in dummy-data was missing the topic object.
2024-11-09 21:46:56 +09:00
Jarek Radosz
cc447a1ae3
DEV: Simplify TopicNotificationsButton (#29465) 2024-10-29 16:27:23 +01:00
Joffrey JAFFEUX
e4e2bc7add
DEV: replaces subtitle by description (#28881)
Description should be above the field and that makes subtitle useless.

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>
2024-09-18 11:14:59 +02:00
Kris
a914d3230b
DEV: remap all core icons for fontawesome 6 upgrade (#28715)
Followup to 7d8974d02f

Co-authored-by: David Taylor <david@taylorhq.com>
2024-09-13 16:50:52 +01:00
David Taylor
a2cab9a342
DEV: Update remaining core plugin components to native-class syntax (#28611)
Changes made using the ember-native-class-codemod, plus some manual tweaks
2024-08-29 12:16:52 +01:00
Sérgio Saquetim
649cbad216
DEV: Use the glimmer header in the Styleguide (#28427) 2024-08-20 19:44:26 -03:00
Jan Cernik
043fc0a117
UX: Small topic map improvements and fixes (#28215) 2024-08-12 15:37:05 -03:00
Krzysztof Kotlarek
300ef67481
UX: move admin flag form to form-kit (#28187)
Rewrite the admin flag form to use FormKit. This is a draft because waiting for Checkbox improvements.
2024-08-05 11:01:25 +10:00
Joffrey JAFFEUX
0fbce0aa85
DEV: adds a way to set a title/description to a radio (#28049)
Usage:

```
<Form as |form|>
  <form.Field @name="foo" @title="Foo" as |field|>
    <field.RadioGroup as |RadioGroup|>
      <RadioGroup.Radio @value="one" as |radio|>
        <radio.Title>One title</radio.Title>
        <radio.Description>One description</radio.Description>
      </RadioGroup.Radio>
    </field.RadioGroup>
  </form.Field>
</Form>
```
2024-07-24 14:25:34 +02:00
Joffrey JAFFEUX
1aa24f83bb
DEV: form-kit improvements (#27966)
- correctly support @title on fields
- correctly support @subtitle on fields
- improves error message when a field name is incorrect in assertions
2024-07-18 10:30:18 +02:00
chapoi
2ca06ba236
DEV: form-kit
This PR introduces FormKit, a component-based form library designed to simplify form creation and management. This library provides a single `Form` component, various field components, controls, validation mechanisms, and customization options. Additionally, it includes helpers to facilitate testing and writing specifications for forms.

1. **Form Component**:
   - The main component that encapsulates form logic and structure.
   - Yields various utilities like `Field`, `Submit`, `Alert`, etc.

   **Example Usage**:
   ```gjs
   import Form from "discourse/form";

   <template>
     <Form as |form|>
       <form.Field
         @name="username"
         @title="Username"
         @validation="required"
         as |field|
       >
         <field.Input />
       </form.Field>

       <form.Field @name="age" @title="Age" as |field|>
         <field.Input @type="number" />
       </form.Field>

       <form.Submit />
     </Form>
   </template>
   ```

2. **Validation**:
   - Built-in validation rules such as `required`, `number`, `length`, and `url`.
   - Custom validation callbacks for more complex validation logic.

   **Example Usage**:
   ```javascript
   validateUsername(name, value, data, { addError }) {
     if (data.bar / 2 === value) {
       addError(name, "That's not how maths work.");
     }
   }
   ```

   ```hbs
   <form.Field @name="username" @validate={{this.validateUsername}} />
   ```

3. **Customization**:
   - Plugin outlets for extending form functionality.
   - Styling capabilities through propagated attributes.
   - Custom controls with properties provided by `form` and `field`.

   **Example Usage**:
   ```hbs
   <Form class="my-form" as |form|>
     <form.Field class="my-field" as |field|>
       <MyCustomControl id={{field.id}} @onChange={{field.set}} />
     </form.Field>
   </Form>
   ```

4. **Helpers for Testing**:
   - Test assertions for form and field validation.

   **Example usage**:
   ```javascript
   assert.form().hasErrors("the form shows errors");
   assert.form().field("foo").hasValue("bar", "user has set the value");
   ```

   - Helper for interacting with he form

   **Example usage**:
   ```javascript
   await formKit().field("foo").fillIn("bar");
   ```

5. **Page Object for System Specs**:
   - Page objects for interacting with forms in system specs.
   - Methods for submitting forms, checking alerts, and interacting with fields.

   **Example Usage**:
   ```ruby
   form = PageObjects::Components::FormKit.new(".my-form")
   form.submit
   expect(form).to have_an_alert("message")
   ```

   **Field Interactions**:
   ```ruby
   field = form.field("foo")
   expect(field).to have_value("bar")
   field.fill_in("bar")
   ```


6. **Collections handling**:
   - A specific component to handle array of objects

   **Example Usage**:
   ```gjs
    <Form @data={{hash foo=(array (hash bar=1) (hash bar=2))}} as |form|>
      <form.Collection @name="foo" as |collection|>
        <collection.Field @name="bar" @title="Bar" as |field|>
          <field.Input />
        </collection.Field>
      </form.Collection>
    </Form>
   ```
2024-07-17 11:59:35 +02:00
Jarek Radosz
87769a83c4
DEV: Implement glimmer topic-list (#26743)
(experimental)

The initial implementation of glimmer topic-list and related components. Does not include new APIs and isn't compatible with existing customization. That's gonna come in future PRs.

Enabled by adding groups to `experimental_glimmer_topic_list_groups` setting.
2024-05-21 14:36:15 +02:00
Jarek Radosz
e579cfc08f
DEV: Avoid using the old action helper (#26935) 2024-05-08 20:26:48 +02:00
David Battersby
dad6912566
DEV: add toast progress bar to styleguide (#26767) 2024-04-26 16:49:58 +08:00
Joffrey JAFFEUX
1060e4573a
DEV: allows fabricators to use faker (#26555)
The complexity of the situation is that we don't want to load faker into production by default but fabricators and styleguide are available on production.

This is made possible through app/assets/javascripts/discourse/app/lib/load-faker.js which contains a function to ensure faker is loaded asynchronously (loadFaker) and another function to access the loaded faker (getLoadedFaker).

Note 1: this commit also refactors fabricators to have access to context and use faker where possible
Note 2: this commit moves automation to admin bundle

---------

Co-authored-by: David Taylor <david@taylorhq.com>
2024-04-08 21:00:09 +02:00
David Taylor
1df97e86c1
DEV: Introduce faker.js for use in tests & styleguide (#26533)
Available as a normal synchronous module in tests
Available as an async import in core, or via the `loadFaker` helper in themes/plugins (which cannot use async import directly)
2024-04-05 16:57:17 +01:00
Jarek Radosz
5d90332cfc
DEV: Use the "new" service import (#26059) 2024-03-06 18:05:11 +01:00
Jarek Radosz
11067c73d0
DEV: Use fn+mut instead of action+mut (#26057)
One step closer to removing all `action` helper usage
2024-03-06 18:05:03 +01:00
Jarek Radosz
36a9b5d0fa
DEV: Introduce a helper for handling events (#25433)
Instead of

```hbs
{{on "input" (action this.foo value="target.value")}}
{{on "input" (action (mut this.bar) value="target.value")}}
```

you can use:

```hbs
{{on "input" (with-event-value this.foo)}}
{{on "input" (with-event-value (fn (mut this.bar)))}}
```

or in gjs:

```gjs
import { fn } from "@ember/helper";
import { on } from "@ember/modifier";
import withEventValue from "discourse/helpers/with-event-value";
…
{{on "input" (withEventValue (fn (mut this.bar)))}}
```
2024-02-28 14:00:53 +01:00
Jarek Radosz
f44bee1333
DEV: Use autocomplete="new-password" (#25913)
And normalize `<PasswordField />` arguments

(we were getting `[DOM] Input elements should have autocomplete attributes (suggested: "current-password")` in smoke test logs, this may or may not fix that 😛)
2024-02-27 13:29:12 +01:00
Penar Musaraj
b6f64a70f0
UX: Add "filter for more" to icon picker (#25263)
Repurposes the existing "filter for more" row from the tag drop component.
2024-01-23 21:53:13 +01:00
Jarek Radosz
41942357ed
DEV: Use class attribute instead of @class arg (#24804) 2023-12-12 13:09:05 +01:00
Jarek Radosz
7cac167928
DEV: Fix "ember/no-empty-glimmer-component-classes" lint (#24629) 2023-11-29 15:14:30 +01:00
Jarek Radosz
916e1371b3
DEV: Fix "ember/no-global-jquery" lint (#24586) 2023-11-28 10:53:38 +01:00
Jordan Vidrine
fef14c004c
UX: Add category & section for syntax & BEM (#24516) 2023-11-22 17:44:04 -06:00
chapoi
c766125fe8
UX: add BEM documentation to styleguide (#24512)
* UX: add BEM documentation to styleguide

* grammar fix

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

* typo fix

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

* add another hierarchy layer

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-11-22 16:04:19 +01:00
Jordan Vidrine
9d1e8265da
FEATURE: Add ability to hide modal header (#24290) 2023-11-08 12:15:35 -06:00
David Taylor
c3c557c2df
FIX: Correct import path in styleguide (#24092)
Followup to 605ec0ad9f
2023-10-25 12:13:38 +01:00
David Taylor
605ec0ad9f
DEV: Update styleguide to use real i18n helper implementation (#24080) 2023-10-25 10:15:19 +01:00
Godfrey Chan
c34f8b65cb
DEV: Rename I18n imports to discourse-i18n (#23915)
As of #23867 this is now a real package, so updating the imports to
use the real package name, rather than relying on the alias. The
name change in the package name is because `I18n` is not a valid
name as NPM packages must be all lowercase.

This commit also introduces an eslint rule to prevent importing from
the old I18n path.

For themes/plugins, the old 'i18n' name remains functional.
2023-10-18 11:07:09 +01: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
Andrei Prigorshnev
fcc9d99ba2
DEV: Start renaming cookAsync() function to cook() (#23462)
Some time ago, we introduced the `cookAsync` instead of the existing 
`cook` function, and planned to migrate everything to it. Then after 
migrating, we wanted to raname the function to simply `cook`.

I've checked Core and plugins, and currently we call `cookAsync` everywhere, 
there are no calls to the `cook` function anymore. So we're good 
to proceed with this refactoring.

This PR makes the first step by making current cookAsync and cook functions 
do the same thing. Effectively now the `cook` function becomes an alias 
for the `cookAsync` function.
2023-10-09 20:22:46 +04: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
Jarek Radosz
c75b379d6f
DEV: Future-proof htmlSafe interactions (#23596)
See https://github.com/discourse/discourse-encrypt/pull/282

> `cooked` was an Ember SafeString. The internal storage of the string changed from `.string` to `.__string` at some point between Ember 3.28 and Ember 5. Instead, we can use `toString()` which is guaranteed to work in all situations
2023-09-14 23:04:57 +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
Jarek Radosz
87d0336f05
DEV: Introduce {{body-class}}, soft-deprecate <DSection /> (#23479)
`<DSection />` is now deprecated. Please use `{{body-class "foo-page" "bar"}}` and/or `<section></section>` instead.
2023-09-11 13:44:52 +02:00
Jarek Radosz
1c87bb7fe9
DEV: Update DButton uses (#23333)
1. Use `this.` instead of `{{action}}` where applicable
2. Use `{{fn}}` instead of `@actionParam` where applicable
3. Use non-`@` versions of class/type/tabindex/aria-controls/aria-expanded
4. Remove `btn` class (it's added automatically to all DButtons)
5. Remove `type="button"` (it's the default)
6. Use `concat-class` helper
2023-08-31 11:49:35 +02:00
Martin Brennan
fb36af7799
DEV: Move calendar date + time picker from local dates into core component (#23023)
This commit moves the calendar date and time picker shown in
the local dates modal into a core component that can be reused
in other places. Also add system specs to make sure there isn't
any breakages with this feature, and a section to the styleguide.
2023-08-11 13:05:44 +10:00
David Taylor
45ae9d9bab
UX: Introduce toggle-switch UI for plugins (#22910)
This commit makes some visual tweaks to the admin panel plugin list, and introduces functional 'toggle switches' for admins to enable/disable plugins more easily.

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
2023-08-03 15:19:33 +01:00
Jarek Radosz
c5c786b4ac
DEV: Fix array-related linting issues in templates (#22935)
and remove more linting exemptions
2023-08-02 19:43:37 +02:00
Martin Brennan
6286e790b2
DEV: Remove unread_private_messages and deprecation (#22893)
This was added all the way back in 2020 in b79ea986ac,
enough time has passed, we can delete this now.
2023-08-01 14:44:39 +10:00
Penar Musaraj
f2048eeb4c
UX: Minor change to compact tag chooser (#22796)
Followup to f5e8e73.

This switches the placeholder label to the existing string "optional
tags" and only shows it if there are no items picked.

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-07-26 11:43:46 -04:00