Clicking on examples in docs moves and shows different documentation component

[troglotit]

Clicking on this particular documentation component moves you to another component - which has conflicting html id (also for Striped). That's because files have same name but reside in different folders. We should either rename those files like TableExampleStriped -> TableTypesExampleStriped & TableVariationsExampleStriped with corresponding fixed in names, or we could add folder names in anchorName generator here

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

@troglotit Thanks for report, the valid issue.

It's a known problem, but I don't want to fix it as the most of our examples have unique names. I renamed the one of examples, so it should be correct after release, see #2739.

[troglotit]

But that is just one of the names (another being Collapsing as shown in screenshot).

Documentation writers are going to write files with the same name, and users are going to face those issues, and raise them here again .

The fix in that file would be as simple as

-  this.anchorName = _.kebabCase(_.last(examplePath.split('/')))
+  this.anchorName = _.kebabCase(_.join(_.takeRight(examplePath.split('/'), 2), ''))

[levithomason]

If we add the proposed hash update, let's be sure to include a redirect from the old path to the new path. We have a lot of links out there.

[troglotit]

Maybe we could a test for duplicate ids then.

[levithomason]

Oops, didn't mean to close this 😊

[msrikanth508]

I'm working on this issue, I found two things with links navigation when I looked deeply

1. As @troglotit mentioned there are no unique ids. To reduce the hash collision, I'm considering full path like _.kebabCase(path.split('/').join(' '))
2. Though we have unique ids in some places like in Collections/Grid, link doesn't get highlighted but window will be scrolled to correct Id. I think it's because of requestAnimationFrame event on Visibility file, as these accordion items will be called in a sequence and we are not relying on window path/active path in below function handleExamplePassed = (e, props) => this.setState({ activePath: props.examplePath }), this context function will be triggered from ComponentExample.js file.

[levithomason]

Could you post some example URLs you are considering for this? I'm open to making changes here.

[msrikanth508]

@levithomason please follow below steps

1. Open https://react.semantic-ui.com/collections/grid#grid-example-celled
2. Click different links in Accordion control on right side panel
3. Follow Step 2 until you find wrong option gets highlighted like

I'm working on the fix.

[levithomason]

Oh, I see. You are not referring to the id on the actual example then. We also have collisions there. There are examples with duplicate ids on the page. I've considered reworking those as well.

[msrikanth508]

Yes, there is duplicate Id issue as well. Please give me a chance, I'll work on this. I'm stoked for contributing to open source :). What do you say?

[levithomason]

Awesome! Welcome to the project :) Let us know how we can help.

[msrikanth508]

Thank you @levithomason for offering help :) Currently I'm going through the project to understand in and out flows. I liked declarative way of programming style in this project, I really appreciate that, good job 🥇