Skip to content

Commit

Permalink
fix(pie-toast): DSW-000 truncate text with css (#2093)
Browse files Browse the repository at this point in the history
  • Loading branch information
@raoufswe
raoufswe authored Nov 22, 2024
1 parent 9f666e6 commit fed802c
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 199 deletions.
5 changes: 5 additions & 0 deletions .changeset/chilled-rules-teach.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@justeattakeaway/pie-toast": patch
---

[Updated] - truncate text using css
63 changes: 4 additions & 59 deletions packages/components/pie-notification/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,6 @@
</a>
</p>

# Table of Contents

1. [Introduction](#pie-notification)
2. [Installation](#installation)
3. [Importing the component](#importing-the-component)
4. [Peer Dependencies](#peer-dependencies)
5. [Props](#props)
6. [Contributing](#contributing)

## pie-notification

`pie-notification` is a Web Component built using the Lit library.
Expand All @@ -34,59 +25,13 @@ npm i @justeattakeaway/pie-notification
yarn add @justeattakeaway/pie-notification
```

For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).


### Importing the component

#### JavaScript
```js
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
import { PieNotification } from '@justeattakeaway/pie-notification';

// If you don't need to reference the imported object, you can simply
// import the module which registers the component as a custom element.
import '@justeattakeaway/pie-notification';
```

#### React
```js
// React
// For React, you will need to import our React-specific component build
// which wraps the web component using ​@lit/react
import { PieNotification } from '@justeattakeaway/pie-notification/dist/react';
```

> [!NOTE]
> When using the React version of the component, please make sure to also
> include React as a [peer dependency](#peer-dependencies) in your project.

## Peer Dependencies
## Documentation

> [!IMPORTANT]
> When using `pie-notification`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
Visit [Notification | PIE Design System](https://pie.design/components/notification) to view more information on this component.

## Props
## Questions

| Property | Type | Default | Description |
|---|---|---|---|
| isOpen | `Boolean` | true | When true, the notification is set to be open and visible |
| variant | `String`| neutral | Set the variant of the notification. Available variants: `neutral`, `neutral-alternative`, `info`, `success`, `warning`, `error` |
| compact | `Boolean` | false | When true, the footer aligns to the header and icons which makes the component compact. |
| heading | `String` | - | The text to display in the notification\'s heading. |
| headingLevel | `String` | h2 | The HTML heading tag to use for the notification\'s heading. Can from h2 to h6. The font size is kept the same for all heading levels. Available heading levels: `h2`,`h3`,`h4`,`h5`,`h6` |
| hideIcon | `Boolean` | false | Option to hide the icon regardless its variant or if user provided an icon. |

In your markup or JSX, you can then use these to set the properties for the `pie-notification` component:

```html
<!-- Native HTML -->
<pie-notification></pie-notification>

<!-- JSX -->
<PieNotification></PieNotification>
```
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.

## Contributing

Expand Down
67 changes: 7 additions & 60 deletions packages/components/pie-toast/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,6 @@
</a>
</p>

# Table of Contents

1. [Introduction](#pie-toast)
2. [Installation](#installation)
3. [Importing the component](#importing-the-component)
4. [Peer Dependencies](#peer-dependencies)
5. [Props](#props)
6. [Contributing](#contributing)

## pie-toast

`pie-toast` is a Web Component built using the Lit library.
Expand All @@ -29,63 +20,19 @@ This component can be easily integrated into various frontend frameworks and cus
To install `pie-toast` in your application, run the following on your command line:

```bash
# npm
$ npm i @justeattakeaway/pie-toast
npm i @justeattakeaway/pie-toast

# yarn
$ yarn add @justeattakeaway/pie-toast
yarn add @justeattakeaway/pie-toast
```

For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).


### Importing the component

#### JavaScript
```js
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
import { PieToast } from '@justeattakeaway/pie-toast';

// If you don't need to reference the imported object, you can simply
// import the module which registers the component as a custom element.
import '@justeattakeaway/pie-toast';
```

#### React
```js
// React
// For React, you will need to import our React-specific component build
// which wraps the web component using ​@lit/react
import { PieToast } from '@justeattakeaway/pie-toast/dist/react';
```
## Documentation

> [!NOTE]
> When using the React version of the component, please make sure to also
> include React as a [peer dependency](#peer-dependencies) in your project.
Visit [Toast | PIE Design System](https://pie.design/components/toast) to view more information on this component.

## Questions

## Peer Dependencies

> [!IMPORTANT]
> When using `pie-toast`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.

## Props

| Property | Type | Default | Description |
|---|---|---|---|
| - | - | - | - |

In your markup or JSX, you can then use these to set the properties for the `pie-toast` component:

```html
<!-- Native HTML -->
<pie-toast></pie-toast>

<!-- JSX -->
<PieToast></PieToast>
```
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.

## Contributing

Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
81 changes: 3 additions & 78 deletions packages/components/pie-toast/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
@query('pie-icon-button')
private closeButton?: HTMLElement;

private _actionButtonOffset = 0;

private _messageAreaMaxWidth = 0;

private _timeoutId: NodeJS.Timeout | null = null;

private _abortController: AbortController | null = null;
Expand Down Expand Up @@ -115,44 +111,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
}
}

/**
* Calculates and returns the width of the message based on the toast properties.
*
* @param {boolean} hasIcon - Indicates if the toast has an icon.
* @param {boolean} isMultiline - Indicates if the message is multiline.
* @param {boolean} hasActionButton - Indicates if the toast has an action button.
* @param {boolean} hasCloseIcon - Indicates if the toast has a close icon.
*
* @returns {number} - The width of the message in pixels.
*/
private getMessageMaxWidth (
hasIcon: boolean,
isMultiline: boolean,
hasActionButton: boolean,
hasCloseIcon: boolean,
): number {
const iconOffset = 20;
const closeIconOffset = 32;
const gap = 8;
const toastMaxWidthWithoutPadding = 392;

let offset = 0;

if (hasIcon) {
offset += iconOffset + gap;
}

if (!isMultiline && hasActionButton) {
offset += this._actionButtonOffset + gap;
}

if (hasCloseIcon) {
offset += closeIconOffset + gap;
}

return toastMaxWidthWithoutPadding - offset;
}

/**
* Adds event listeners to the specified element for handling the auto dismiss behavior.
*
Expand Down Expand Up @@ -204,7 +162,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
* It dispatches an event if toast is opened.
* It adds event listeners when toast is opened and if the duration is not null
* It aborts all event listeners when toast is closed.
* It calculates _messageAreaMaxWidth
*/
protected async updated (_changedProperties: PropertyValues<this>) {
if (_changedProperties.has('isOpen') && this.isOpen) {
Expand All @@ -218,36 +175,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
if (_changedProperties.has('isOpen') && !this.isOpen) {
this.abortAndCleanEventListeners();
}

// This lifecycle method is async on purpose because we
// need to wait for the component to complete its rendering
// so we can calculate _messageAreaMaxWidth based on
// existing components such as icons and action buttons.
await this.updateComplete;

if (this.actionButton) {
this._actionButtonOffset = this.actionButton.offsetWidth;
}

const hasIcon = this.variantHasIcon(this.variant);

this._messageAreaMaxWidth = this.getMessageMaxWidth(hasIcon, this.isMultiline, !!this.leadingAction?.text, this.isDismissible);

// It checks if there are changes on one of the properties
// below and requests a new update in order to repeat the
// lifecycle and perform new calculations.
// This will make sure that all components will re-render
// properly on Storybook.
if (
_changedProperties.has('variant') ||
_changedProperties.has('isStrong') ||
_changedProperties.has('message') ||
_changedProperties.has('isDismissible') ||
_changedProperties.has('isMultiline') ||
_changedProperties.has('leadingAction') ||
_changedProperties.has('duration')) {
this.requestUpdate();
}
}

/**
Expand Down Expand Up @@ -321,13 +248,12 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
* main render function.
*
* @param {string} message - The message to be displayed.
* @param {number} messageAreaMaxWidth - The maximum width of the message area calculated in the lifecycle method.
*
* @private
*/
private renderMessage (message: string, messageAreaMaxWidth: number): TemplateResult {
private renderMessage (message: string): TemplateResult {
return html`
<span style="--toast-message-max-width: ${messageAreaMaxWidth}px" data-test-id="${componentSelector}-message">
<span data-test-id="${componentSelector}-message">
${message}
</span>
`;
Expand Down Expand Up @@ -394,7 +320,6 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
leadingAction,
isMultiline,
isStrong,
_messageAreaMaxWidth,
isRTL,
} = this;

Expand All @@ -416,7 +341,7 @@ export class PieToast extends RtlMixin(LitElement) implements ToastProps {
<div class="${componentClass}-contentArea">
<div class="${componentClass}-messageArea">
${this.variantHasIcon(variant) ? this.getVariantIcon() : nothing}
${message === '' ? nothing : this.renderMessage(message, _messageAreaMaxWidth)}
${message === '' ? nothing : this.renderMessage(message)}
</div>
<div class="${componentClass}-actionsArea">
${!isMultiline && leadingAction?.text ? this.renderActionButton(leadingAction) : nothing}
Expand Down
3 changes: 1 addition & 2 deletions packages/components/pie-toast/src/toast.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
--toast-font-size: #{p.font-size(--dt-font-body-s-size)};
--toast-line-height: #{p.line-height(--dt-font-body-s-line-height)};
--toast-icon-fill: var(--dt-color-content-default);
--toast-message-max-width: 100%;
--toast-offset: var(--dt-spacing-d);
--toast-translate-start: -100%;
--toast-translate-end: 0;
Expand Down Expand Up @@ -107,12 +106,12 @@
align-items: center;
gap: var(--dt-spacing-b);
padding: 6px var(--dt-spacing-a) 6px 0;
overflow: hidden;

span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: var(--toast-message-max-width);
}
}

Expand Down

0 comments on commit fed802c

Please sign in to comment.