n8design / htwoo

hTWOo - a better Fluent UI framework.

n8design

htwoo's Issues

Longer title causes the card to expand

Describe the bug

Longer title causes the card to expand beyond its intended size

To Reproduce

<div class="hoo-doccard">
  <div class="hoo-cardimage i01DRMMVCVXY2OIVW2225HINW7ZWVKUDJ2L"><img
      src="blob:http://localhost:8080/9d9fe997-d0b5-451b-bd48-2493f225f2b4" width="320" height="180" alt=""></div>
  <div class="hoo-cardlocation i01DRMMVCVXY2OIVW2225HINW7ZWVKUDJ2L">Documents</div>
  <div class="hoo-cardtitle">Electronics Store Trends in International Markets.pptx</div>
  <div class="hoo-cardfooter">
    <div class="hoo-avatar i01DRMMVCVXY2OIVW2225HINW7ZWVKUDJ2L"><img
        src="blob:http://localhost:8080/7851ec35-2ffa-4684-a595-e012ecb45a18" alt="" class="hoo-avatar-img"
        loading="lazy"></div>
    <div class="hoo-cardfooter-data">
      <div class="hoo-cardfooter-name">Miriam Graham</div>
      <div class="hoo-cardfooter-modified">07/02/2021, 10:27:20</div>
    </div>
  </div>
</div>

Expected behavior

Longer title either wraps or is cut with an ellipsis.

Screenshots

Intended (above) vs. long title (below)

Desktop (please complete the following information):

• OS: macOS
• Browser edge
• Version latest

Wrong width on overflow menu items

Describe the bug
In flyout menus, all items will take up all the available width in the menu, as per .hoo-buttonflyout-item. This is not applied to .hoo-buttoncmd that is been moved into a overflow menu.

To Reproduce
Steps to reproduce the behavior:

1. Go to Pattern Lab
2. Trigger overflow and ensure there are at least to items in the overflow menu
3. Change the label of one of the items
4. Hover over a item with a shorter label
5. Notice that the hover background does not cover the full width

Expected behavior
Full width should be clickable and should have background on hover.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 122

Nested vertical nav

Is your feature request related to a problem? Please describe.
The vertical nav widget looks great but does not allow for nested lists.

Describe the solution you'd like
If hoo-nav-listsub are nested they should be indented, like they are in Fluent React.

Describe alternatives you've considered
Tried doing this with DevTools in Pattern Lab but did not succeed. It is of course also possible that I did it wrong there is just a missing example and not something missing in the framework.

Invalid markup in cmdbar

Describe the bug
Menu items in cmdbar are a list of div tags. If they are replaced with <li> tags the style is broken with visible list bullets.

To Reproduce
Steps to reproduce the behavior:

1. Go to Pattern Lab
2. Replace <div> tags under the <menu> tag with <li> tags using DevTools.

Expected behavior
As per MDN, menu should be treated similarily to <ul>, and thus should contain <li> tags.

Desktop (please complete the following information):

• OS: Windows
• Browser: Edge
• Version: 122

Additional context
Another alternative is to use ARIA role="list", which is the implicit role for <menu>, along with role="listitem".

With that said, I realize the specc is not always the right way from the users perspective. If this was a concious decision, please let me know and why if possible.

Avatar has too much margin: 0

[New Component] Shimmer effects including loading animation

Is your feature request related to a problem? Please describe.
Currently Simmers are not supported.

Describe the solution you'd like
Shimmer Like Fluent UI provides https://developer.microsoft.com/en-us/fluentui#/controls/web/shimmer

[HTWOO:Core] Fix Dialog Framework

Additional style classes are needed to position sidebars correctly.

.hoo-mdldialog-outer{
  box-sizing: border-box;
  border: 0;
}

Fluent 2

Fluent 2 is out but not yet feature complete from what I can tell. SharePoint is till Fluent 1 but the newer Viva apps have the Fluent 2 style.

I like the idea of a plain CSS framework and can understand not wanting to move to Fluent 2 before SharePoint has. Also, Microsoft’s implementation is still coupled with React.

Is this something on the project's radar? Is there a plan for a transition to Fluent 2?

Creating new React components

@mikezimm there are some how-to available on the documentation page. Have you checked those out. Also, there is a sample repo that helps you get started.

Originally posted by @StfBauer in #11 (comment)

