Skip to content

Commit

Permalink
web: drop bootstrap depenedency (sourcegraph#41401)
Browse files Browse the repository at this point in the history
  • Loading branch information
@valerybugakov
valerybugakov authored Sep 7, 2022
1 parent c59895a commit 6d8db26
Show file tree
Hide file tree
Showing 21 changed files with 176 additions and 403 deletions.
6 changes: 0 additions & 6 deletions .stylelintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,6 @@
{
"regexp": "^.+\\.module(\\.scss)$"
}
],
"@sourcegraph/no-restricted-imports": [
true,
{
"paths": ["bootstrap*"]
}
]
}
}
4 changes: 3 additions & 1 deletion client/branded/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# Branded

This folder contains client code that is **branded**, i.e. it implements the visual design language we use across our web app and e.g. in the options menu of the browser extension.
Code in here can use Bootstrap and must not adapt styles of the code host (for more details, see [Styling UI in the handbook](../../doc/dev/background-information/web/styling.md)).
Code here can use global classes and must not adapt styles of the code host (for more details, see [Styling UI in the handbook](../../doc/dev/background-information/web/styling.md)).

Any code that is code host agnostic should go into [`../shared`](../shared) instead.
2 changes: 1 addition & 1 deletion client/branded/src/components/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ interface FormState {
/**
* Form component that handles validation.
* If the user tries to submit the form and one of the inputs is invalid,
* Bootstrap's `was-validated` class will be assigned so the invalid inputs get highlighted.
* the global `was-validated` class will be assigned so the invalid inputs get highlighted.
*/
export class Form extends React.PureComponent<FormProps, FormState> {
constructor(props: FormProps) {
Expand Down
2 changes: 1 addition & 1 deletion client/branded/src/components/panel/TabbedPanelContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ export const TabbedPanelContent = React.memo<TabbedPanelContentProps>(props => {
<ActionsNavItems
{...props}
extensionsController={extensionsController}
// TODO remove references to Bootstrap from shared, get class name from prop
// TODO remove references to global branded classes from shared, get class name from prop
// This is okay for now because the Panel is currently only used in the webapp
listClass="d-flex justify-content-end list-unstyled m-0 align-items-center"
listItemClass="px-2 mx-2"
Expand Down
171 changes: 2 additions & 169 deletions client/branded/src/global-styles/GlobalStylesStory/GlobalStyles.story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,19 @@
// documentation of all the Bootstrap classes we have available in our app, please see refer to the Bootstrap
// documentation for that. Its primary purpose is to show what Bootstrap's componenents look like with our styling
// customizations.
import { useState } from 'react'

import { action } from '@storybook/addon-actions'
import { DecoratorFn, Meta, Story } from '@storybook/react'
import classNames from 'classnames'
import 'storybook-addon-designs'

import { highlightCodeSafe, registerHighlightContributions } from '@sourcegraph/common'
import {
TextArea,
Button,
ButtonGroup,
Link,
Select,
BUTTON_SIZES,
Checkbox,
Input,
Text,
Code,
H1,
H2,
H3,
H4,
} from '@sourcegraph/wildcard'
import { TextArea, Button, Link, Select, Checkbox, Input, Text, Code, H1, H2, H3, H4 } from '@sourcegraph/wildcard'

import { BrandedStory } from '../../components/BrandedStory'
import { CodeSnippet } from '../../components/CodeSnippet'
import { Form } from '../../components/Form'

import { ColorVariants } from './ColorVariants'
import { FormFieldVariants } from './FormFieldVariants'
import { TextStory } from './TextStory'
import { preventDefault } from './utils'

registerHighlightContributions()
Expand All @@ -53,25 +34,6 @@ const config: Meta = {

export default config

export const TextTypography: Story = () => (
<>
<H1>Typography</H1>

<TextStory />
</>
)

TextTypography.parameters = {
design: {
name: 'Figma',
type: 'figma',
url:
'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=998%3A1515',
},
}

type ButtonSizesType = typeof BUTTON_SIZES[number] | undefined

export const CodeTypography: Story = () => (
<>
<H1>Code</H1>
Expand Down Expand Up @@ -253,136 +215,6 @@ export const Layout: Story = () => (
</>
)

export const ButtonGroups: Story = () => {
const [active, setActive] = useState<'Left' | 'Middle' | 'Right'>('Left')
const buttonSizes: ButtonSizesType[] = ['lg', undefined, 'sm']
return (
<>
<H1>Button groups</H1>
<Text>
Group a series of buttons together on a single line with the button group.{' '}
<Link to="https://getbootstrap.com/docs/4.5/components/buttons/">Bootstrap documentation</Link>
</Text>

<H2>Example</H2>
<div className="mb-2">
<Text>
Button groups have no styles on their own, they just group buttons together. This means they can be
used to group any other semantic or outline button variant.
</Text>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
<Button variant="secondary">Left</Button>
<Button variant="secondary">Middle</Button>
<Button variant="secondary">Right</Button>
</ButtonGroup>{' '}
Example with <Code>btn-secondary</Code>
</div>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
<Button outline={true} variant="secondary">
Left
</Button>
<Button outline={true} variant="secondary">
Middle
</Button>
<Button outline={true} variant="secondary">
Right
</Button>
</ButtonGroup>{' '}
Example with <Code>btn-outline-secondary</Code>
</div>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
<Button outline={true} variant="primary">
Left
</Button>
<Button outline={true} variant="primary">
Middle
</Button>
<Button outline={true} variant="primary">
Right
</Button>
</ButtonGroup>{' '}
Example with <Code>btn-outline-primary</Code>
</div>
</div>

<H2 className="mt-3">Sizing</H2>
<Text>
Just like buttons, button groups have <Code>sm</Code> and <Code>lg</Code> size variants.
</Text>
<div className="mb-2">
{buttonSizes.map(size => (
<div key={size} className="mb-2">
<ButtonGroup aria-label="Sizing example">
<Button size={size} outline={true} variant="primary">
Left
</Button>
<Button size={size} outline={true} variant="primary">
Middle
</Button>
<Button size={size} outline={true} variant="primary">
Right
</Button>
</ButtonGroup>
</div>
))}
</div>

<H2 className="mt-3">Active state</H2>
<Text>
The <Code>active</Code> class can be used to craft toggles out of button groups.
</Text>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
{(['Left', 'Middle', 'Right'] as const).map(option => (
<Button
key={option}
className={classNames(option === active && 'active')}
onClick={() => setActive(option)}
aria-pressed={option === active}
outline={true}
variant="secondary"
>
{option}
</Button>
))}
</ButtonGroup>{' '}
Example with <Code>btn-outline-secondary</Code>
</div>
<div className="mb-2">
<ButtonGroup aria-label="Basic example">
{(['Left', 'Middle', 'Right'] as const).map(option => (
<Button
key={option}
className={classNames(option === active && 'active')}
onClick={() => setActive(option)}
aria-pressed={option === active}
outline={true}
variant="primary"
>
{option}
</Button>
))}
</ButtonGroup>{' '}
Example with <Code>btn-outline-primary</Code>
</div>
</>
)
}

ButtonGroups.storyName = 'Button groups'

ButtonGroups.parameters = {
design: {
type: 'figma',
name: 'Figma',
url:
'https://www.figma.com/file/NIsN34NH7lPu04olBzddTw/Design-Refresh-Systemization-source-of-truth?node-id=908%3A2514',
},
}

export const InputGroups: Story = () => (
<>
<H1>Input groups</H1>
Expand Down Expand Up @@ -613,6 +445,7 @@ export const Meter: Story = args => (
</div>
</>
)

Meter.argTypes = {
min: {
type: 'number',
Expand Down
Loading

0 comments on commit 6d8db26

Please sign in to comment.