mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(link): support "sm", "lg" size variants

Browse source
This commit is contained in:
Eric Liu 2020-10-29 13:10:42 -07:00
commit 6dd363c2a9
5 changed files with 54 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -2243,6 +2243,7 @@ import { Link } from "carbon-components-svelte";
| Prop name | Type | Default value | Description | | Prop name | Type | Default value | Description |
| :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ | | :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ |
| size | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link. |
| href | <code>string</code> | -- | Specify the href value. | | href | <code>string</code> | -- | Specify the href value. |
| inline | <code>boolean</code> | `false` | Set to `true` to use the inline variant. | | inline | <code>boolean</code> | `false` | Set to `true` to use the inline variant. |
| disabled | <code>boolean</code> | `false` | Set to `true` to disable the checkbox. | | disabled | <code>boolean</code> | `false` | Set to `true` to disable the checkbox. |

56
docs/src/PUBLIC_API.json
View file

@ -6602,6 +6602,14 @@
"Link": { "Link": {
"moduleName": "Link", "moduleName": "Link",
"props": [ "props": [
[
"size",
{
"kind": "let",
"type": "\"sm\" | \"lg\"",
"description": "Specify the size of the link"
}
],
[ [
"href", "href",
{ {
@ -6662,8 +6670,8 @@
[ [
"click", "click",
{ {
"start": 1308, "start": 1500,
"end": 1316, "end": 1508,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -6673,8 +6681,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 1321, "start": 1513,
"end": 1333, "end": 1525,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -6684,8 +6692,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 1338, "start": 1530,
"end": 1351, "end": 1543,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -6695,8 +6703,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 1356, "start": 1548,
"end": 1369, "end": 1561,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],
@ -14729,8 +14737,8 @@
[ [
"click", "click",
{ {
"start": 1965, "start": 1964,
"end": 1973, "end": 1972,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -14740,8 +14748,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 1976, "start": 1975,
"end": 1988, "end": 1987,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -14751,8 +14759,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 1991, "start": 1990,
"end": 2004, "end": 2003,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -14762,8 +14770,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 2007, "start": 2006,
"end": 2020, "end": 2019,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],
@ -14773,8 +14781,8 @@
[ [
"change", "change",
{ {
"start": 3036, "start": 3037,
"end": 3045, "end": 3046,
"type": "EventHandler", "type": "EventHandler",
"name": "change", "name": "change",
"modifiers": [], "modifiers": [],
@ -14784,8 +14792,8 @@
[ [
"input", "input",
{ {
"start": 3054, "start": 3055,
"end": 3062, "end": 3063,
"type": "EventHandler", "type": "EventHandler",
"name": "input", "name": "input",
"modifiers": [], "modifiers": [],
@ -14795,8 +14803,8 @@
[ [
"focus", "focus",
{ {
"start": 3152, "start": 3153,
"end": 3160, "end": 3161,
"type": "EventHandler", "type": "EventHandler",
"name": "focus", "name": "focus",
"modifiers": [], "modifiers": [],
@ -14806,8 +14814,8 @@
[ [
"blur", "blur",
{ {
"start": 3169, "start": 3170,
"end": 3176, "end": 3177,
"type": "EventHandler", "type": "EventHandler",
"name": "blur", "name": "blur",
"modifiers": [], "modifiers": [],

8
docs/src/pages/components/Link.svx
View file

@ -24,6 +24,14 @@ You can override the `rel` attribute with a custom value.
<Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>. <Link inline href="https://www.carbondesignsystem.com/">Carbon Design System</Link>.
</div> </div>
### Large size
<Link size="lg" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
### Small size
<Link size="sm" href="https://www.carbondesignsystem.com/">Carbon Design System</Link>
### Disabled ### Disabled
<Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link> <Link disabled href="https://www.carbondesignsystem.com/">Carbon Design System</Link>

8
src/Link/Link.svelte
View file

@ -1,4 +1,10 @@
<script> <script>
/**
* Specify the size of the link
* @type {"sm" | "lg"} [size]
*/
export let size = undefined;
/** /**
* Specify the href value * Specify the href value
* @type {string} [href] * @type {string} [href]
@ -53,6 +59,8 @@
class:bx--link--disabled="{disabled}" class:bx--link--disabled="{disabled}"
class:bx--link--inline="{inline}" class:bx--link--inline="{inline}"
class:bx--link--visited="{visited}" class:bx--link--visited="{visited}"
class:bx--link--sm="{size === 'sm'}"
class:bx--link--lg="{size === 'lg'}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}" rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
href="{href}" href="{href}"
{...$$restProps} {...$$restProps}

5
types/index.d.ts vendored
View file

@ -2014,6 +2014,11 @@ export class InlineNotification extends CarbonSvelteComponent {
export class Link extends CarbonSvelteComponent { export class Link extends CarbonSvelteComponent {
$$prop_def: { $$prop_def: {
/**
* Specify the size of the link
*/
size?: "sm" | "lg";
/** /**
* Specify the href value * Specify the href value
*/ */