Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(pie-toast): DSW-000 truncate text with css #2093

Merged
merged 1 commit into from
Nov 22, 2024
Merged

fix(pie-toast): DSW-000 truncate text with css #2093

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
5 changes: 5 additions & 0 deletions .changeset/chilled-rules-teach.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading