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.

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

[SvelteKit] auro-icon appearing as [object Object] #85

Open
gusnaughton opened this issue Jun 10, 2023 · 3 comments
Open

[SvelteKit] auro-icon appearing as [object Object] #85

gusnaughton opened this issue Jun 10, 2023 · 3 comments
Assignees

Comments

@gusnaughton
Copy link
Member

Please verify the version of auro-icon you have installed

4.0.2

Please describe the bug

npm create svelte@latest my-app
cd my-app
npm install
npx sb init
npm i --save @alaskaairux/auro-icon @aurodesignsystem/auro-icon @alaskaairux/design-tokens


cat <<EOT >> src/stories/AlaskaAirUXTest.svelte
<script>
    import '@alaskaairux/auro-icon';
    import '@alaskaairux/design-tokens/dist/tokens/CSSCustomProperties.css';
</script>

<auro-icon category="interface" name="check-lg" success="true"></auro-icon>
EOT


cat <<EOT >> src/stories/AlaskaAirUXTest.stories.svelte
import AlaskaAirUXTest from './AlaskaAirUXTest.svelte';

export default {
	component: AlaskaAirUXTest,
	title: 'AlaskaAirUXTest',
	excludeStories: /.*Data$/
};

const Template = ({ ...args }) => ({
	Component: AlaskaAirUXTest,
	props: args,
});

export const Default = Template.bind({});
Default.args = {};
EOT

cat <<EOT >> src/stories/AuroDesignSystemTest.svelte
<script>
    import '@aurodesignsystem/auro-icon';
    import '@alaskaairux/design-tokens/dist/tokens/CSSCustomProperties.css';
</script>

<auro-icon category="interface" name="check-lg" success="true"></auro-icon>
EOT


cat <<EOT >> src/stories/AuroDesignSystemTest.stories.svelte
import AuroDesignSystemTest from './AuroDesignSystemTest.svelte';

export default {
	component: AuroDesignSystemTest,
	title: 'AuroDesignSystemTest',
	excludeStories: /.*Data$/
};

const Template = ({ ...args }) => ({
	Component: AuroDesignSystemTest,
	props: args,
});

export const Default = Template.bind({});
Default.args = {};
EOT

npx storybook dev -p 6006

Open localhost:6006 and browse to the story. Version 4 produces [object Object], where version 3 does not.

Reproducing the error on the docsite

None

Expected behavior

I expect nominal auro-icon performance, not [object Object].

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Additional context

No response

Exit criteria

No response

@gusnaughton gusnaughton added Type: Bug Bug or Bug fixes auro-icon not-reviewed Issue has not been reviewed by Auro team members labels Jun 10, 2023
@blackfalcon
Copy link
Member

Why are you installing @alaskaairux/auro-icon @aurodesignsystem/auro-icon at the same time?

The update to 4.0, we didn't change anything how the element functionally works. It was mostly repo updates and the new namespace caused the BREAKING CHANGE.

See src file in this commit https://github.com/AlaskaAirlines/auro-icon/pull/78/files#diff-82293b9915453faa44b6cc3cffe36b2e4e83136a64b9197bf067efd1b300ba72

@MattSidor
Copy link

I am seeing the same issue in Svelte (not SvelteKit and not server-side rendered) on version 4.0.2. I do not have @alaskaairux/auro-icon installed simultaneously.

Screenshot 2023-08-25 at 2 40 29 PM

@blackfalcon
Copy link
Member

@MattSidor or @gusnaughton can you confirm that there is no issue when using @alaskaairux/[email protected]?

@jason-capsule42 jason-capsule42 removed Type: Bug Bug or Bug fixes not-reviewed Issue has not been reviewed by Auro team members labels Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants