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

cds-snc · Feb 20, 2025 · 7c10c1b · 7c10c1b
1 parent 704d13e
commit 7c10c1b
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 222 deletions.
diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts
@@ -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 {

diff --git a/packages/vue/lib/components.ts b/packages/vue/lib/components.ts
@@ -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'
 ]);
 

diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts
@@ -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.
          */
@@ -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.
          */

diff --git a/packages/web/src/components/gcds-icon/gcds-icon.scss b/packages/web/src/components/gcds-icon/gcds-icon.scss
@@ -1,4 +1,4 @@
-@layer reset, default, names, fixedWidth, margin, size;
+@layer reset, default, names, margin, size;
 
 @layer reset {
   :host {
@@ -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 */

diff --git a/packages/web/src/components/gcds-icon/gcds-icon.tsx b/packages/web/src/components/gcds-icon/gcds-icon.tsx
@@ -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.
    */
@@ -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.
    */
@@ -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}

diff --git a/packages/web/src/components/gcds-icon/readme.md b/packages/web/src/components/gcds-icon/readme.md
@@ -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

diff --git a/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx b/packages/web/src/components/gcds-icon/stories/gcds-icon.stories.tsx
@@ -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: {
@@ -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: [
@@ -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, '');
 
@@ -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>
 `;
@@ -607,7 +557,6 @@ export const Default = Template.bind({});
 Default.args = {
   name: 'close',
   size: 'text',
-  iconStyle: 'solid',
 };
 
 // ------ Icon name ------
@@ -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',
@@ -769,8 +705,6 @@ Props.args = {
 
 export const Playground = TemplatePlayground.bind({});
 Playground.args = {
-  fixedWidth: false,
-  iconStyle: 'solid',
   label: '',
   marginLeft: '0',
   marginRight: '0',

diff --git a/packages/web/src/components/gcds-icon/stories/overview.mdx b/packages/web/src/components/gcds-icon/stories/overview.mdx
@@ -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.