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

remove: remove icon props icon-style and fixed-width #761

Open
wants to merge 1 commit into
base: feat/add-gcds-icon-font
Choose a base branch
from
Open

remove: remove icon props icon-style and fixed-width #761

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
4 changes: 2 additions & 2 deletions packages/angular/src/lib/stencil-generated/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -637,14 +637,14 @@ export declare interface GcdsHint extends Components.GcdsHint {}


@ProxyCmp({
inputs: ['fixedWidth', 'iconStyle', 'label', 'marginLeft', 'marginRight', 'name', 'size']
inputs: ['label', 'marginLeft', 'marginRight', 'name', 'size']
})
@Component({
selector: 'gcds-icon',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['fixedWidth', 'iconStyle', 'label', 'marginLeft', 'marginRight', 'name', 'size'],
inputs: ['label', 'marginLeft', 'marginRight', 'name', 'size'],
standalone: false,
})
export class GcdsIcon {
Expand Down
2 changes: 0 additions & 2 deletions packages/vue/lib/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,12 +238,10 @@ export const GcdsHint = /*@__PURE__*/ defineContainer<JSX.GcdsHint>('gcds-hint',


export const GcdsIcon = /*@__PURE__*/ defineContainer<JSX.GcdsIcon>('gcds-icon', undefined, [
'iconStyle',
'label',
'marginLeft',
'marginRight',
'name',
'fixedWidth',
'size'
]);

Expand Down
16 changes: 0 additions & 16 deletions packages/web/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,14 +567,6 @@ export namespace Components {
"hintId": string;
}
interface GcdsIcon {
/**
* If the icon should render as a fixed-width square, or their natural width.
*/
"fixedWidth": boolean;
/**
* Style of the icon. 'regular' icons are outlined. Some icons have 'solid' variation.
*/
"iconStyle"?: 'regular' | 'solid';
/**
* Add icon description.
*/
Expand Down Expand Up @@ -2403,14 +2395,6 @@ declare namespace LocalJSX {
"hintId"?: string;
}
interface GcdsIcon {
/**
* If the icon should render as a fixed-width square, or their natural width.
*/
"fixedWidth"?: boolean;
/**
* Style of the icon. 'regular' icons are outlined. Some icons have 'solid' variation.
*/
"iconStyle"?: 'regular' | 'solid';
/**
* Add icon description.
*/
Expand Down
43 changes: 1 addition & 42 deletions packages/web/src/components/gcds-icon/gcds-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@layer reset, default, names, fixedWidth, margin, size;
@layer reset, default, names, margin, size;

@layer reset {
:host {
Expand Down Expand Up @@ -86,47 +86,6 @@
}
}

// TODO: Will be removed in separate pull request
@layer fixedWidth {
:host .gcds-icon {
&.fixed-width {
text-align: center;
}

&.size-text-small.fixed-width {
width: calc(var(--gcds-icon-fixed-width-text-small) * 1em);
}

&.size-text.fixed-width {
width: calc(var(--gcds-icon-fixed-width-text) * 1em);
}

&.size-h6.fixed-width {
width: calc(var(--gcds-icon-fixed-width-h6) * 1em);
}

&.size-h5.fixed-width {
width: calc(var(--gcds-icon-fixed-width-h5) * 1em);
}

&.size-h4.fixed-width {
width: calc(var(--gcds-icon-fixed-width-h4) * 1em);
}

&.size-h3.fixed-width {
width: calc(var(--gcds-icon-fixed-width-h3) * 1em);
}

&.size-h2.fixed-width {
width: calc(var(--gcds-icon-fixed-width-h2) * 1em);
}

&.size-h1.fixed-width {
width: calc(var(--gcds-icon-fixed-width-h1) * 1em);
}
}
}

@layer margin {
:host .gcds-icon {
/* Margin left */
Expand Down
25 changes: 2 additions & 23 deletions packages/web/src/components/gcds-icon/gcds-icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,6 @@ export class GcdsIcon {
* Props
*/

// TODO: Will be removed in separate pull request
/**
* Style of the icon. 'regular' icons are outlined. Some icons have 'solid' variation.
*/
@Prop() iconStyle?: 'regular' | 'solid' = 'solid';

/**
* Add icon description.
*/
Expand Down Expand Up @@ -78,12 +72,6 @@ export class GcdsIcon {
}
}

// TODO: Will be removed in separate pull request
/**
* If the icon should render as a fixed-width square, or their natural width.
*/
@Prop() fixedWidth: boolean = false;

/**
* Defines the size of the icon.
*/
Expand Down Expand Up @@ -124,25 +112,16 @@ export class GcdsIcon {
}

render() {
const {
iconStyle,
label,
marginLeft,
marginRight,
name,
fixedWidth,
size,
} = this;
const { label, marginLeft, marginRight, name, size } = this;

return (
<Host>
<span
class={`
gcds-icon gcds-icon-${name} fa-${iconStyle}
gcds-icon gcds-icon-${name}
${marginLeft ? `ml-${marginLeft}` : ''}
${marginRight ? `mr-${marginRight}` : ''}
${size ? `size-${size}` : ''}
${fixedWidth ? `fixed-width` : ''}
`}
role="img"
aria-label={label ? label : false}
Expand Down
16 changes: 7 additions & 9 deletions packages/web/src/components/gcds-icon/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,13 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------- | -------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `fixedWidth` | `fixed-width` | If the icon should render as a fixed-width square, or their natural width. | `boolean` | `false` |
| `iconStyle` | `icon-style` | Style of the icon. 'regular' icons are outlined. Some icons have 'solid' variation. | `"regular" \| "solid"` | `'solid'` |
| `label` | `label` | Add icon description. | `string` | `undefined` |
| `marginLeft` | `margin-left` | Add margin to the left of the icon | `"0" \| "25" \| "50" \| "75" \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800" \| "850" \| "900" \| "950" \| "1000" \| "1050" \| "1100" \| "1150" \| "1200" \| "1250"` | `undefined` |
| `marginRight` | `margin-right` | Add margin to the right of the icon | `"0" \| "25" \| "50" \| "75" \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800" \| "850" \| "900" \| "950" \| "1000" \| "1050" \| "1100" \| "1150" \| "1200" \| "1250"` | `undefined` |
| `name` _(required)_ | `name` | Name of the icon. | `"checkmark-circle" \| "chevron-down" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "close" \| "download" \| "email" \| "exclamation-circle" \| "external" \| "info-circle" \| "phone" \| "search" \| "warning-triangle"` | `undefined` |
| `size` | `size` | Defines the size of the icon. | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "inherit" \| "text" \| "text-small"` | `'inherit'` |
| Property | Attribute | Description | Type | Default |
| ------------------- | -------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `label` | `label` | Add icon description. | `string` | `undefined` |
| `marginLeft` | `margin-left` | Add margin to the left of the icon | `"0" \| "25" \| "50" \| "75" \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800" \| "850" \| "900" \| "950" \| "1000" \| "1050" \| "1100" \| "1150" \| "1200" \| "1250"` | `undefined` |
| `marginRight` | `margin-right` | Add margin to the right of the icon | `"0" \| "25" \| "50" \| "75" \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "300" \| "350" \| "400" \| "450" \| "500" \| "550" \| "600" \| "650" \| "700" \| "750" \| "800" \| "850" \| "900" \| "950" \| "1000" \| "1050" \| "1100" \| "1150" \| "1200" \| "1250"` | `undefined` |
| `name` _(required)_ | `name` | Name of the icon. | `"checkmark-circle" \| "chevron-down" \| "chevron-left" \| "chevron-right" \| "chevron-up" \| "close" \| "download" \| "email" \| "exclamation-circle" \| "external" \| "info-circle" \| "phone" \| "search" \| "warning-triangle"` | `undefined` |
| `size` | `size` | Defines the size of the icon. | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "inherit" \| "text" \| "text-small"` | `'inherit'` |


## Dependencies
Expand Down
78 changes: 6 additions & 72 deletions packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,6 @@ export default {

argTypes: {
// Props
// TODO: Will be removed in separate pull request
iconStyle: {
name: 'icon-style',
control: { type: 'select' },
options: ['regular', 'solid'],
table: {
type: { summary: 'string' },
defaultValue: { summary: 'solid' },
},
},
label: {
control: 'text',
table: {
Expand Down Expand Up @@ -128,16 +118,6 @@ export default {
required: true,
},
},
// TODO: Will be removed in separate pull request
fixedWidth: {
name: 'fixed-width',
control: { type: 'select' },
options: [false, true],
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
},
},
size: {
control: { type: 'select' },
options: [
Expand All @@ -163,22 +143,18 @@ const Template = args =>
`
<!-- Web component code (HTML, Angular, Vue) -->
<gcds-icon ${args.label ? `label="${args.label}"` : null} name="${args.name}" ${
args.iconStyle != 'solid' ? `icon-style="${args.iconStyle}"` : null
} ${args.marginLeft ? `margin-left="${args.marginLeft}"` : null} ${
args.marginLeft ? `margin-left="${args.marginLeft}"` : null
} ${
args.marginRight ? `margin-right="${args.marginRight}"` : null
} ${args.size != 'text' ? `size="${args.size}"` : null} ${
args.fixedWidth ? `fixed-width="${args.fixedWidth}"` : null
}>
} ${args.size != 'text' ? `size="${args.size}"` : null}>
</gcds-icon>

<!-- React code -->
<GcdsIcon ${args.label ? `label="${args.label}"` : null} name="${args.name}" ${
args.iconStyle != 'solid' ? `iconStyle="${args.iconStyle}"` : null
} ${args.marginLeft ? `marginLeft="${args.marginLeft}"` : null} ${
args.marginLeft ? `marginLeft="${args.marginLeft}"` : null
} ${
args.marginRight ? `marginRight="${args.marginRight}"` : null
} ${args.size != 'text' ? `size="${args.size}"` : null} ${
args.fixedWidth ? `fixedWidth="${args.fixedWidth}"` : null
}>
} ${args.size != 'text' ? `size="${args.size}"` : null}>
</GcdsIcon>
`.replace(/ null/g, '');

Expand Down Expand Up @@ -564,39 +540,13 @@ const TemplateMultiple = args =>
}></GcdsIcon>
`.replace(/ null/g, '');

// TODO: Will be removed in separate pull request
const TemplateTwo = args =>
`
<!-- Web component code (Angular, Vue) -->
<gcds-icon name="${args.name}" ${
args.size != 'text' ? `size="${args.size}"` : null
} ${
args.fixedWidth1 ? `fixed-width="${args.fixedWidth1}"` : null
}></gcds-icon>
<gcds-icon name="${args.name}" ${
args.size != 'text' ? `size="${args.size}"` : null
} ${
args.fixedWidth2 ? `fixed-width="${args.fixedWidth2}"` : null
}></gcds-icon>

<!-- React code -->
<GcdsIcon name="${args.name}" ${
args.size != 'text' ? `size="${args.size}"` : null
} ${args.fixedWidth1 ? `fixedWidth="${args.fixedWidth1}"` : null}></GcdsIcon>
<GcdsIcon name="${args.name}" ${
args.size != 'text' ? `size="${args.size}"` : null
} ${args.fixedWidth2 ? `fixedWidth="${args.fixedWidth2}"` : null}></GcdsIcon>
`.replace(/ null/g, '');

const TemplatePlayground = args => `
<gcds-icon
${args.label ? `label="${args.label}"` : null}
name="${args.name}"
${args.marginLeft ? `margin-left="${args.marginLeft}"` : null}
${args.marginRight ? `margin-right="${args.marginRight}"` : null}
${args.size != 'text' ? `size="${args.size}"` : null}
${args.fixedWidth ? `fixed-width="${args.fixedWidth}"` : null}
${args.iconStyle != 'solid' ? `iconStyle="${args.iconStyle}"` : null}
>
</gcds-icon>
`;
Expand All @@ -607,7 +557,6 @@ export const Default = Template.bind({});
Default.args = {
name: 'close',
size: 'text',
iconStyle: 'solid',
};

// ------ Icon name ------
Expand Down Expand Up @@ -734,32 +683,19 @@ MarginRight.args = {
size: 'text-small',
};

// TODO: Will be removed in separate pull request
// ------ Icon width ------
export const Width = TemplateTwo.bind({});
Width.args = {
name: 'close',
size: 'text',
fixedWidth1: true,
fixedWidth2: false,
};

// ------ Icon label ------

export const Label = Template.bind({});
Label.args = {
name: 'close',
size: 'text',
iconStyle: 'solid',
label: 'Clicking this icon will close the element.',
};

// ------ Icon events & props ------

export const Props = Template.bind({});
Props.args = {
fixedWidth: false,
iconStyle: 'solid',
label: '',
name: 'close',
size: 'text',
Expand All @@ -769,8 +705,6 @@ Props.args = {

export const Playground = TemplatePlayground.bind({});
Playground.args = {
fixedWidth: false,
iconStyle: 'solid',
label: '',
marginLeft: '0',
marginRight: '0',
Expand Down
4 changes: 0 additions & 4 deletions packages/web/src/components/gcds-icon/stories/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@ An icon is a symbol that helps understand context through a visual cue.

<Canvas of={Icon.MarginRight} story={{ inline: true }} />

### Fixed width vs variable width

<Canvas of={Icon.Width} story={{ inline: true }} />

### Label

If you are using an icon by itself, use the `label` to ensure that it has the proper screen reader text attached to it in these cases.
Expand Down
Loading