@StfBauer - I saw your reply above to @mikezimm about the sample repo. Have you written something up for us to follow to help build out those components? It may be the documentation link above is it, but I want to be sure. I'm game to try using the library soon.

_base.scss - incorrect imports version 0.3.0

Version 0.3.0

Describe the bug
The _base.scss file includes the following imports:

@import '../sass/00-base/atoms/loading/progress';
@import '../sass/00-base/atoms/loading/shimmer';

These paths are incorrect but also, I believe the imports should be included in the _style.scss file instead where they are already correctly referenced, so I believe the fix is to remove them. Currently when importing _base.scss you get a build error because it cannot resolve the paths.

[BUG] Safari - Split button - Drop Down to Big

On split button the drop down is to big in Safari.

Genericize Overflow Resizer and transpile to ES6 Module for core

[WAI-ARIA]: Issue on Molecule Nav in case of aria-expanded

Fix aria-expanded

https://lab.n8d.studio/htwoo/htwoo-core/?p=molecules-nav

Facepile with Overflow Style

Using the PivotBar with Overflow and CommandBar with Overflow as patterns add styling and control for FacePile with Overflow.

Easier replacing shimmers with content

Is your feature request related to a problem? Please describe.
When using shimmers, at some point you'd want to replace them with the actual content. Right now, that requires DOM manipulation to replace the shimmer elements with the actual content.

Describe the solution you'd like
What if it shimmers were done using the :empty CSS pseudo selector, so that shimmer is displayed when there is no content (eg. <div></div>). When the content is retrieved and set, the shimmer would be replaced with the content. Such approach would remove the need to manipulate the DOM.

Describe alternatives you've considered
n/a

Search box icon border not aligned

Describe the bug
Depending on DPI, zoom etc. the borders of the search box's icon and input are not always aligned

To Reproduce
Steps to reproduce the behavior:

1. Go to Pattern Lab
2. Zoom using the browser

Expected behavior
The borders should always be aligned.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 124

Additional context
This seem to be a rounding error. The icon is always 32px in height, while the input is 31.44 in my case. A workaround is to use height: 2rem for the input, rather than height: fit-content.

[Enhancement] Would it be possible to add Overflow capability to PivotBar?

Hi,
One of the biggest challenges I have with using Fluent UI in SPFx projects is lack of responsive design in the Pivot compnent.

https://lab.n8d.studio/htwoo/htwoo-core/?p=molecules-pivotbar

Here's an example of my current webpart which allows for a rather lengthy set of pivot buttons.

Also complicating my implementation is that I also need to have a "farRight" set of buttons that float to the right which are not part of the pivot but that's another issue altogether which I think could be implemented with a css grid.

Right now, if I load this on an ipad, I can't even get to my farRight buttons :(

Thanks!

Update HOOPivotBar & HOOCommandBar to use menu element in htwoo-core

Tooltip implementation

Complete ToolTip implementation

[hoo-icon] justify-content to flex start

Describe the bug
hoo-icon in a table aligns itself to 100% of the with of the column. In case the icon should get left aligned the following needs to change.

.hoo-icon {
    justify-cotent: flex-start;
}

Wrong font weight on table headers

