Skip to content

Commit

Permalink
fix: add missing types to ld-button, ld-link and ld-label
Browse files Browse the repository at this point in the history 
refactor(ld-link): use correct type for host element
  • Loading branch information
@borisdiakur
borisdiakur committed Jul 25, 2023
1 parent 2a0633f commit e5c2ab0
Show file tree
Hide file tree
Showing 6 changed files with 49 additions and 12 deletions.
12 changes: 12 additions & 0 deletions src/liquid/components/ld-button/ld-button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
/** Disabled state of the button. */
@Prop() disabled?: boolean

/** Causes the browser to treat the linked URL as a download. */
@Prop() download?: boolean | string

/** Associates the control with a form element. */
@Prop() form?: string

Expand All @@ -85,6 +88,9 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
*/
@Prop() href?: string

/** Hints at the human language of the linked URL. */
@Prop() hreflang?: string

/** Justify content. */
@Prop({ mutable: true }) justifyContent?: 'start' | 'end' | 'between'

Expand All @@ -97,9 +103,15 @@ export class LdButton implements InnerFocusable, ClonesAttributes {
/** Used to specify the name of the control. */
@Prop() name?: string

/** A space-separated list of URLs to ping on link follow. */
@Prop() ping?: string

/** Displays a progress bar at the bottom of the button. */
@Prop() progress?: 'pending' | number

/** A space-separated list of URLs to ping on link follow. */
@Prop() referrerpolicy?: string

/** Size of the button. */
@Prop() size?: 'sm' | 'lg'

Expand Down
4 changes: 4 additions & 0 deletions src/liquid/components/ld-button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -634,20 +634,24 @@ You can align the text inside the button using the `align-text` propperty.
| `autofocus` | `autofocus` | Automatically focus the form control when the page is loaded. | `boolean` | `undefined` |
| `brandColor` | `brand-color` | Style the button so that it looks good on the current theme's primary color. | `boolean` | `undefined` |
| `disabled` | `disabled` | Disabled state of the button. | `boolean` | `undefined` |
| `download` | `download` | Causes the browser to treat the linked URL as a download. | `boolean \| string` | `undefined` |
| `form` | `form` | Associates the control with a form element. | `string` | `undefined` |
| `formaction` | `formaction` | Overrides the `action` attribute of the button's form owner. | `string` | `undefined` |
| `formenctype` | `formenctype` | Overrides the `enctype` attribute of the button's form owner. | `string` | `undefined` |
| `formmethod` | `formmethod` | Overrides the `method` attribute of the button's form owner. | `string` | `undefined` |
| `formnovalidate` | `formnovalidate` | Overrides the `novalidate` attribute of the button's form owner. | `boolean` | `undefined` |
| `formtarget` | `formtarget` | Overrides the `target` attribute of the button's form owner. | `string` | `undefined` |
| `href` | `href` | Transforms the button to an anchor element. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href) for more information on the `href` attribute. | `string` | `undefined` |
| `hreflang` | `hreflang` | Hints at the human language of the linked URL. | `string` | `undefined` |
| `justifyContent` | `justify-content` | Justify content. | `"between" \| "end" \| "start"` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `ldTabindex` | `ld-tabindex` | Tab index of the button. | `number` | `undefined` |
| `mode` | `mode` | Display mode. | `"danger" \| "danger-ghost" \| "danger-secondary" \| "ghost" \| "highlight" \| "neutral" \| "neutral-ghost" \| "neutral-secondary" \| "secondary"` | `undefined` |
| `name` | `name` | Used to specify the name of the control. | `string` | `undefined` |
| `ping` | `ping` | A space-separated list of URLs to ping on link follow. | `string` | `undefined` |
| `progress` | `progress` | Displays a progress bar at the bottom of the button. | `"pending" \| number` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `referrerpolicy` | `referrerpolicy` | A space-separated list of URLs to ping on link follow. | `string` | `undefined` |
| `size` | `size` | Size of the button. | `"lg" \| "sm"` | `undefined` |
| `target` | `target` | The `target` attributed can be used in conjunction with the `href` attribute. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) for more information on the `target` attribute. | `"_blank" \| "_parent" \| "_self" \| "_top"` | `undefined` |
| `type` | `type` | Specifies the default behavior of the button. | `"button" \| "reset" \| "submit"` | `'submit'` |
Expand Down
3 changes: 3 additions & 0 deletions src/liquid/components/ld-label/ld-label.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ export class LdLabel implements ClonesAttributes {

private attributesObserver: MutationObserver

/** Align input message with input position. */
@Prop() for?: string

/** Align input message with input position. */
@Prop() alignMessage?: boolean

Expand Down
1 change: 1 addition & 0 deletions src/liquid/components/ld-label/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,6 +486,7 @@ HTML content describing the labeled element should be wrapped in a single HTML e
| Property | Attribute | Description | Type | Default |
| -------------- | --------------- | -------------------------------------------------------- | ------------------- | ----------- |
| `alignMessage` | `align-message` | Align input message with input position. | `boolean` | `undefined` |
| `for` | `for` | Align input message with input position. | `string` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `position` | `position` | Relative position to labeled element. Default is top. | `"left" \| "right"` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
Expand Down
19 changes: 16 additions & 3 deletions src/liquid/components/ld-link/ld-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,16 @@ import { isAriaDisabled } from '../../utils/ariaDisabled'

/**
* @part anchor - the link anchor
* @virtualProp href - the URL that the hyperlink points to
* @virtualProp ref - reference to component
* @virtualProp {string | number} key - for tracking the node's identity when working with lists
*/

@Component({
tag: 'ld-link',
styleUrl: 'ld-link.css',
shadow: true,
})
export class LdLink implements ClonesAttributes, InnerFocusable {
@Element() el: HTMLElement
@Element() el: HTMLLdLinkElement
private anchor: HTMLAnchorElement
private attributesObserver: MutationObserver

Expand All @@ -29,9 +27,24 @@ export class LdLink implements ClonesAttributes, InnerFocusable {
*/
@Prop() disabled?: boolean

/** Causes the browser to treat the linked URL as a download. */
@Prop() download?: boolean | string

/** The URL that the hyperlink points to. */
@Prop() href?: string

/** Hints at the human language of the linked URL. */
@Prop() hreflang?: string

/** Tab index of the input. */
@Prop() ldTabindex?: number

/** A space-separated list of URLs to ping on link follow. */
@Prop() ping?: string

/** A space-separated list of URLs to ping on link follow. */
@Prop() referrerpolicy?: string

/**
* The `target` attributed can be used in conjunction with the `href` attribute.
* See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
Expand Down
Loading

0 comments on commit e5c2ab0

Please sign in to comment.