-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: counter group dropdown variant #179
- Loading branch information
Showing
8 changed files
with
178 additions
and
48 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,17 @@ | ||
| <div style="width: 300px;"> | ||
| <auro-dropdown common chevron> | ||
| <div slot="trigger">Trigger</div> | ||
| <auro-counter-group style="padding: 1em; width: 400px; max-height: 400px; overflow: scroll;"> | ||
| <auro-counter-group isDropdown> | ||
| <div slot="placeholder">Passengers</div> | ||
| <auro-counter> | ||
| Short label | ||
| <span slot="description">This is an example of a long sub label wrapping behavior</span> | ||
| Short label | ||
| <span slot="description">This is an example of a long sub label wrapping behavior</span> | ||
| </auro-counter> | ||
| <auro-counter> | ||
| This is an example of the wrapping behavior for a long label | ||
| <span slot="description">with short sub label text</span> | ||
| This is an example of the wrapping behavior for a long label | ||
| <span slot="description">with short sub label text</span> | ||
| </auro-counter> | ||
| <auro-counter> | ||
| This is an example of the wrapping behavior for a long label | ||
| <span slot="description">Combined with an example of a long sub label wrapping behavior</span> | ||
| This is an example of the wrapping behavior for a long label | ||
| <span slot="description">Combined with an example of a long sub label wrapping behavior</span> | ||
| </auro-counter> | ||
| </auro-counter-group> | ||
| </auro-dropdown> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license | ||
| // See LICENSE in the project root for license information. | ||
|
|
||
| // --------------------------------------------------------------------- | ||
|
|
||
| import { html } from "lit/static-html.js"; | ||
| import { LitElement } from "lit"; | ||
|
|
||
| import styleCss from "./styles/counter-wrapper-css.js"; | ||
| import colorCss from "./styles/counter-wrapper-color-css.js"; | ||
|
|
||
| import AuroLibraryRuntimeUtils from "@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs"; | ||
|
|
||
| /** | ||
| * Auro Counter Wrapper is a group of counter components. | ||
| * | ||
| * This web component provides a flexible interface for grouping multiple counters, supporting | ||
| * validation, custom validity messages, and disabled states based on the group's value. | ||
| * | ||
| * @element auro-counter-group | ||
| * @extends LitElement | ||
| * @slot Default - Slot for counter elements. | ||
| */ | ||
| export class AuroCounterWrapper extends LitElement { | ||
|
|
||
| static get styles() { | ||
| return [ | ||
| colorCss, | ||
| styleCss | ||
| ]; | ||
| } | ||
|
|
||
| /** | ||
| * Registers the custom element with the browser. | ||
| * @param {string} [name="auro-counter-wrapper"] - Custom element name to register. | ||
| * @example | ||
| * AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/> | ||
| */ | ||
| static register(name = "auro-counter-wrapper") { | ||
| AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroCounterWrapper); | ||
| } | ||
|
|
||
| // function that renders the HTML and CSS into the scope of the component | ||
| render() { | ||
| return html`<slot></slot>`; | ||
| } | ||
| } | ||
|
|
||
| /* istanbul ignore else */ | ||
| // define the name of the custom component | ||
| if (!customElements.get("auro-counter-wrapper")) { | ||
| customElements.define("auro-counter-wrapper", AuroCounterWrapper); | ||
| } | ||
|
|
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license. | ||
| // See LICENSE in the project root for license information. | ||
|
|
||
| // --------------------------------------------------------------------- | ||
|
|
||
| // layout styles - define any layout specifications for UI that is contained WITHIN the component | ||
| // never define layout that would cause effect on element outside the scope of this component | ||
|
|
||
| // Support for fallback values | ||
| @import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; | ||
| @import '@aurodesignsystem/webcorestylesheets/src/breakpoints'; | ||
|
|
||
| /* stylelint-disable no-descending-specificity, selector-max-attribute, selector-nest-combinators */ | ||
|
|
||
| :host { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--ds-size-300, $ds-size-300); | ||
|
|
||
| ::slotted(*:not(:first-child)) { | ||
| padding-top: var(--ds-size-300, $ds-size-300); | ||
| border-top-width: 1px; | ||
| border-top-style: solid; | ||
| } | ||
| } | ||
|
|
||
| :host([isindropdown]) { | ||
| padding: var(--ds-size-300, $ds-size-300); | ||
| } |