diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md index 0d9d1e7331..d219694e11 100644 --- a/etc/lime-elements.api.md +++ b/etc/lime-elements.api.md @@ -443,6 +443,7 @@ export namespace Components { "transformErrors"?: (errors: FormError[]) => FormError[]; "value": object; } + // @deprecated export interface LimelGrid { } export interface LimelHeader { @@ -1549,6 +1550,7 @@ export namespace JSX { "transformErrors"?: (errors: FormError[]) => FormError[]; "value"?: object; } + // @deprecated export interface LimelGrid { } export interface LimelHeader { diff --git a/src/components/grid/examples/grid.scss b/src/components/grid/examples/grid.scss deleted file mode 100644 index 046e5bb7ae..0000000000 --- a/src/components/grid/examples/grid.scss +++ /dev/null @@ -1,94 +0,0 @@ -my-deep-red-component { - grid-area: drd; -} -my-red-component { - grid-area: red; -} -my-orange-component { - grid-area: ora; -} -my-yellow-component { - grid-area: yel; -} -my-green-component { - grid-area: grn; -} -my-turquoise-component { - grid-area: trq; -} -my-blue-component { - grid-area: blu; -} -my-dark-blue-component { - grid-area: dbl; -} -my-magenta-component { - grid-area: mag; -} -my-light-grey-component { - grid-area: lgr; -} -my-dark-grey-component { - grid-area: dgr; -} - -/* prettier-ignore */ -limel-grid { - --lime-grid-columns: 4; - - --lime-grid-area: - "drd drd blu dbl" - "drd drd blu dbl" - "trq trq blu dbl" - "trq trq blu dbl" - "red red red red" - "red red red red" - "red red red red" - "dgr mag mag lgr" - "dgr mag mag lgr" - "dgr mag mag lgr" - "ora mag mag yel" - "ora mag mag yel" - "grn grn . . " - "grn grn . . " - "grn grn . . " - "grn grn . . "; -} - -// Below is stuff that's only here for the boxes in the grid -// to look nice in this example. You wouldn't use any of this -// when placing real components into a grid. - -my-deep-red-component { - background-color: rgb(var(--color-red-darker)); -} -my-red-component { - background-color: rgb(var(--color-red-default)); -} -my-orange-component { - background-color: rgb(var(--color-orange-default)); -} -my-yellow-component { - background-color: rgb(var(--color-yellow-default)); -} -my-green-component { - background-color: rgb(var(--color-green-default)); -} -my-turquoise-component { - background-color: rgb(var(--color-teal-default)); -} -my-blue-component { - background-color: rgb(var(--color-sky-default)); -} -my-dark-blue-component { - background-color: rgb(var(--color-blue-darker)); -} -my-magenta-component { - background-color: rgb(var(--color-magenta-default)); -} -my-light-grey-component { - background-color: rgb(var(--color-glaucous-light)); -} -my-dark-grey-component { - background-color: rgb(var(--color-glaucous-darker)); -} diff --git a/src/components/grid/examples/grid.tsx b/src/components/grid/examples/grid.tsx deleted file mode 100644 index 18cfe8df7a..0000000000 --- a/src/components/grid/examples/grid.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { Component, h } from '@stencil/core'; - -/** - * We use the `grid-area` property to give each component a unique name, and - * then use this name to "draw" our grid layout. - * - * You can name each component anything you want, like `salespipe`, or - * `infotile-active-support-tickets`, but keeping the names to a fixed number of - * characters makes the "drawing" of the grid look more like the actual grid. - * One to three characters is probably a good number for most cases. - * - * Any "name" that doesn't match a named element will create empty cells. In our - * case, we use a dot (`.`) to mark empty cells. Empty cells can be put anywhere - * in the grid, not just at the end. - * - * Note that we can add some extra spaces after the dot marking an empty cell, - * in order to align the next cell in our config-string. This can also be used - * if your elements have named of differing lengths. The extra whitespace is - * ignored when the CSS is parsed. - * - * If the name of an element does not appear in the grid-configuration, it will - * not be displayed at all. This might be useful if you wish to show a specific - * component only under certain circumstances, like if the viewport is large - * enough to accomodate it. - */ -@Component({ - tag: 'limel-example-grid', - shadow: true, - styleUrl: 'grid.scss', -}) -export class GridExample { - public render() { - return ( - - - - - - - - - - - - - - ); - } -} diff --git a/src/components/grid/grid.tsx b/src/components/grid/grid.tsx index cfdcdb61de..390e65fe52 100644 --- a/src/components/grid/grid.tsx +++ b/src/components/grid/grid.tsx @@ -1,11 +1,11 @@ import { Component, h } from '@stencil/core'; /** - * The `limel-grid` component creates a grid which can be used to control the - * layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) - * to enable easy configuration of its child-elements. + * This component is deprecated and will be removed in a future version of + * Lime Elements. Please use CSS for your flexible container needs 🙂 * - * @exampleComponent limel-example-grid + * @deprecated Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout + * @private * @slot - Grid content */ @Component({ @@ -14,6 +14,12 @@ import { Component, h } from '@stencil/core'; styleUrl: 'grid.scss', }) export class Grid { + public componentWillLoad() { + console.warn( + 'limel-grid is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout' + ); + } + public render() { return ; }