Describe the bug
<th> does not have a defined font-weight in htwoo-core. Compare Pattern Lab (700, in Edge's user agent style) with Fluent React (600).

Desktop (please complete the following information):

• OS: Windows
• Browser: Edge
• Version: 122

Missing hoo-checkbox-group styling as ext of hoo-radiobutton-group

Describe the bug
htwoo-core is missing definition of hoo-checkbox-group which should be an extension of hoo-radiobutton-group

HOOAvatar doesn't support larger sizes

Describe the bug
72 and 100 px is not supported in HOOAvatar but is supported in HOOPersona

[HTWOO:Core] - Quicklinks - Tiles

Fix input elements to allow override for id attribute

Describe the bug
Many, specifically the dropdown item has an internal id, allow for overriding the id in the component properties to allow for liking to labels.

Focus styling for buttons

Is your feature request related to a problem? Please describe.
Unlike, Fluent UI, htwoo allows for tab navigation between cmdbar buttons. There is however no styling indicating that a button has focus.

Describe the solution you'd like
Maybe a border like on flyout menu items.

Additional context
I am by no means an expert on web accessibility. If this is "by design", please just let me know.

Whole row not clickable in vertical nav

Describe the bug
In most cases, the whole row in the vertical nav is clickable. However, for items at the top level, that do not have children, only the label is clickable

To Reproduce
Steps to reproduce the behavior:

1. Go to Pattern Lab
2. Hover over Item 1, outside the label, notice the hand cursor
3. Hover over Item 4, outside the label, notice there is no hand cursor
4. Hover over Item 4's label, notice the hand cursor

Expected behavior
The whole row should be clickable, in all cases.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 122

Wrong label alignment when using hoo-mtag as <button>

Describe the bug
When using the hoo-mtag component on a <button> tag, the label is not aligned as expected.

To Reproduce

1. Open Tag Link in Pattern Lab
2. Use DevTools to change the <a> tag to <button> tag

Expected behavior
Label alignment should not move.

Desktop

• OS: Windows 10
• Browser: Edge
• Version: 121

Additional context
Not sure if hoo-mtag is meant to support <button> but I saw some button selector when debugging this.

Implement OptionList as fieldset

Research update to implement OptionList as a HTML fieldset.

Button style for aria-diabled

Is your feature request related to a problem? Please describe.
Disabled button styling is only applied for the disabled attribute.

Describe the solution you'd like
I wish that it was also applied for aria-disabled="true".

Additional context
While it is usually recommended to use native HTML attributes, the disabled attribute comes with some issues. One is that the element becomes not focusable. For a user using tab navigation this can be a problem, as when the button is disabled (i.e. during for submission), focus will jump to the next element in the tabindex, potentially disorienting the user. Imagine being asked to try again, but focus has changed away from the button!

Fabric React also seem to be using aria-disabled over the native attribute.

Naturally it would be up to each developer to prevent double submission on buttons with aria-disabled="true".

FYI React 18 testing

I wrote about using React 17 in a previous issue on my work github, after some initial testing with React 18, htwoo appears to work on it too, with some warnings that it's not supported same reason I submitted the issue about React 17. I think it is because of the atom design system that things seem to work in React 18.

I will try out every single atom, molecule, organism and let you know what works and doesn't work. Should know the results tomorrow/Sunday.
I am using React 18's strict mode. I will collect info on what works/doesn't using strict mode and let you know.

I will submit the example, when I have it complete.

The contributing guidelines state I should submit an issue before contributing, to get feedback.

doccard - objectfit - cover

Hover effect incorrectly shown on checkbox and radio button

Describe the bug
The circle/square is filled when hovering over a disabled radio button or checkbox.

To Reproduce
Steps to reproduce the behavior:

1. Go to Pattern Lab for disabled checkbox and radio button
2. Hover over the input
3. Notice the inner circle appearing

Expected behavior
Nothing should happen, as in Fluent React.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 124

Additional context
You can fix it for radio buttons by adding the :disabled condition to relevant selectors.

.hoo-radio:hover:not(:checked, :disabled) + label:after, .hoo-radio:checked + label:after {
    transform: scale(1);
    opacity: 1;
}

Checkboxes are a little more tricky since there's this magic box-shadow used to implement the check icon.

.hoo-checkbox:not(:checked, :disabled):hover + label:after {
    position: absolute;
    top: 0.5rem;
    left: 0.3125rem;
    width: 0.125rem;
    height: 0.125rem;
    content: "";
    transform: rotate(45deg);
    background: var(--inputIcon);
    background: var(--neutralSecondary);
    box-shadow: 2px 0 0 var(--neutralSecondary), 4px 0 0 var(--neutralSecondary), 4px -2px 0 var(--neutralSecondary), 4px -4px 0 var(--neutralSecondary), 4px -6px 0 var(--neutralSecondary), 4px -8px 0 var(--neutralSecondary);
}

.hoo-checkbox:not(:checked, :disabled):hover + label:after, .hoo-checkbox:checked + label:after {
    position: absolute;
    top: 0.5rem;
    left: 0.3125rem;
    width: 0.125rem;
    height: 0.125rem;
    content: "";
    transform: rotate(45deg);
    background: var(--inputIcon);
    box-shadow: 2px 0 0 var(--inputIcon), 4px 0 0 var(--inputIcon), 4px -2px 0 var(--inputIcon), 4px -4px 0 var(--inputIcon), 4px -6px 0 var(--inputIcon), 4px -8px 0 var(--inputIcon);
}

Height of hoo-input-text changes when focused

Describe the bug
When focusing a hoo-input-text input it get slightly higher, pushing down content below.

To Reproduce
Steps to reproduce the behavior:

1. Go to Pattern Lab
2. Use DevTools to add a <p> or something below the input
3. Focus the input
4. Notice the text below being pushed down a bit.

Expected behavior
Size of focused element should not change

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 122

Additional context
You can workaround the bug by changing:

.hoo-input-text:focus {
    line-height: calc(1.9rem - 2px);
}

to:

.hoo-input-text:focus {
    /* Base line-height on same as .hoo-input-text (without focus) selector */
    line-height: calc(1.875rem - 2px);
}

HOOTag - Link type

Describe the bug
When link type HOOTag is clicked the a:visitied color replaces the text color of the link.

Screenshots

HOO-Option-Group columns

Is your feature request related to a problem? Please describe.
Find a way to specify number of columns for the option group using css/css variable? Also needs to be responsive.

Should hoo-nav-list be green in the Teams themes?

Describe the bug
The accent color seem to be green in all the three Teams themes.

For the SharePoint themes it seem to match the primary color.

To Reproduce
Steps to reproduce the behavior:

1. Go to Pattern Lab
2. Compare the different themes

Expected behavior
The accent color (i.e. link text and the right border for current page) should be purple I guess.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 123

Additional context
Just let me know if this is by design.

Make doccard clickable

hoo-doccard styling issues with htwoo-react components

Describe the bug
This may have come back from a previous bug? #21

Creating a document card using the HooCardImage, HooCardLocation, HooCardTitle components has a styling issue when the Location/Title values are really long.

What happens is, the HooCardImage doesn't grow with the container when the card properties push the container width

To Reproduce

Given that no HooDocumentCard control exists yet, create a document card following the Pattern Lab documentation, but use the new htwoo-react components for the image/location/title

1. Document Card HTML

 <div className={`hoo-doccard`}>
        <HOOCardImage imageSource={<pathToImage>}/>
        <HOOCardLocation location="https://northpoleindustries.sharepoint.com/sites/WorkshopTemplate"/>
        <HOOCardTitle title="Workshop Template" />
    </div>

Expected behavior
When loading a DocumentCard, the location/title fields should either wrap/ellipsis or the HooCardImage should grow the container as these properties get longer.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: All

v0.3.0 build error for htwoo-react

Describe the bug
Tried to build htwoo-react and got the following error. May be related to #19?

ERROR in ./lib/index.js
Module not found: Error: Can't resolve './Base.css' in 'D:\code\htwoo\htwoo-react\lib'
 @ ./lib/index.js 1:0-20

ERROR in ./lib/components/LQDButton/LQDButton.js
Module not found: Error: Can't resolve './LQDButton.css' in 'D:\code\htwoo\htwoo-react\lib\components\LQDButton'
 @ ./lib/components/LQDButton/LQDButton.js 28:0-25
 @ ./lib/components/LQDButton/index.js
 @ ./lib/LQDButton.js
 @ ./lib/index.js

ERROR in ./lib/components/LQDWebPartTitle/LQDWebPartTitle.js
Module not found: Error: Can't resolve './LQDWebPartTitle.css' in 'D:\code\htwoo\htwoo-react\lib\components\LQDWebPartTitle'
 @ ./lib/components/LQDWebPartTitle/LQDWebPartTitle.js 28:0-31
 @ ./lib/components/LQDWebPartTitle/index.js
 @ ./lib/LQDWebPartTitle.js
 @ ./lib/index.js

To Reproduce

• Open htwoo-react directory in VS code
• npm -i

Expected behavior
Build succeeds

Screenshots
.

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [e.g. chrome, safariNA]
• Version [v0.3.0]

[hTWOo:Core] - Quicklinks Film Strip

Implementation of Quicklinks FIlm stripe

Command bar height not matching Fluent React

Describe the bug
The height of the command bar is 46px or 48px, with .has-overflow.

To Reproduce
Steps to reproduce the behavior:

1. Go to Pattern Lab
2. Inspect the height of .hoo-cmdbar

Expected behavior
As in Fluent React, where it always is 44px.

Desktop (please complete the following information):

• OS: Windows
• Browser: Edge
• Version: 122

Additional context
.hoo-cmdbar has a 1px border transparent border, increasing the height to 46px. With .has-overflow, a slightly bigger min-height is also set, increasing the hight to 48px.

Handling max-height 100vw on dialogs

Handling max-height 100vw on dialogs

Create better spacing for checkbox and radio buttons in "hoo-checkbox-group" and "hoo-radiobutton-group"

React Versions.

I tried using this project as a non-spfx/teams project, since Fluent UI works on SPFx/Teams/Websites. It failed for me because the dependencies are 16.X. And downgrading my project just doesn't seem worth it since React 16 is so old.

I would like the React/React-DOM dependencies to be peer dependencies as shown:

{
    "peerDependencies": {
        "react": ">=16.14.0 <=17.0.2",
        "react-dom": ">=16.11.0 <=17.0.2"
        ....
    }
}

Additional context
React 16 & React 17 may be 2 different major versions, but React 17 should not be a breaking change for most projects. The difference is how event handlers occur within React. 16 used "document" level events, while React 17 uses scoped level events.

I checked the Dist folder/compiled output of the React package and it doesn't bundle React, which gives me confidence that switching to peer-dependencies is a non-breaking change for this project. It might cause TSC to fail, and to work around that would be @types/react and @types/react-dom.

Having the project be compatible with React 18 would be hard and requires time/effort, but it should be possible to cater for >=16.14 <=18.2

Any feedback would be greatly appreciated.

Error Label missing from Pattern Lab

Describe the bug
I am pretty sure there used to be an example for error labels.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://lab.n8d.studio/htwoo/htwoo-core/?p=atoms-error
2. 404 error :(

Oh snap, a 404!
You might want to double-check to see if the page you're looking for has moved or if your URL is correct.

Alternatively, click here to head back to the default Pattern Lab page!

Expected behavior
There should be an example for Error Label, like there is for Success Label.

Spinner implementation

Is your feature request related to a problem? Please describe.
The Spinner component from Fluent UI is missing.

Describe the solution you'd like
See Fluent React.

Additional context
This is my attempt to port Microsoft's CSS to fit better with hTWOo:

@keyframes hoo-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*
 * Animation from Fluent React
 * MIT license: https://github.com/microsoft/fluentui/blob/master/packages/react/LICENSE
 */
.hoo-spinner {
    display: block;
    box-sizing: border-box;
    border-radius: 50%;
    border-width: 1.5px;
    border-style: solid;
    border-color: var(--themePrimary) var(--themeLight) var(--themeLight);
    border-image: initial;
    animation-name: hoo-spinner;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
}

    .hoo-spinner,
    .hoo-spinner.medium {
        width: 1.25rem;
        height: 1.25rem;
    }

    .hoo-spinner.xsmall {
        width: 0.75rem;
        height: 0.75rem;
    }

    .hoo-spinner.small {
        width: 1rem;
        height: 1rem;
    }

    .hoo-spinner.large {
        width: 1.75rem;
        height: 1.75rem;
    }

[HTWOO:Core] - Quicklinks - Button Style

Forms and dialogs not adapting to dark mode

Describe the bug
Some styles are not adapting in a good way when enabling the Teams Dark theme.

To Reproduce
Test in Pattern Lab:

• Text input
• Radio buttons
• Checkboxes
• Dialogs/Sidebars
• Searchbox

Expected behavior
Look and feel should be more similar to the dark theme in New Teams. Though I realize it cannot match 100% until htwoo moves to Fluent 2.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 123

Additional context
Added the following CSS to my project which was a huge improvement

.hoo-input-text,
.hoo-input-search .hoo-icon,
.hoo-dlg,
.hoo-checkbox + label:before,
.hoo-radio:checked + label:before, .hoo-radio:not(:checked) + label:before {
    background: var(--bodyBackground);
    color: var(--bodyText);
}

.hoo-input-search .hoo-icon {
    fill: var(--bodyText);
}

.hoo-input-text::placeholder {
    color: var(--neutralSecondary);
}

Overflow menu opening not consistent with other flyouts

Describe the bug
When clicking the toggle button for a flyout menu the sub menu will become visible or hidden. This does not work for the overflow button, that instead triggered by hovering.

To Reproduce
See Pattern Lab

Expected behavior
As in Fluent React, where both types of flyout menus are toggled by clicking.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Edge
• Version: 121